精华内容
下载资源
问答
  • Web前端期末大作业

    2020-12-17 08:53:32
    大学生网页设计大作业-以下5个网页设计制作作品自己任选: ...2.web网页大作业 3.大学生期末网页大作业-6页面的网页设计,是个人主页类型。包含了6个页面,包含视频、脚本等元素。水平不高,但交选修作业就足够了。
  • web前端期末大作业

    2020-12-17 09:43:39
    2.web网页大作业 3.大学生期末网页大作业-6页面的网页设计,是个人主页类型。包含了6个页面,包含视频、脚本等元素。水平不高,但交选修作业就足够了。 4.免费大学生网页设计制作作业作品下载dreamweaver制作静态...
  • 好久没上CSDN了,不知不觉大二结束了,马上就要大三了,感觉非常迷茫,一直想把上次前端课的大作业发布一下,拖到现在,哈哈。先看一下在浏览器的效果。 想做的是一个类似企业网站的,主要是用CSS布局这一块花费...

    一、在浏览器中的运行结果:
    在这里插入图片描述
    二、部分代码
    1.HTML:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>启乐官网</title>
        <link rel="stylesheet" href="style.css"/>
        <script src="myjs.js" charset="gb2312"></script>
    </head>
    <body>
    
    <header>                                          <!-- 页眉 -->
        <a id="hah" href="home.html" title="启乐首页"><h1>启乐</h1></a>                      <!-- logo点击跳往首页 -->
        <h3 id="hh">------美好生活的开始</h3>
        <a id="ha2" href="" title="注册/登录"><h3>注册/登录</h3></a>
    </header>
    
    <nav>                                                    <!--导航链接 -->
        <ul>
            <li><a href="home.html">首页</a></li>
            <li><a href="introudction.html">企业介绍</a></li>
    
            <div class="nud">
                <a href="product.html" class="nuda">产品中心</a>
                <div class="nudd">
                    <a href="product.html">客厅家具系列</a>
                    <a href="product.html">床上用品</a>
                    <a href="product.html">美容护肤系列</a>
                    <a href="product.html">精品服装</a>
                    <a href="product.html">限时优惠</a>
                </div>
            </div>
    
            <li><a href="https://www.baidu.com/s?rtt=1&bsst=1&cl=2&tn=news&word=%E5%90%AF%E4%B9%90" target="_blank">新闻动态</a></li>
            <li><a href="join.html">加入我们</a></li>
        </ul>
    </nav>
    
    <div class="box">                                                 <!--第一个盒模型-->
            <div id="ha1">                                            <!-- 动画 广告轮播区域-->
    
            </div>
    
            <aside id="ha3">                                          <!-- 边栏区 联系我们 -->
                <div id="ad">
                <img src="image/contact02.jpg" alt=""/>
                <div>
                    <table class="tab01">
                        <tr>
                            <td>地址:</td>
                            <td>北京市东城区棉花胡同01</td>
                        </tr>
                        <tr>
                            <td>电话:</td><td>010-12345678</td>
                        </tr>
                        <tr>
                            <td>邮箱:</td><td>qile@163.com</td>
                        </tr>
                    </table>
    
                </div>
                </div>
            </aside>
    
    </div>
    
    <div class="box01">                                             <!--第二个盒模型-->
    
        <div class="new">                                                  <!--热卖商品-->
            <div><img id="nd" src="image/hot.jpg" alt=""/></div><br/>
    
            <a href="" title="棉芯枕头" id="ba1">
                <img id="na" src="image/product01.jpg" alt=""/><br/>
                <h3>棉芯枕头 特价¥50</h3>
            </a>
    
            <a href="" title="机械键盘" id="ba2">
                <img id="na1" src="image/product02.jpg" alt=""/><br/>
                <h3>机械键盘 特价¥100</h3>
            </a>
    
            <a href="" title="精美橱柜" id="ba3">
                <img id="na2" src="image/product05.jpg" alt=""/><br/>
                <h3>精美橱柜 特价¥600</h3>
            </a>
    
    
        </div>
    
        <div class="register">                                               <!--登录表单-->
            <img id="ri" src="image/register.jpg" alt=""/><br/>
    
            <form action="" id="fo">
                <table>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" id="user01" maxlength="11" placeholder="请输入您的用户名" required/></td>
                </tr>
    
                    <tr id="fot">
                        <td>密码</td>
                        <td><input type="password" id="password01" maxlength="16" required/></td>
                    </tr>
    
                    <tr>
                        <th colspan="2"><input type="submit" value="登录"></th>
                    </tr>
                </table>
            </form>
    
            <div class="dbd">
            <a href="" >忘记密码</a>
            <a href="" id="zc">注册账号</a>
            </div>
    
        </div>
    </div>
    
    <div class="news">
        <img id="nei" src="image/news.jpg" alt=""/><br><br>
        <div class="box03">
        <div class="nd">
            <a href="https://www.baidu.com/s?rtt=1&bsst=1&cl=2&tn=news&word=%E5%90%AF%E4%B9%90" target="_blank" title="企业新闻">CCKA零售创新奖、十大创新业态在会议期间隆重揭晓,<br>由启乐打造的时尚原创生活类
            自营电商平台“启乐优选”<br>从上百个候选案例中脱颖而出,斩获CCKA零售创新奖。</a>
        </div>
    
    <div id="nea02">
            <a href="https://www.baidu.com/s?rtt=1&bsst=1&cl=2&tn=news&word=%E5%90%AF%E4%B9%90" target="_blank" title="企业新闻">启乐中国新世代于北京正式开幕。北京<br>
                京东店选址中国电商的代表企业——总部园区内,这是<br>
                HOTEL后在中国的一次新世代事业形态布局。</a>
    </div>
        </div>
    
    </div><br><br><br><br>
    
    <footer>                                                                    <!-- 页脚区 -->
                Copyright © 18网汉*** All Rights Reserved. 版权所有
    </footer>
    <br>
    </body>
    </html>
    

    2.CSS

    *{
        /*background-color: #5F822F;*/
    }
    #ha2{
        position:absolute;
        left: 1400px;
        text-decoration: none;
    }
    #ha2:hover{
        background-color: aqua;
    }
    
    header{
        height: 150px;
        background-image: url("image/header01.jpg");
        background-repeat: round;
    }
    #hah{
        text-decoration: none;
    }
    
    #hah:hover{
        background-color: aqua;
    }
    
    #hh{
        color: coral;
        position:absolute;
        left:100px;
        top: 30px;
    }
    nav{
        width: 1000px;
    }
    nav ul{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: bisque;
        height: 40px;
        font-size: x-large;
        font-weight: 800;
        list-style-type: none;
        overflow: hidden;
    
    }
    nav ul li a{
        text-decoration: none;
        padding: 12px 50px;
        /*padding: 1px 5px;*/
    }
    
    nav ul li a:hover{
    background-color: burlywood;
    
    }
    
    .nud{
        display: inline-block;
    }
    
    .nudd{
        display: none;
        position: absolute;
    
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    
    }
    
    
    .nud:hover .nudd{
        display: block;
    }
    
    
    .nudd a:hover{
        background-color: aquamarine;
    
    
    }
    
    .nuda{
        display: inline-block;
        text-decoration: none;
    }
    
    .nuda:hover{
        background-color: burlywood;
    }
    
    .nudd a{
        display: block;
        color: crimson;
        padding: 12px 50px;
        text-decoration: none;
    }
    
    .box{
        display: flex;
    }
    
    
    
    @-webkit-keyframes myfirst {
        0%{
            background-image: url("image/wuy00.jpg");
    
        }
    
        25%{
            background-image: url("image/wuy01.jpg");
        }
        50%{
            background-image: url("image/wuy02.jpg");
        }
    
        75%{
            background-image: url("image/wuy03.jpg");
        }
    }
    
    
    #ha1{
        flex: 60%;
        width:60%;
        height:450px;
        background-size: 100%;
        background-image:url("image/wuy00.jpg") ;
        -webkit-animation: myfirst 8s infinite;
    }
    
    #ha3{
    flex: 40%;
    }
    #ad{
        padding-left: 20px;
    }
    
    .tab01 td{
        border:2px solid;
        border-color: blueviolet;
        background-color: aquamarine;
        height: 50px;
    }
    .tab02 td{
        border:2px groove;
        border-color: bisque;
        background-color: bisque;
        height: 50px;
    }
    .box01{
        display: flex;
    }
    .new{
        flex: 60%;
    }
    .new h3{
        color: red;
    }
    .register{
        flex: 40%;
        padding-top: 10px;
        padding-left: 20px;
    }
    #nd{
        padding-top: 10px;
        width: 900px;
        height:83px;
    
    }
    
    #ba1{
        float: left;
    }
    #ba2{
        float: left;
        padding-left: 50px;
    }
    #ba3{
        float: left;
        padding-left: 50px;
    }
    
    @keyframes mysec {
        0%{
            transform:scale(0.7);}
        25%{
            transform:scale(1);  }
    
    }
    
    #na{
        width:250px;
        height:200px;
    }
    #na:hover{
        animation: mysec 5s linear infinite;
    }
    #na1{
        width:250px;
        height:200px;
    }
    #na1:hover{
        animation: mysec 5s linear infinite;
    }
    #na2{
        width:250px;
        height:200px;
    }
    #na2:hover{
        animation: mysec 5s linear infinite;
    }
    #ri{
        padding-top: 1px;
        width: 400px;
        height:83px;
    }
    #fo{
        padding-top: 20px;
    }
    .dbd{
        padding-left: 10px;
        padding-top: 20px;
    }
    #zc{
        padding-left: 80px;
    }
    #nei{
        padding-top: 10px;
    }
    .nd{
        padding-left: 30px;
    }
    .box03{
        display: flex;
    }
    #nea02{
        float: left;
        padding-left: 80px;
    }
    
    .intd{
        padding-left: 80px;
    }
    
    
    
    footer{
        text-align: center;
        background-color: #83B441;
        height: 50px;
    }
    
    

    3.Javascript

    window.onload=function(){
        if(document.getElementById("fo") != null){
            document.getElementById("fo").onsubmit=function(){
                var yhm = document.getElementById("user01");
                var mm = document.getElementById("password01");
    
                if(!(/^1\d{10}$/.test(yhm.value))){          /*用正则表达式,检查输入的用户名格式是否为以1开头的11位数*/
                    alert("输入用户名格式错误,请重新输入以1开头的11位数用户名!");
                    return false;
                }
    
                if (mm.value != 12345) {
                    alert("密码输入错误,请重新输入!");
                    return false;
                }
                return ture;
            }
        }
    
    
    
    
    }
    

    声明:案例中的图片素材来源于网络,侵删。
    https://pan.baidu.com/s/1xGvBVjnJNWxsdoUziujz0g 提取码:162k

    展开全文
  • 综合本课程所学知识,设计一个综合性网站符合Web标准(Div+CSS)的静态html网站作品。 1. 需要包含个人信息,网站需包含多个子栏目链接按钮(至少3个是有效的实际链接),每个子栏目必须有文字和图片等元素,不可以...
  • <p style="text-align:center"><img alt="" src="https://img-ask.csdnimg.cn/upload/1622363067057.PNG" /></p>   <p style="text-align:center"><img alt="" src=...  </p>
  • web前端设计与开发期末作品/期末大作业,共有8个静态页面,主题是中华传统美食之旅,图片非常精美且诱人噢。
  • 大学实验教学示范中心HTML网站模板,DIV+CSS布局设计,两套蓝色风格HTML网站模板,全套模板,包括注册、登录、首页、新闻中心、...web前端期末结课大作业html+css+javascript网页设计大学实验教学示范中心HTML网站模板
  • 期末结课大作业 html+css+javascript网页设计实例 企业网站制作,资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件,用于大学web网页课程设计参考以及相关从业人员参考学习
  • Web前端开发技术课程大作业期末考试

    千次阅读 多人点赞 2020-07-27 22:11:19
    Web前端开发技术课程大作业期末考试作业要求最终界面部分代码呈现index.htmllogin.htmlindex.csslogin.cssswithpic.js完整代码素材下载 作业要求 网站前端程序不仅要能够把用户要求的内容呈现出来,还要满足布局...

    作业要求

    网站前端程序不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
    为此,本次作业的要求主要有:
    (1)登录功能。登陆是对用户的验证,防止非法用户登陆和使用。
    (2)注册功能。注册是对新用户的加入设定的,可以增加游戏用户。
    (3)导航功能。提供完整的系统导航功能,帮助用户快速定位到需要浏览的区域。
    (3)广告轮播。广告轮播实现了重要客户的主要产品核心位置展示功能。
    (4)搜索入口。搜索功能提供客户搜索定位功能,可以帮助客户快速找到需要的产品。
    

    最终界面

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    部分代码呈现

    index.html

    <!doctype html>
    <html lang="en">
    
    <head>
        <title>英雄联盟</title>
        <meta charset="UTF-8">
        <meta name="keywords" content="LOL,腾讯游戏,英雄联盟" />
        <meta name="description" content="LOL,腾讯游戏,英雄联盟" />
    
        <link href="css/index.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/qiehuan.js"></script>
        <script type="text/javascript" src="js/switchpic.js"></script>
    </head>
    
    <body onload="init();">
        <div id="topNavBar">
            <input type="text" value="">
            <input type="button" value="搜索" id="where">
            <a href="logon.html" class="nav_on">注册</a> &nbsp;
            <a href="login.html" class="nav_on">登录</a>
        </div>
        <div id="container" class="">
            <div id="header" class="">
                <img src="img/lol_logo.jpg" alt="">
            </div>
            <div id="menu_out">
                <div id="menu_in">
                    <div id="menu">
                        <ul id="nav">
                            <li><a class="nav_on" id="mynav0" onmouseover="javascript:qiehuan(0)" href="#" target="framebody"><span>游戏资料</span></a></li>
                            <li class="menu_line"></li>
                            <li><a href="#" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>游戏商城</span></a></li>
                            <li class="menu_line"></li>
                            <li><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>游戏合作</span></a></li>
                            <li class="menu_line"></li>
                            <li><a href="#" onmouseover="javascript:qiehuan(3)" id="mynav3" class="nav_off"><span>社区互动</span></a></li>
                            <li class="menu_line"></li>
                            <li><a href="#" onmouseover="javascript:qiehuan(4)" id="mynav4" class="nav_off"><span>赛事官网</span></a></li>
                            <li class="menu_line"></li>
                            <li><a href="#" onmouseover="javascript:qiehuan(5)" id="mynav5" class="nav_off"><span>自助系统</span></a></li>
                            <li class="menu_line"></li>
                            <li><a href="#" onmouseover="javascript:qiehuan(6)" id="mynav6" class="nav_off"><span>游戏视频</span></a></li>
                            <li class="menu_line"></li>
                            <li><a href="#" onmouseover="javascript:qiehuan(7)" id="mynav7" class="nav_off"><span>填写问卷</span></a></li>
                            <li class="menu_line"></li>
                            <li><a class="nav_off" id="mynav8" onmouseover="javascript:qiehuan(8)" href="#"><span>关于网站</span></a></li>
                        </ul>
                        <div id="menu_con">
                            <div id="qh_con0" style="display: block">
                                <ul>
                                    <li><a href="#"><span>游戏下载</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>游戏指引</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="./web_first.html" target="block"><span>资料库</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>云顶之弈</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>攻略中心</span></a></li>
                                </ul>
                            </div>
                            <div id="qh_con1" style="display: none">
                                <ul>
                                    <li><a href="#"><span>点卷充值</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>道具城</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>周边商城</span></a></li>
                                </ul>
                            </div>
                            <div id="qh_con2" style="display: none">
                                <ul>
                                    <li><a href="#"><span>LOL桌游</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>LOL信用卡</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>网吧特权</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>电竞小说</span></a></li>
                                </ul>
                            </div>
                            <div id="qh_con3" style="display: none">
                                <ul>
                                    <li><a href="#"><span>官方社区</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>视频中心</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>官方论坛</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>官方微信</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>官方微博</span></a></li>
                                </ul>
                            </div>
                            <div id="qh_con4" style="display: none">
                                <ul>
                                    <li><a href="#"><span>LPL职业联赛</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>LDL发展联赛</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>全球总决赛</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>全明星赛</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>季中杯</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>德玛西亚杯</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>全国高校联赛</span></a></li>
                                </ul>
                            </div>
                            <div id="qh_con5" style="display: none">
                                <ul>
                                    <li><a href="#"><span>转区系统</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>封号查询</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>账号注销</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>信誉分系统</span></a></li>
                                </ul>
                            </div>
                            <div id="qh_con6" style="display: none">
                                <ul>
                                    <li><a href="#"><span>推荐视频</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>官方视频</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>娱乐视频</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>赛事视频</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>云顶之弈视频</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>教学视频</span></a></li>
                                </ul>
                            </div>
                            <div id="qh_con7" style="display: none">
                                <ul>
                                    <li><a href="web_question.html" target="block"><span>填写问卷</span></a></li>
                                </ul>
                            </div>
                            <div id="qh_con8" style="display: none">
                                <ul>
                                    <li><a href="#"><span>联系客服</span></a></li>
                                    <li class="menu_line2"></li>
                                    <li><a href="#"><span>网站作者</span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="main">
                <div id="top" class="">
                    <a href="#"><img id="pic" src="img/example1.jpg" border="0" alt="" onmouseover="pause();" onmouseout="reStart();"></a>
                </div>
    
                <div id="down" class="">
                    <iframe name="framebody" src="web_first.html"></iframe>
                </div>
            </div>
            <div class="bottom">
                <ul>
                    <li><strong>友情链接:</strong>
                        <select size="1" name="d1" onchange="window.open(this.options[this.selectedindex].value)">
                            <option>
                                知名游戏厂家&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </option>
                            <option value="https://game.qq.com/portal2010/about.htm">腾讯游戏</option>
                            <option value="https://www.activisionblizzard.com/">动视暴雪</option>
                            <option value="https://www.microsoft.com/zh-cn/">微软游戏工作室</option>
                            <option value="https://www.apple.com.cn/">苹果</option>
                            <option value="https://www.sony.com.cn/">索尼</option>
                        </select>
                        <select size="1" name="d1" onchange="window.open(this.options[this.selectedindex].value)">
                            <option>
                                优秀游戏连接&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </option>
                            <option value="https://pubg.qq.com/">绝地求生</option>
                            <option value="https://dnf.qq.com/">地下城与勇士</option>
                            <option value="http://www.m3guo.com/v2/">梦三国</option>
                            <option value="https://wow.blizzard.cn/landing">魔兽世界</option>
                            <option value="https://xyq.163.com/">梦幻西游</option>
                            <option value="https://wuxia.qq.com/">天涯明月刀</option>
                        </select>
                    </li>
                    <li>
                        腾讯游戏&nbsp;·&nbsp;英雄联盟&nbsp;&nbsp;LOL 1998-2020&copy;保留所有权利,未经允许不得复制、镜像</li>
                </ul>
            </div>
        </div>
    </body>
    
    </html>
    

    login.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>登陆界面</title>
        <link href="css/login.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div class="dowebok">
            <div class="logo"></div>
            <div class="form-item">
                <input id="username" type="text" autocomplete="off" placeholder="账号">
            </div>
            <div class="form-item">
                <input id="password" type="password" autocomplete="off" placeholder="登录密码">
            </div>
            <div class="form-item">
                <a href="index.html"><button id="submit">登 录</button></a>
            </div>
        </div>
    </body>
    
    </html>
    

    index.css

                @charset "utf-8";
                * {
                    font-size: 12px;
                    font-family: Arial, Helvetica, sans-serif;
                }
                
                body {
                    margin: 0px auto;
                    padding: 0px;
                    text-align: center;
                    position: relative;
                }
                
                #topNavBar {
                    position: absolute;
                    margin-left: 290px;
                    font-size: 20px;
                }
                
                #topNavBar a {
                    font-size: 12px;
                }
                
                #topNavBar a:link {
                    color: white;
                    text-decoration: none;
                }
                
                #topNavBar a:visited {
                    color: white;
                    text-decoration: none;
                }
                
                #topNavBar a:hover {
                    color: white;
                    text-decoration: none;
                }
                
                #topNavBar a:active {
                    color: white;
                    text-decoration: none;
                }
                
                #where {
                    margin-right: 660px;
                }
                
                #container {
                    width: 960px;
                    padding: 0 auto;
                    margin: 0 auto;
                }
                
                img {
                    width: 960px;
                    height: auto;
                }
                
                #menu ul {
                    padding: 0;
                    border: 0;
                    list-style: none;
                    line-height: 150%;
                    margin-top: 0;
                    margin-right: 0;
                    margin-bottom: 0;
                    margin-left: 40px;
                }
                
                #menu li {
                    color: white;
                }
                
                #menu_out {
                    width: 960px;
                    padding-left: 4px;
                    margin-left: auto;
                    margin-right: auto;
                    background: url("../img/menu_left.gif") no-repeat left top;
                    overflow: hidden;
                    /* ����������� */
                }
                
                #menu_in {
                    background: url("../img/menu_right.gif") no-repeat right top;
                    padding-right: 4px;
                }
                
                #menu {
                    background: url("../img/menu_bg.gif") repeat-x;
                    height: 73px;
                    width: 960px;
                }
                
                .menu_line {
                    background: url("../img/menu_line.gif") no-repeat center top;
                    width: 8px;
                }
                
                .menu_line2 {
                    background: url("../img/menu_line2.gif") no-repeat center top;
                    width: 15px;
                }
                
                #nav {
                    padding-left: 20px;
                    width: 960px;
                }
                
                #nav li {
                    float: left;
                    height: 35px;
                }
                
                #nav li a {
                    float: left;
                    display: block;
                    padding-left: 6px;
                    height: 35px;
                    background: url("../img/menu_on_left.gif") no-repeat left top;
                    cursor: pointer;
                    text-decoration: none;
                }
                
                #nav li a span {
                    float: left;
                    padding: 11px 14px 10px 10px;
                    line-height: 14px;
                    background: url("../img/menu_on_right.gif") no-repeat right top;
                    font-size: 14px;
                    font-weight: bold;
                    color: #FFFFFF;
                    text-decoration: none;
                }
                
                #nav li .nav_on {
                    background-position: left 100%;
                }
                
                #nav li .nav_on span {
                    background-position: right 100%;
                    color: #333333;
                    text-decoration: none;
                    padding: 14px 14px 7px 10px;
                }
                
                #menu_con {
                    text-align: left;
                    padding-left: 20px;
                    clear: both;
                }
                
                #menu_con li {
                    float: left;
                    height: 22px;
                    margin-top: 8px;
                }
                
                #menu_con li a {
                    display: block;
                    float: left;
                    background: url("../img/menu_on_left2.gif") no-repeat left top;
                    cursor: pointer;
                    padding-left: 3px;
                }
                
                #menu_con li a span {
                    float: left;
                    padding: 6px 10px 4px 10px;
                    line-height: 12px;
                    background: url("../img/menu_on_right2.gif") no-repeat right top;
                    color: black;
                }
                
                #menu_con li a:hover {
                    text-decoration: none;
                    background: url("../img/menu_on_left2.gif") no-repeat left bottom;
                }
                
                #menu_con li a:hover span {
                    background: url("../img/menu_on_right2.gif") no-repeat right bottom;
                }
                
                #main {
                    width: 960px;
                    height: 300px;
                }
                
                #top {
                    width: 960px;
                    height: auto;
                    border: 1px solid white;
                }
                
                #top img {
                    width: 960px;
                    height: 489px;
                }
                
                #down {
                    width: 960px;
                    height: 500px;
                    margin: 0 auto;
                }
                
                #down iframe {
                    width: 960px;
                    height: 500px;
                    border: 0px;
                    padding: 0px;
                    margin: 0px;
                }
                
                .bottom {
                    clear: both;
                    height: 80px;
                    background: #000000;
                    text-align: center;
                    padding-top: 20px;
                    color: white;
                    font-size: 18px;
                    width: 960px;
                    margin-top: 694px;
                    /* please */
                }
                
                .bottom ul {
                    list-style: none;
                    color: white;
                }
    

    login.css

    * {
        margin: 0;
        padding: 0;
    }
    
    html {
        height: 100%;
    }
    
    body {
        height: 100%;
        background: #fff url(../img/example1.jpg) 50% 50% no-repeat;
        background-size: cover;
    }
    
    .dowebok {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 430px;
        height: 550px;
        margin: -300px 0 0 -215px;
        border: 1px solid #fff;
        border-radius: 20px;
        overflow: hidden;
    }
    
    .logo {
        width: 200px;
        height: 100px;
        margin-top: 130px;
        margin-bottom: 70px;
        margin-left: 130px;
        background: url(../img/logo-public.png) 0 0 no-repeat;
    }
    
    .form-item {
        position: relative;
        width: 360px;
        margin: 0 auto;
        padding-bottom: 30px;
    }
    
    .form-item input {
        width: 288px;
        height: 48px;
        padding-left: 70px;
        border: 1px solid #fff;
        border-radius: 25px;
        font-size: 18px;
        color: #fff;
        background-color: transparent;
        outline: none;
    }
    
    .form-item button {
        width: 360px;
        height: 50px;
        border: 0;
        border-radius: 25px;
        font-size: 18px;
        color: #1f6f4a;
        outline: none;
        cursor: pointer;
        background-color: #fff;
    }
    
    .tip {
        display: none;
        position: absolute;
        left: 20px;
        top: 52px;
        font-size: 14px;
        color: #f50;
    }
    
    .reg-bar {
        width: 360px;
        margin: 20px auto 0;
        font-size: 14px;
        overflow: hidden;
    }
    
    .reg-bar a {
        color: #fff;
        text-decoration: none;
    }
    
    .reg-bar a:hover {
        text-decoration: underline;
    }
    
    .reg-bar .reg {
        float: left;
    }
    
    .reg-bar .forget {
        float: right;
    }
    
    .dowebok ::-webkit-input-placeholder {
        font-size: 18px;
        line-height: 1.4;
        color: #fff;
    }
    
    .dowebok :-moz-placeholder {
        font-size: 18px;
        line-height: 1.4;
        color: #fff;
    }
    
    .dowebok ::-moz-placeholder {
        font-size: 18px;
        line-height: 1.4;
        color: #fff;
    }
    
    .dowebok :-ms-input-placeholder {
        font-size: 18px;
        line-height: 1.4;
        color: #fff;
    }
    
    @media screen and (max-width: 500px) {
        * {
            box-sizing: border-box;
        }
        .dowebok {
            position: static;
            width: auto;
            height: auto;
            margin: 0 30px;
            border: 0;
            border-radius: 0;
        }
        .logo {
            margin: 50px auto;
        }
        .form-item {
            width: auto;
        }
        .form-item input,
        .form-item button,
        .reg-bar {
            width: 100%;
        }
    }
    

    swithpic.js

     /* switchpic.js */
     var CurScreen = 1;
     var MaxScreen = 7;
     var timer = null;
    
     function $(id) { return document.getElementById(id); }
    
     function switchPic() {
         if (CurScreen == MaxScreen) { CurScreen = 1; } else { CurScreen++; }
         $("pic").src = "img/example" + CurScreen + ".jpg";
     }
    
     function reStart() {
         switchPic();
         init();
     }
    
     function pause() {
         clearInterval(timer);
     }
    
     function init() {
         timer = setInterval('switchPic();', 1000);
     }
    

    完整代码素材下载

    完整代码已经上传至我个人的csdn资源中
    可以进入我的个人csdn进行下载期末大作业 我的web.rar文件
    下载链接:期末大作业 我的web.rar

    展开全文
  • Web前端开发技术期末大作业,有些地方需要改动请自行修改
  • web前端开发技术期末大作业 网页规划与制造,做得不深 但是还是满足期末大作业的 分享一下 题目: 此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术(如结合...

    web前端开发技术期末大作业 网页规划与制造,做得不深 但是还是满足期末大作业的 分享一下
    在这里插入图片描述

    题目:
    此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术(如结合使用CSS及表格、DIV、框架等技术),完成各页面的布局设计。

    工具:
    EditPlus

    一、所需文件

    在这里插入图片描述

    二、网页效果(模仿游戏官网)

    A.首页效果
    在这里插入图片描述

    B.游戏攻略
    在这里插入图片描述

    C.手办商城
    在这里插入图片描述
    上面就是网站的部分效果,其他就不贴出来了哈哈哈,仅作分享

    三、主要代码

    首页HTML

    <!DOCTYPE html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>主页</title>
       <link rel="stylesheet" href="css/index.css">
       <script src="js/index.js" charset="gb2312"></script>
     </head>
     <body>
     <embed src="audios/attack.mp3" width=0 height=0 type=audio/mpeg loop="-1" autostart="true" volume="0"></embed>			<!-- 音乐 -->
     <div id="container">				<!-- 大框 -->
    	<div id="header">			<!-- 1 头部-->
    		<div id="logo"></div>		<!-- 1左  logo -->
    		<div id="select_search">	<!-- 1右  搜索-->
    			<table height="80px" align="right" >
    				<tr align="right">
    					<td colspan="4">
    						<select id="sel">
    							<option selected>简体中文</option>
    							<option >繁体中文</option>
    							<option >English</option>
    						</select>
    					</td>
    				</tr>
    				<tr align="right">
    					<td><font size="2">关键词:</font></td>
    					<td><input type="text" size="25"></td>
    					<td><input type="image" src="images/搜索.png"></td>
    				</tr>
    			</table>
    		</div>
    		
    	</div>
    	<div id="nav">		<!-- 2  导航栏-->
    		<table>
    			<td id="line.png"><a href="index.html">首页</a></td>
    			<td id="line.png"><a href="game_introduction.html">游戏介绍</a></td>
    			<td id="line.png"><a href="game_tips.html">游戏攻略</a></td>
    			<td id="line.png"><a href="toy.html">手办商城</a></td>
    			<td id="line.png"><a href="survey.html">问卷调查</a></td>
    			<td id="line.png"><a href="join.html">加入我们</a></td>
    			
    		</table>
    	</div>
    	<div id="bao">		<!-- 3  图片轮播-->
    		<div id="photo">
    			<img src="images/a.png" >
    			<img src="images/b.png" >
    			<img src="images/c.png" >
    			<img src="images/e.png" >
    			<img src="images/f.png" >
    		</div>
    	</div >
    	<div id="main">		<!-- 4  左中右-->
    		<div id="left">		<!--  4左   咨询-->
    			<img src="images/游戏资料.png" width="262ox" height="50px">
    			<ul>
    				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=518558">打野位置能拿MVP的不传之秘!<a>&nbsp;2021-05-09</li>
    				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=519143">新版梦奇铭文出装玩法全解析<a>&nbsp;2021-05-09</li>
    				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=519427">如何理解斩杀线与控血概念?<a>&nbsp;2021-05-09</li>
    				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_Biz=18&tid=512793">李白刮痧,操作太难,试试兰陵王<a>&nbsp;2021-05-09</li>
    				<li><a href="https://pvp.qq.com/v/detail.shtml?G_Biz=18&tid=719852&e_code=pvpweb.dpvlist.r4">“红烧流”庄周<a>&nbsp;2021-05-09</li>
    				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_Biz=18&tid=362130">你强任你强,墨子东皇加张良<a>&nbsp;2021-05-09</li>
    			</ul>
    		</div>
    		<div id="center">	<!-- 4中  图片滚动-->
    			<marquee onmouseover="this.stop()" onmouseout="this.start()">
    				<img src="images/滚1.png" border="0" width="400px" height="230px">
    				<img src="images/滚2.jpg" border="0" width="400px" height="230px">
    				<img src="images/滚3.jpg" border="0" width="400px" height="230px">
    				<img src="images/滚4.jpg" border="0" width="400px" height="230px">
    				<img src="images/滚5.png" border="0" width="400px" height="230px">
    			</marquee>
    		</div>
    		<div id="right">		<!-- 4右 登录-->
    			<img id="ri" src="images/欢迎登录.png" width="250" height="50px"><br/>
    			<form action="" id="fo">
    				<table align="center" class="register">
    					<tr>
    						<td>用户名</td>
    						<td><input type="text" id="user01" maxlength="11" placeholder="请输入您的用户名" required/></td>
    						<td ><input type="submit" value="登录"></td>
    					</tr>
    
    					<tr id="fot">
    						<td>密码</td>
    						<td><input type="password" id="password01" maxlength="16" placeholder="请输入密码......" required/></td>	<td><input  type="reset"></td>
    					</tr>
    				</table>
    			</form> 
    			<div class="wjmmzczh">
    				<a href="#" >忘记密码</a>
    				<a href="#" id="zc">注册账号</a>
    			</div>
    		</div>
    	</div>	
    	<div id="comment">		<!-- 5 留言区-->
    		<h2 >留言板</h2>
    		<hr size="2px" color="#b5b5b5" width="990px" align="left">
    		<form>
    			<table align="center">
    				<tr>
    					<td>用户名:</td>
    					<td><input type="text"/></td>
    					<td>Wechat:</td>
    					<td><input type="text"/></td>
    					<td>留言时间:</td>
    					<td><input type="text"/></td>
    				</tr>
    				<tr>
    					<td >留言内容:</td>
    					<td colspan="5"><textarea id="txt" cols="100" rows="3" placeholder="评论的时候,请遵纪守法并注意语言文明"></textarea></td>
                  
    				</tr>
    
    				<tr >
    					<td colspan="2"><input type="submit" value="提交留言"></th>
    					<td colspan="2"><input type="reset" value="重置内容"></th>
    				</tr>
    			</table>
    		</form>
    	</div>
    
    	<div id="footer" >		<!-- 6 版权区-->
    		<p class="p1">Copyright&nbsp;&copy;&nbsp;2021&nbsp;<span>i&nbsp;an</span>,All&nbsp;rights&nbsp;reserved.</p>
    		<p class="p2">2021,版权所有&nbsp;&nbsp;85CP备13385453</p>
    	</div>
     </div>
      
     </body>
    </html>
    
    

    首页CSS

    /*index.css*/
    *{
    	
    	font-family:楷体; /*全文字体*/
    }
    #container{
    	margin:0 auto;			/*   内外边距去除,字体大小为12px */
    	padding:0 auto;font-size:12px;
    }
    #header{			/*1 头部*/
    	width:990px;
    	height:80px;
    }
    #logo{	/*  1左上 logo */
    	width:300px;
    	height:80px;
    	float:left;
    	background:#FFFFFF url("../images/王者荣耀logo.png") no-repeat left bottom;
    	
    }
    #select_search{			/*	 1右	  搜索*/
    	width:690px;
    	height:80px;
    	font-size:20px
    	background:#FFFFFF;
    	float:left;
    }
    #nav{				/*		2  导航栏  */
    	clear:both;
    	width:990px;
    	height:40px;
    	font-size:18px;
    	background-image:url("../images/导航背景.png")
    }
    #nav a:hover{
    	color:#Bf0000;
    	text-decoration:none;
    }
    #nav td{
    	width:165px;
    	height:40px;
    	text-align:center;
    	vertical-align:middle; 
    }
    table{
    	line-height:1.5em
    }
    #bao{					/*  3图片轮播  */
    	width: 990px;
    	height: 500px;
    	overflow: hidden;
    }
    #photo {			
    	width: 5940px;
    	animation: switch 15s ease-out infinite;
    }
    #photo > img {
    	float: left;
    	width: 990px;
    	height: 500px;
    }
    @keyframes switch {
    	0%, 5% {
    		margin-left: 0;
    	}
    	20%, 30% {
    		margin-left: -990px;
    	}
    	40%, 55% {
    		margin-left: -1980px;
    	}
    	60%, 75% {
    		margin-left: -2970px;
    	}
    	85%, 100% {
    		margin-left: -3960px;
    	}
    }
    
    #main{				/* 4   */
    	width:990px;
    	height:230px;
    	border-bottom:5px ridge #DEDEDE;
    	float:left;
    	clear:both
    }
    #left{		/*4左*/
    	width:260px;
    	height:230px;
    	background:#EEFFDD;
    	float:left;
    	background-image:url("../images/left背景.png")
    	/*border-right:10px solid #FFFFFF*/
    }
    a:link,a:visited,a:active{
    	text-decoration:none;
    }
    a:link,a:visited,a:active{
    	color:#828282;
    }
    ul{
    	list-style:none;
    	padding-left:10px;
    	line-height:1.8em
    }
    #left li{
    	border-bottom:1px dotted #009900;
    }
    #left a:hover{
    	color:#Bf0000;
    	text-decoration:underline
    }
    #center{		/*4中*/
    	width:480px;
    	height:230px;
    	float:left;
    	/*border-right:5px solid #FFFFFF;*/
    	background-image:url("../images/滚底.png")
    }
    #right{		/*4右  登录部分*/
    	width:250px;
    	height:230px;
    	background:#EEFFDD;
    	float:left;
    	background-image:url("../images/right背景.png")
    }
    .register{
    	flex: 40%;
    	padding-top: 20px; 
    }
    .wjmmzczh{
    	padding-left: 50px;
    	padding-top: 20px;
    }
    #zczh{
    	padding-left: 50px;
    }
    #biaodan{
    	padding-top: 20px;
    }
    h2{
    	font-size:30px;
    	font-family:宋体;
    	font-style:bolder;
    	color:#ffff00;
    	margin:0
    }
    #comment{		/*5  评论区*/
    	clear:both;
    	width:990px;
    	height:210px;
    	background-image:url("../images/留言底.jpg");
    	float:left
    }
    input{ 
    	vertical-align: middle;
    } /*垂直居中*/
    #footer{			/*6 尾部*/
    	clear:both;
    	width:990px;
    	height: 60px;
    	background: #330033;
    	text-align: center;
    	line-height: 10px;
    	float:left
    }
    #footer p{ 
    	color: #ffff00;
    	font-size: 15px;
    	opacity: 0.7; 
    }
    .p1{ 
    	margin: 0;
    	padding: 15px 0 5px 0;
    }
    .p2{ 
    	margin: 0;
    	padding: 5px 0;
    }
    #footer span{
    	color: #aaffff;
    }
    
    

    首页JS

    window.onload=function(){
        if(document.getElementById("fo") != null){
            document.getElementById("fo").onsubmit=function(){
                var yhm = document.getElementById("user01");
                var mm = document.getElementById("password01");
    
                if(!(/^1\d{10}$/.test(yhm.value))){          /*用正则表达式,检查输入的用户名格式是否为以1开头的11位数*/
                    alert("输入用户名格式错误,请重新输入以1开头的11位数用户名!");
                    return false;
                }
    
                if (mm.value != 12345) {
                    alert("密码输入错误,请重新输入!");
                    return false;
                }
               /* return ture;*/
            }
        }
    }
    
    
    
    

    在这里插入图片描述

    做得不太好,请多多包涵菜鸟,球球了,
    图片素材来自网络,侵删

    要源码,三连蟹蟹

    要源码,三连蟹蟹

    要源码,三连蟹蟹

    展开全文
  • 大一上金老师的前端开发技术做的大作业就是阴阳师主题了,大三的WEB开发还是阴阳师主题,真是不忘初心呢(虽然已经把阴阳师卸掉了) 开发环境 Eclipse jee 2019-12+Tomcat 9.0+MySQL 文件目录 看着很多,其实...


    拖了好久终于想起来把WEB的期末作业传上来,系统里面的所有图片素材都来自于阴阳师官网
    大一上金老师的前端开发技术做的大作业就是阴阳师主题了,大三的WEB开发还是阴阳师主题,真是不忘初心呢(虽然已经把阴阳师卸掉了)


    开发环境

    Eclipse jee 2019-12+Tomcat 9.0+MySQL
    其中JDK为1.8.0_241版本

    文件目录

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    看着很多,其实名字读起来很通顺的那些就是角色的名字,不占地儿。

    数据库

    先来讲讲数据库好了。总共有5个表。
    y_character就是放角色的一些信息,比如说拼音、稀有度、觉醒前的照片(后来发现觉醒前的照片可以直接用拼音+.png来引用,所以这个等于白写)等等;
    在这里插入图片描述
    y_news放新闻的标题、新闻的摘要和新闻的发布时间。
    在这里插入图片描述
    y_product是购物商城里的一些商品,包括商品的名字、价格和评论。
    在这里插入图片描述
    y_user这是用户登陆注册的用户名、密码、性别和生日等等。
    在这里插入图片描述
    y_mycart本来是想写购物车功能的,但是没时间写555.
    在这里插入图片描述

    网页展示

    在浏览器地址栏输入localhost:8080/yys/Index进入网页。
    首先是一个轮播图,有四张图片轮流播的这种效果,左下角是一个看板娘(因为可爱所以加进来的),金老师还说之前在博客上查资料就是这个小玩意挡着字了哈哈哈哈哈哈。
    在这里插入图片描述
    然后就是四个功能的入口了,日文翻译不标准的话也不要骂我是机翻的:>
    这四张图片倒是我自己设计的,但是素材依来自阴阳师官网(阴阳师不要告我拜托拜托)
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    对了右边的茨球点击一下是可以返回顶部的。
    先来注册一下好啦。
    在这里插入图片描述
    这个是注册页面
    在这里插入图片描述

    如果验证码错误的话是会显示验证码错误的
    在这里插入图片描述
    注册成功后就会显示成功注册了。
    在这里插入图片描述
    点击去登录就跳转到登录页面。
    在这里插入图片描述
    登录成功之后就会跳转到首页,其中导航栏会显示用户名。
    在这里插入图片描述
    然后来看看抽卡部分。
    在这里插入图片描述
    点击抽卡之后,会出来一个旋转的魔法阵
    在这里插入图片描述
    就会跳转到随机的式神页面上
    在这里插入图片描述
    再抽一张
    在这里插入图片描述
    再抽一张
    在这里插入图片描述

    点击就可以跳转到详细的式神介绍页面。
    点击导航栏上的式神录就跳转到式神录的页面上。
    在这里插入图片描述
    总共十个式神,其中3个SSR,4个SR,3个R,稀有度的出率大大提升。
    点击一个不知火。
    在这里插入图片描述
    点击一下觉醒或者皮肤按钮就有不同的立绘。
    在这里插入图片描述下面是不知火的传记或者情报啥的。
    在这里插入图片描述
    可以看看可爱的山兔的多种皮肤。
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    山兔的传记!
    在这里插入图片描述

    山兔的情报。
    在这里插入图片描述

    然后是商城。令人遗憾的是没做购物车的功能。
    在这里插入图片描述
    然后是新闻资讯。
    在这里插入图片描述
    然后就是一条联名的资讯。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    项目说明书

    详细功能说明

    在这里插入图片描述

    2.1.1. 注册子模块

    1. 用户进入阴阳师游戏系统后需要进行注册才能访问其他子模块;
    2. 在注册子模块中,用户需要输入用户ID、用户密码、用户生日、用户性别等基本信息;
    3. 在信息填写完毕后需要进行验证码验证;
    4. 当验证错误时,系统会提示是用户名或密码不合法还是验证码错误;
    5. 用户注册成功后跳转到注册成功页面提示进行下一步操作。

    2.1.2. 登录子模块

    1. 用户在登录子模块上需要输入用户ID和用户密码进行登录;
    2. 系统会结合验证码来提高安全系数;
    3. 当验证错误时,系统会提示是用户名或密码错误或者验证码错误;
    4. 用户登录后,跳转到首页,并且导航条中显示用户的ID名称。

    2.1.3. 抽卡子模块

    1. 用户可以点击抽卡页面上的抽卡按钮,此时会产生一个随机数,并和数据库y_character中的式神名称、式神拼音、式神等级等属性一起存储到会话中。
    2. 在属性存储到会话的过程中,会有一个魔法阵转动的等待效果;
    3. 魔法阵转动结束后会跳转到抽卡结果页面,而这个页面会读取会话中的属性用来引用式神图片、式神等级和文字。
    4. 页面会有一个按钮可以跳转到对应式神的介绍页面,让玩家对抽到的式神有更多的了解。

    2.1.4. 式神录子模块

    1. 在式神录模块中,会先显示式神的头像和名字;
    2. 用户点击式神的链接后会跳转到相应的式神介绍页面,在这个页面里有式神的在初始、觉醒、皮肤三个时期的不同状态图片,还有式神的传记文字,以及式神的战斗参数供玩家参考;

    2.1.5. 商城子模块

    1. 商城子模块一个有六种周边产品的界面,用户可以查看产品的信息,因为没有做完整个购买流程就不详细介绍了。

    2.1.6. 资讯子模块

    1. 在资讯子模块,用户可以看到阴阳师游戏系统的第一手消息,如系统更新、庆典活动等;
    2. 资讯子模块的列表采用了<c:forEach>标签,节省了复制相同页面并修改的时间。

    设计环境

    Eclipse jee 2019-12,photoshop,MySQL,Navicat Premium,Chrome,Visio,Tomcat 9.0, HelloFont等

    数据库设计

    数据库名称: yys
    本数据库共5张表,如下所示
    y_user:用户信息表
    y_character:式神信息表
    y_product:周边产品信息表
    y_mycart:购物车信息表
    y_news:新闻资讯信息表
    具体表结构及说明如下:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    使用的前端框架

    bootstrap v4,jquery v3

    JSP页面的说明

    在这里插入图片描述
    在这里插入图片描述

    心得体会

    这次大作业做的很艰难,一边是因为上课的时候没听太懂,对了想给老师提个建议,老师下次可以一边讲课一边开一下钉钉直播,如果课上没跟上的话还可以课下看看视频补回去,这样能更好理解。还有一个问题就是因为eclipse实在是太难用了,真的好奇怪,img文件夹里放的图片越多eclipse就越容易闪退,闪退就占了好长的时间。还有一个方面是Servlet有时候不能把别的复制一下再修改,不然不能往后台发送消息,我卡在这个地方很久,实在没办法才新建一个Servlet自己写,这样才能发送消息,下次应该试试IDEA。再就是我发现ajax的post方法下不能执行目标Servlet下的转发操作,后来就想到把数据传进session里进行共享,再用另一个servlet进行获取和转发。看起来很简单,但是卡我卡了很久,写的也很烦躁,不过还好坚持下去,用eclipse真的磨练意志。
    还有很多的时间花在了设计图片上,有些图片是我从阴阳师官网上扒下来,自己去做图片,虽然没有什么艺术细胞但是还是在设计上花了好多时间,感觉还挺充实的。


    github指路

    指路:https://github.com/skeptical5/yys/tree/master
    另外如果项目导入eclipse报错的话,可以参考一下@DistressRroke _chen的博客,之前导入老师的代码报错也用这个方法解决了,指路:https://blog.csdn.net/cms18374672699/article/details/83045754


    WEB大作业大概就是这样,感谢马哥在元旦开始就督促我写WEB,拖延症确实需要一个严厉的陪读嘎嘎嘎嘎,答完辩之后就去西湖玩了圈,那边真的好好玩哦。然后第二天去了趟灵隐寺嘿嘿。

    展开全文
  • ---------------- 2020/12/30更新以下点 由于H5期末大作业要求,需要有一个首页,八个子页,所有在其原有基础上增添了三页新的内容 性能优化: 由于该网页图片过多,已对网页中所有img标签的图片进行了图片懒加载,...
  • 一、实验(实训)概述: 【整体网页设计】 网站基本规划: 1、面页13左右; ... ...【基本原理】 ...【实施环境】(使用软件) HBuilder X Chrome ...【实验(实训)过程】(步骤、记录、数据、程序等) ...一....
  • 网站前端程序不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。 为此,本次作业的要求主要有: (1)登录功能。登陆是对用户的验证,防止非法用户登陆和使用。 (2...
  • Web前端开发 客观题 编程题 概论 单元测试1 HTML基础 单元测试2 单元作业1 CSS样式 单元测试3 单元作业2 CSS布局与定位 单元测试4 单元作业3 CSS3 单元测试5 JavaScript基础 单元测试6 单元作业4 ...
  • web学习阶段总结(3)大作业小结

    千次阅读 2017-06-06 21:46:43
    期末大作业选择的题目是: 做一个使用Video API的页面程序,要求内容是有关在线视频播放的,video必须是自己录制的。 因为考虑到作业的实用性,我把它完善为一个简单的网站,使用到的技术有: 应用部署:ngnix + ...
  • web前端html+css+js仿京东商城/天猫/电商平台❤功能齐全(大学毕业设计论文) 仿京东/天猫/苏苏/鞋服商城/服装商城/古装商城/商城首页/商城html/商城模板/商城购物/中文电商/商城html/整套商城/b2c模板/ 商城整站html...
  • 针对Web期末大作业所需要的前端模板,用的是easyUI框架,里面具有图表、日历等多功能显示,跟大学生期末项目契合度比较高。希望能够帮助到这些学生,也希望大家能够多多支持!
  • HourseRentSystem.sln

    2020-07-17 17:49:50
    c# web应用开发,sql2002 简单的期末大作业,用于解决燃眉之急,最为合适,前端后端结合,可以当成一个小项目
  • Bootstrap初学笔记

    2019-12-03 22:19:56
    Bootstrap,来自 Twitter,是目前最受...所以为了最近的期末大作业,学习记录一下 Bootstrap 框架的学习。 同时直接用的bootstrap的链接文档,所以不需要下载包也能使用. bootstrap官网:https://getbootstrap....

空空如也

空空如也

1 2
收藏数 30
精华内容 12
关键字:

web前端期末大作业