第二次作业

作业一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>work</title>
    <style>
        .a{
            width: 650px;
            height: 30px;
            background-color: rgb(28, 28, 70);
            border-radius: 15px;
            box-shadow: 5px 5px 5px grey;
        }
        span{
            color: aliceblue;
            text-shadow: 10px 10px 10px;
        }
        span:hover{
            background-color: rgb(128, 36, 36);
            height: 30px;
            display: inline-block;
            
        }
    </style>
</head>
<body>
    <div class="a">
        <span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>游戏1</span>
        <span>游戏2</span>
        <span>游戏3</span>
        <span>游戏4</span>
        <span>游戏5</span>
        <span>游戏6</span>
        <span>游戏7</span>
        <span>游戏8</span>
        <span>游戏9</span>
    </div>
</body>
</html>

作业二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿淘宝页面---登陆页面</title>
    <style>
        body{
            background-color: rgb(250, 247, 243);
        }
        .a{
            /* border: 1px solid red; */
            height: 100px;
            margin:  0px;
        }
        .a1{
            /* border: 1px solid red; */
            width: 150px;
            height: 100px;
            margin-left: 300px;float: left;
        }
        .a2{
            width: 200px;
            height: 100px;
            margin-left: 900px;
            float: left;
        }
        .b{
            border: 1px solid rgb(252, 252, 252);
            width: 800px;
            height: 400px;
            background-color: rgb(255, 255, 255);
            box-shadow: 4px 4px 4px rgb(226, 220, 220);
            border-radius: 50px;
            margin-left: 500px;
        }
        .b1{
            /* border: 1px solid red; */
            width: 350px;
            height: 300px;
            margin-top: 50px;
            margin-left: 100px;
            border-right: 1px solid rgb(197, 195, 195);
            float: left;
        }
        .b11{
            /* border: 1px solid red; */
            width: 300px;
            height: 50px;
            margin-top: 20px;
            text-align: center;
        }
        .b121{
            width: 250px;
            height: 50px;
            background-color: rgb(238, 236, 236);
            border-radius: 50px;
            border: white;
        }
        .b12{
            /* border: 1px solid red; */
            margin-left: 30px;
        }
        .b122{
            width: 250px;
            height: 50px;
            background-color: rgb(238, 236, 236);
            border-radius: 50px;
            border: white;
            margin-top: 20px;
        }
        .b123{
            width: 250px;
            height: 50px;
            background-image: linear-gradient(to right,rgb(253, 124, 37),rgb(255, 104, 4));
            border-radius: 50px;
            border: white;
            margin-top: 20px;
        }
        .b13{
            color: rgb(187, 185, 185);
        }
        .b14{
            color: rgb(187, 185, 185);
            margin-top: 10px;
            margin-left: 100px;
        }
        .b2{
            /* border: 1px solid red; */
            width: 300px;
            height: 300px;
            margin-top: 50px;
            float: left;
        }
        .b21{
            /* border: 1px solid red; */
            width: 300px;
            height: 50px;
            margin-top: 20px;
            text-align: center;
        }
        .b22{
            margin-left: 55px;
        }
        .b231{
            color: rgb(187, 184, 184);
            float: left;
            margin-left: 70px;
        }
        .b232{
            float: left;
            border-right: 2px solid rgb(160, 157, 157);
            margin-left: 20px;
            color: rgb(255, 123, 0);
        }
        .b233{
            float: left;
            color: rgb(255, 123, 0);
            margin-left: 3px;
        }
        .b234{
            color: rgb(187, 184, 184);
            float: left;
            margin-left: 120px;
        }
    </style>
</head> 
<body>
    <div class="a">
        <div class="a1">
            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01H11jUw1gVppn3YjsM_!!6000000004148-2-tps-480-144.png" alt="" style="width:170px;height:52px;left:0px;top:50px;">
        </div>
        <div class="a2">
            <small>
                <span>网站无障碍</span><br>
                <span>"登陆页面"改进建议</span>
            </small>
        </div>
    </div>
    <div class="b">
        <div class="b1">
            <div class="b11">
                    <b><big><big>密码登录</big></big></b>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <b><big><big>短信登录</big></big></b>
            </div>
            <div class="b12">
                <input type="text" name="text" class="b121" placeholder="   账号名/手机号/有户名">
                <input type="password" name="password" class="b122" placeholder="   请输入登录密码">
                <button class="b123" type="submit" ><b>登录</b></button>
            </div>
            <div class="b13">
                <span><small>免费注册</small></span>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span><small>忘记账号名 忘记密码</small></span>
            </div>
            <div class="b14">
                <span><small>支付宝登陆</small></span>
            </div>
        </div>
        <div class="b2">
            <div class="b21">
                <b><big><big>手机扫码安全登录</big></big></b>
            </div>
            <div class="b22">
                <img src="./二维码.png" alt="">
            </div>
            <div class="b23">
                <div class="b231">
                    <span><small>打开</small></span>
                </div>
                <div class="b232">
                    <span><small>淘宝App&nbsp;</small></span>
                </div>
                <div class="b233">
                    <small>天猫App &nbsp;</small>
                </div>
                <div class="b234">
                    <span><small>扫一扫登录</small></span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

作业三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿淘宝页面</title>
    <style>
        .a{
            height: 100px;
            /* border: 1px solid red; */
        }
        .a1{
            /* border: 1px solid red; */
            width: 260px;
            height: 80px;
            float: left;
        }
        .a2{
            /* border: 1px solid red; */
            width: 1150px;
            height: 100px;
            float: left;
            margin-left: 100px;
        }
        .a21{
            border: 2px solid rgb(247, 72, 8);
            height: 40px;
            border-radius: 5px;
            margin-top: 5px;
        }
        .a211{
            width: 1000px;
            height: 32px;
            border: 0px;
            margin-left: 50px;
            margin-top: 3px;
        }
        .a212{
            background-color: orangered;
            color: aliceblue;
            border: 0px;
            width: 80px;
            height: 38px;
            margin-top: 1px;
            border-radius: 5px;

        }
        .a22{
            margin-left: 30px;
        }
        .b{
            /* border: 1px solid red; */
            height: 1100px;
        }
        .b1{
            height: 500px;
        }
        .b1 > div{
            /* border: 1px solid red; */
            width: 280px;
            height: 500px;
            float: left;
            margin-left: 10px;
            border-radius: 5px;
        }
        .b11:hover{
            border: 1px solid red;
        }
        .b11{
            align-items: center;
        }
        .b112{
            margin-top: 80px;
        }
        .sss{
            color: orangered;
        }
        .b12:hover{
            border: 1px solid red;
        }
        .b13:hover{
            border: 1px solid red;
        }
        .b14:hover{
            border: 1px solid red;
        }
        .b15:hover{
            border: 1px solid red;
        }
        .b16:hover{
            border: 1px solid red;
        }
        .b2{
            margin-top: 10px;
        }
        .b2 > div{
            /* border: 1px solid red; */
            width: 280px;
            height: 500px;
            float: left;
            margin-left: 10px;
            border-radius: 5px;
        }
        .b21:hover{
            border: 1px solid red;
        }
        .b22:hover{
            border: 1px solid red;
        }
        .b23:hover{
            border: 1px solid red;
        }
        .b24:hover{
            border: 1px solid red;
        }
        .b25:hover{
            border: 1px solid red;
        }
        .b26:hover{
            border: 1px solid red;
        }
        .c{
            /* border: 1px solid red; */
            height: 250px;
        }
        .ccc > span{
            color: rgb(145, 145, 145);
        }
        span:hover{
            color: orange;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1">
            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01H11jUw1gVppn3YjsM_!!6000000004148-2-tps-480-144.png" alt="" style="width:240px;height:80px;left:0px;top:50px;">
        </div>
        <div class="a2">
            <div class="a21">
                <input type="text" class="a211" placeholder="手机壳">
                <button type="submit" class="a212">搜索</button>
            </div>
            <div class="a22">
                <span><small>
                    大额神卷 &nbsp;iPhone惊喜卷 &nbsp;进口惊喜卷 &nbsp;家电爆款 &nbsp;3c数码优惠 &nbsp;美味狂欢 &nbsp;女装 &nbsp;货架 &nbsp;空调 &nbsp;手机 &nbsp;笔记本电脑 &nbsp;电脑主机 &nbsp;瓷砖 &nbsp;床 &nbsp;男鞋
                </small></span>
            </div>
        </div>
    </div>
    <div class="b">
        <div class="b1">
            <div class="b11">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                     <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
                </div>
                <div class="b112">
                    <span class="sss"><b><big>¥2.10</big></b></span> 
                    <span><small>9000+人累计付款 浙江</small></span><br>
                    <span class="sss"><small>包邮</small></span><br>
                    <span>魔方百货严选</span>
                </div>
            </div>
            <div class="b12">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b13">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b14">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b15">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b16">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
        </div>
        <div class="b2">
            <div class="b21">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b22">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b23">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b24">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b25">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b26">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
        </div>
    </div>
    <div class="c">
        <div class="c1">
            <p class="ccc">
                <span>阿里巴巴集团</span>
                <b>|</b>
                <span>淘宝网</span>
                <b>|</b>
                <span>天猫</span>
                <b>|</b>
                <span>聚划算</span>
                <b>|</b>
                <span>全球速卖通</span>
                <b>|</b>
                <span>阿里巴巴国际交易市场</span>
                <b>|</b>
                <span>1688</span>
                <b>|</b>
                <span>阿里妈妈</span>
                <b>|</b>
                <span>飞猪</span>
                <b>|</b>
                <span>阿里云计算</span>
                <b>|</b>
                <span>AliOS</span>
                <b>|</b>
                <span>阿里通信</span>
                <b>|</b>
                <span>一淘</span>
                <b>|</b>
                <span>万网</span>
                <b>|</b>
                <span>高德</span>
                <b>|</b>
                <span>UC</span>
                <b>|</b>
                <span>友盟</span>
                <b>|</b>
                <span>阿里安全</span>
                <b>|</b>
                <span>大麦网</span>
                <b>|</b>
                <span>钉钉</span>
                <b>|</b>
                <span>支付宝</span>
                <b>|</b>
                <span>优酷</span>
                <b>|</b>
                <span>土豆</span>
                <b>|</b>
                <span>阿里健康</span>
                <b>|</b>
                <span>阿里影业</span>
                <b>|</b>
                <span>网商银行</span>
                <b>|</b>
                <span>造点新货(众筹)</span>
                <b>|</b>
            </p>
        </div>
        <div class="c2">

        </div>
        <div class="c3">

        </div>
    </div>
</body>
</html>

作业四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿教务系统页面</title>
    <style>
        .a{
            height:70px;
            /* border: 1px solid red; */
        }
        .a1{
            /* border: 1px solid red; */

            margin-left: 300px;
            float: left;
        }
        .a2{
            /* border: 1px solid red; */
            margin-left: 200px;
            float: left;
        }
        .b{
            border: 1px solid cornflowerblue;
            height: 40px;
            background-color: cornflowerblue;
        }
        .b1{
            /* border: 1px solid red; */
            margin-top: 5px;
            color: aliceblue;
            width: 1200px;
            margin-left: 300px;
        }
        .box{
            display: grid;
            margin: auto;
            /* border-bottom: 1px solid cornflowerblue; */
            width: 900px;
            height: 450px;
            margin-top: 20px;
            grid-template-columns: repeat(6,1fr);
            grid-template-rows: repeat(3,1fr);
        }
        .box1{
            /* border: 1px solid red; */
            grid-area: 1/1/3/3;
        }
        .box2{
            /* border: 1px solid red; */
            grid-row: 1/3;
        }
        .box4{
            /* border: 1px solid red; */
            grid-column: 5/7;
        }
        .box6{
            /* border: 1px solid red; */
            grid-column: 5/7;
        }
        .d{
            border-top: 1px solid cornflowerblue;
            margin: auto;
            width: 900px;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1">
            <img src="./教务系统.png" alt="">
        </div>
        <div class="a2">
            <span>姓名(学号)</span>
        </div>
    </div>
    <div class="b">
        <div class="b1">
                    <table width="500px">
            <tr>
                <td>
                    <span>我的桌面</span>
                </td>
                <td>
                    <span>学籍成绩</span>
                </td>
                <td>
                    <span>培养管理</span>
                </td>
                <td>
                    <span>考试报名</span>
                </td>
                <td>
                    <span>教学评价</span>
                </td>
            </tr>
        </table>
        </div>
    </div>
    <div class="box">
        <div class="box1">
            <img src="./1.png" alt="">
        </div>
        <div class="box2">
            <img src="./2.png" alt="">
        </div>
        <div class="box3">
            <img src="./3.png" alt="">
        </div>
        <div class="box4">
            <img src="./4.png" alt="">
        </div>
        <div class="box5">
            <img src="./5.png" alt="">
        </div>
        <div class="box6">
            <img src="./6.png" alt="">
        </div>
        <div class="box7">
            <img src="./7.png" alt="">
        </div>
        <div class="box8">
            <img src="./8.png" alt="">
        </div>
        <div class="box9">
            <img src="./9.png" alt="">
        </div>
        <div class="box10">
            <img src="./10.png" alt="">
        </div>
        <div class="box11">
            <img src="./11.png" alt="">
        </div>
        <div class="box12">
            <img src="./12.png" alt="">
        </div>
    </div>
    <div class="d">
        <span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Copyright (C) 湖南强智科技发展有限公司 All Rights Reserved 湘ICP 备12010071号
        </span>
    </div>
</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值