html第二次作业

最新推荐文章于 2024-07-19 12:48:19 发布

丶柊丶

最新推荐文章于 2024-07-19 12:48:19 发布

阅读量203

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/2401_83911548/article/details/139507580

版权

1.游戏导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏导航栏</title>
    <style>
        div{
            /* 背景处理 */
            width: 1000px;
            height: 35px;
            margin: auto;

            background-color:rgba(18, 7, 78, 0.94);
            border-radius: 10px;
            box-shadow: 0px 5px 5px rgb(152, 150, 156);
           
            /* 字体居中 */
            text-align: center;
           
        }
        
        li,a{
            /* 列表处理 */
            display: inline-block;
            list-style-type: none;
            
            /* 字体处理 */
            line-height:2.2;
            text-shadow: 5px 5px 5px rgb(195, 188, 188);
            text-decoration:none;
            color: white;
            font-weight:bolder;
        }
       
        li:hover{
            /* 光标悬浮 */
            background-color:red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a href="">游戏1</a></li>
            <li><a href="">游戏2</a></li>
            <li><a href="">游戏3</a></li>
            <li><a href="">游戏4</a></li>
            <li><a href="">游戏5</a></li>
            <li><a href="">游戏6</a></li>
            <li><a href="">游戏7</a></li>
            <li><a href="">游戏8</a></li>
            <li><a href="">游戏9</a></li>
        </ul>
    </div>
</body>
</html>

运行截图

2.仿写3个页面

（1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务系统仿写1</title>
    <style>
        *{
            margin: 0px;
            font-family: "楷体";
            font-size: 20px;
            color: rgba(0, 0, 0, 0.449);
        }

        .whole{
            height: 446px;
            background: url(../../../资源图片/tpbg.gif);
        }

        .inside{
            width: 995px;
        }

        /* 顶部 */
        .top{
            height: 150px;
            padding-left: 85px;
        }

        .top>img{
            height: 80px;
            width: 600px;
 
        }

        /* 内容 */
        .container{
            height: 296px;
            width: 955px;
            position: relative;
            left: 100px;
            background: url(../../../资源图片/bgtp.gif) no-repeat;

        }

        .dl{
            width: 312px;
            height: 230px;
            position: absolute;
            right: 30px;
            top: 100px;
        }

        .dltitle{
            position: absolute;
            top:2px;
            color: black;
            font-size: 30px;
        }

        .dldl{
            line-height: 2;
            position: absolute;
            top: 70px;
        }

        .dltj{
            position: absolute;
            top:148px;
            left: 250px;
        }

        /* 底部 */
        .end{
            width: 900px;
            font-size: 17px;
            
            position: absolute;
            top: 300px;
            left: 50px;
        }

        .end>span{
            float: right;
        }

      
    </style>
</head>
<body>
    <form action="../../00_作业/1.2第二次作业/1.2.4教务系统仿写2.html">
        <div class="whole">
            <div class="inside">
                <!-- 顶部 -->
                <div class="top"><img style="padding: 80px;"  src="../../../资源图片/lsw.png" " ></div>
                <!-- 内容 -->
                <div class="container">
                    <div class="dl">
                            <div class="dltitle">用户登录</div>
                            <div class="dldl">用户名；<input type="username" name="username"><br>
                                密&nbsp;&nbsp;码；<input type="password" name="password" >
                                </div>
                            <div class="dltj"><input type="submit" class="dlua" title="点击登录" value="" style="background: url(../../../图标库/登录.gif) no-repeat ;width: 45px;height: 45px;border: 0px;margin-left: 10px; "></div>
                    </div>
                    <!-- 底部 -->
                    <div class="end">湖南xx有限公司 版权所有
                        <span>
                            <a href="">隐私声明</a> |
                            <a href="">设为首页</a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </form>
    
   
</body>
</html>

运行截图

（2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务系统仿写2</title>
    <style>
        /* 全局 */
        *{
            color:darkgray;
            font-family: "楷体";
            margin: 0px;
        }

        div{
            
            /* border: 1px solid red; */
        }
        /* 顶部栏 */
        .top2 li{
            display: inline-block;
            list-style-type: none;
        }

        .topa{
            height: 75px;
            position: relative;
        }

        .top1{
            position: absolute;
            left: 200px;
        }

        .top21{
            position: absolute;
            display: inline-block; 
        }

        .top2{
            float: right;
            
        }

        .top2>div{
            position: absolute;
            right: 250px;
        }

        .top2>ul{
            position: absolute;
            right: 100px;
        }
        
        /* 导航栏 */
        .navigation2{
            height:30px;
            background:rgb(32, 83, 201);
        }

        .navigation2 li{
            
            margin-left: 150px;
            
            display: inline-block;
        }

        .navigation2 a{
            color: #ffffff;
            font-size: 22px;
            text-decoration: none;
        }

        .navigation2 li:hover{
            height:30px;
            background-color: red;
        }

        /* 内容 */
        .container{
            padding-top: 20px;
            margin:auto;
            height: 450px;
        }

        .container div{
            color: white;
        }

        .container1{background: rgb(32, 83, 201);width: 265px;height: 287px;position: absolute;left: 200px;top: 134px;}
        .container2{background: #4FB5C7;width: 153px;height: 287px;position: absolute;left: 480px;top: 134px;}
        .container3{background: #1978D8;width: 173px;height: 141px;position: absolute;left: 650px;top: 134px;}
        .container4{background: #90A8E3;width: 173px;height: 141px;position: absolute;left: 650px;top: 280px;}
        .container5{background: #DB6987;width: 304px;height: 141px;position: absolute;right: 390px;top: 134px;}
        .container6{background: #8E7AAA;width: 304px;height: 141px;position: absolute;right: 390px;top: 280px;}
        .container7{background: #187D9A;width: 130px;height: 138px;position: absolute;left: 200px;bottom: 150px;}
        .container8{background: #A0CF41;width: 130px;height: 138px;position: absolute;left: 335px;bottom: 150px;}
        .container9{background: #EAAF76;width: 153px;height: 138px;position: absolute;left: 480px;bottom: 150px;}
        .container10{background: #88BAD9;width: 173px;height: 138px;position: absolute;left: 650px;;bottom: 150px;}
        .container11{background: #B69CCC;width: 149px;height: 138px;position: absolute;right: 545px;bottom: 150px;}
        .container12{background: #00d0ff;width: 149px;height: 138px;position: absolute;right: 390px;bottom: 150px;}

        .container1a{
            position: absolute;
            top: 130px;
            left: 100px;
        }

        .container1b{
            position: absolute;
            top: 200px;
            left: 100px;
        }
        
        .container2a{
            position: absolute;
            top: 100px;
            left:50px;
        }

        .container2b{
            position: absolute;
            top: 200px;
            left: 50px;
        }

        .container3a,.container4a{
            position: absolute;
            top: 25px;
            left:50px;
        }

        .container3b,.container4b{
            position: absolute;
            top: 100px;
            left: 53px;
        }
        
        .container5b,.container6b{
            position: absolute;
            top: 80px;
        }

        .container7a,.container8a,.container9a,.container10a,.container11a,.container12a{
            position: absolute;
            top: 20px;
            left: 30px;
        }

        .container7b,.container9b,.container10b{
            position: absolute;
            bottom: 15px;
            left: 16px;
        }

        .container8b,.container11b,.container12b{
            position: absolute;
            bottom: 15px;
            left: 30px;
        }

        /* 底部 */
        
        .foot{
            margin-top: 10px;
            border-top: solid 1px #acc2e9;
        }

        .foota{
            height: 45px;
            line-height: 30px;
            font-size: 16px;
            color: #666;
            clear: both;
            text-align: center;
        }
       
    </style>
</head>
<body>
    <!-- 顶部栏 -->
    <div class="top">
        <div class="topa">
            <div class="top1"><img src="../../../资源图片/swxy_logo.gif"></div>
            <div class="top2">
                <!-- <div class="top21">xxx(学号) </div> -->
                <ul>
                    <li><a href="">账户</a></li>
                    <li><a href="">主题</a></li>
                    <li><a href="">设置</a></li>
                    <li><a href="">退出</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="navigation">
        <div class="navigation1">
            <div class="navigation2">
                <ul>
                    <li title="我的桌面"><a href="">我的桌面</a></li>
                    <li title="学籍成绩"><a href="../1.2第二次作业/1.2.5教务系统仿写3.html">学籍成绩</a></li>
                    <li title="培养管理"><a href="">培养管理</a></li>
                    <li title="考试报名"><a href="">考试报名</a></li>
                    <li title="教学评价"><a href="">教学评价</a></li>
                </ul>
            </div>
            
        </div>
    </div>
    <!-- 内容 -->
    <div class="container">
        <div class="container1">
                <div class="container1a"><img src="../../../图标库/tp1.png" width="72px" height="64px"></div>
                <div class="container1b">个人中心</div>
        </div>
        <a href=""><div class="container2">
                <div class="container2a"><img src="../../../图标库/tp2.png" width="72px" height="64px"></div>
                <div class="container2b">选课中心</div>
        </div>
        </a>
        <a href="">
            <div class="container3">
                <div class="container3a"><img src="../../../图标库/tp3.png" width="72px" height="64px"></div>
                <div class="container3b">学生评教</div>
            </div>
        </a>
        <a href="">
            <div class="container4">
                <div class="container4a"><img src="../../../图标库/tp4.png" width="72px" height="64px"></div>
                <div class="container4b">培养方案</div>
            </div>
        </a>
        <a href="">
            <div class="container5">
                <div class="containe5a"><img src="../../../图标库/tp5.png" width="72px" height="64px"></div>
                <div class="container5b">已收留言</div>
            </div>
        </a>
        <a href="">
            <div class="container6">
                <div class="container6a"><img src="../../../图标库/tp6.png" width="72px" height="64px"></div>
                <div class="container6b">已收公告</div>
            </div>
        </a>
        <a href="">
            <div class="container7">
                <div class="container7a"><img src="../../../图标库/tp7.png" width="72px" height="64px"></div>
                <div class="container7b">课程成绩查询</div>
            </div>
        </a>
        <a href="">
            <div class="container8">
                <div class="container8a"><img src="../../../图标库/tp8.png" width="72px" height="64px"></div>
                <div class="container8b">教学周历</div>
            </div>
        </a>
        <a href="">
            <div class="container9">
                <div class="container9a"><img src="../../../图标库/tp9.png" width="72px" height="64px"></div>
                <div class="container9b">授课计划查询</div>
            </div>
        </a>
        <a href="">
            <div class="container10">
                <div class="container10a"><img src="../../../图标库/tp10.png" width="72px" height="64px"></div>
                <div class="container10b">未获得学分成绩查询</div>
            </div>
         </a>
        <a href="">
            <div class="container11">
                <div class="container11a"><img src="../../../图标库/tp11.png" width="72px" height="64px"></div>
                <div class="container11b">学籍卡片</div>
            </div>
        </a>
        <a href="">
            <div class="container12">
                <div class="container12a"><img src="../../../图标库/tp12.png" width="72px" height="64px"></div>
                <div class="container12b">修改密码</div>
            </div>
        </a>
    </div>
    <!-- 底部栏 -->
    <div class="foot">
        <div class="foota">
            Copyright (C) 湖南强智科技发展有限公司  All Rights Reserved 湘ICP 备12010071号
        </div>
    </div>
</body>
</html>

运行截图

（3）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务系统反写3</title>
    <style>
        /* 全局 */
        *{
            color:darkgray;
            font-family: "楷体";
            margin: 0px;
        }

        div{
            
            /* border: 1px solid red; */
        }
        /* 顶部栏 */
        .top2 li{
            display: inline-block;
            list-style-type: none;
        }

        .topa{
            height: 75px;
            position: relative;
        }

        .top1{
            position: absolute;
            left: 200px;
        }

        .top21{
            position: absolute;
            display: inline-block; 
        }

        .top2{
            float: right;
            
        }

        .top2>div{
            position: absolute;
            right: 250px;
        }

        .top2>ul{
            position: absolute;
            right: 100px;
        }
        
        /* 导航栏 */
        .navigation2{
            height:30px;
            background:rgb(32, 83, 201);
        }

        .navigation2 li{
            
            margin-left: 150px;
            
            display: inline-block;
        }

        .navigation2 a{
            color: #ffffff;
            font-size: 22px;
            text-decoration: none;
        }

        .navigation2 li:hover{
            height:30px;
            background-color: red;
        }

        /* 侧边栏 */
        .container{
            width: 950px;
            margin: 0 auto;
        }


        .container{
            float: left;
            width: 179px;
            margin-top: 20px;
            margin-left: 100px;
            height: 780px;
        }
        .container21,.h4{
            font-size: 20px;
            font-weight: bold;
            height: 22px;
            line-height: 22px;
            padding-left: 40px;
        }

        li{
            list-style-type:none;
        }

        li:hover{
            background-color: aqua;
        }

        .container1 ul{
            border-bottom: solid 2px #acc2e9;
        }

        .container{
            border-right: solid 2px #acc2e9;
        }

        .container2{
            position: absolute;
            left: 300px;
            top: 125px;
        }

        /* 底部 */
        
        .foot{
            margin-top: 800px;
            border-top: solid 1px #acc2e9;
        }

        .foota{
            height: 45px;
            line-height: 30px;
            font-size: 16px;
            color: #666;
            clear: both;
            text-align: center;
        }
        

       
    </style>
</head>
<body>
    <!-- 顶部 -->
    <div class="top">
        <div class="topa">
            <div class="top1"><img src="../../../资源图片/swxy_logo.gif"></div>
            <div class="top2">
                <!-- <div class="top21">xxx(学号) </div> -->
                <ul>
                    <li><a href="">账户</a></li>
                    <li><a href="">主题</a></li>
                    <li><a href="">设置</a></li>
                    <li><a href="">退出</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="navigation">
        <div class="navigation1">
            <div class="navigation2">
                <ul>
                    <li title="我的桌面"><a href="">我的桌面</a></li>
                    <li title="学籍成绩"><a href="">学籍成绩</a></li>
                    <li title="培养管理"><a href="">培养管理</a></li>
                    <li title="考试报名"><a href="">考试报名</a></li>
                    <li title="教学评价"><a href="">教学评价</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 侧边栏 -->
    <div class="container">
        <div class="container1">
            <h4>学籍管理</h4>
            <ul>
                <li>学籍卡片</li>
                <li>学籍信息管理</li>
                <li>学籍预警查询</li>
            </ul>
            <h4>我的成绩</h4>
            <ul>
                <li>课程成绩查询</li>
            </ul>
        </div>
        <div class="container2">
            <div class="container21"> » 学籍信息 » 学籍信息管理</div>
            <div><input type="button" value="增加" ></div>
            <table>
                <tbody>

                </tbody>
            </table>
            <div></div>
        </div>

    </div>
    <!-- 底部 -->
    <div class="foot">
        <div class="foota">
            Copyright (C) 湖南强智科技发展有限公司  All Rights Reserved 湘ICP 备12010071号
        </div>
    </div>
</body>
</html>

运行截图