第二次作业

最新推荐文章于 2025-07-04 15:03:43 发布

原创最新推荐文章于 2025-07-04 15:03:43 发布 · 143 阅读

CC 4.0 BY-SA版权

文章标签：

<!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>
        div{
            width: 900px;
            height: 30px;
            background-color:rgb(10, 10, 71);
            padding-top: 11px;
            margin-top: 50px;
            margin-left: 50px;
            border-radius: 50px;
        }
        .a{
            color: white;
            font-weight:bolder;
            text-shadow: 10px 10px 10px gray;
            text-align: center;
        }
        
            .a::selection{
            background-color:rgb(147, 7, 7);
        }
    </style>
</head>
<body>
    <div class="a">游戏1 &nbsp; 游戏2 &nbsp;  游戏3 &nbsp;  游戏4 &nbsp;  游戏5 &nbsp;  游戏6 &nbsp;  游戏7 &nbsp;  游戏8 &nbsp;  游戏9</div>
</body>
</html>

<!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>
        div{
            width:966px; height: 446px; 
        }

        .head{
           width: 966px;
           height: 150px;
           background-color:white;
        }


        .body{
           width: 966px;
           height: 296px;
           background-color: rgba(3, 3, 3, 0.091);
   
    
        }

       .h1{
            padding-left:75px;
            padding-top: 60px;
        }

        .h2{
            padding-left: 40px;
            padding-top: 20px;
        }

        .dl{
            width: 321px;
            height: 210px;
            float: right;
            margin-top: 50px;
            margin-left: 50px;
        }

        .item1{
            width: 321px;
            height: 25px;
            font-family:"微软雅黑";
            font-size:20px;
            margin-bottom: 20px;
        }

        .item2{
                width: 312px;
                height: 200px;
        }

        input{
            border: none;
        }
        button{
            width: 150px;
            height:30px;
            border: none;
            background-color:#438ce5e9;
            margin-left:110px ;
            color: white;
        }

        .end{
            width: 809px;
            height: 24px;
        }

        .end1{
            width: 400px;
            height: 24px;
            float: left;
            border: none;
            color: #00000036;
        }

        .end2{
            width: 200px;
            height: 24px;
            float: left;
            border: none;
            color: #00000036;
        }
       
     
    
    </style>

        
</head>
<body>
    <form action="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/xsMain.jsp">
        <div>
            <div class="head">
                <img class="h1" src="./屏幕截图 2024-06-02 215705.png" width="517px" height="70px">
                </a></div>
            <div class="body">
                <div class="dl">
                    <div class="item1">用户登录</div>
                    <div class="item2">
                        <table border="0" width="320px" height="176px">
                                
                                           用户名:<input type="text" name="username"><br><br>
                                            密码:<input type="password" name="password"><br>
                                            验证码:<input type="code" name="code" style="width: 50px;"> 
                                            <img class="h2"  src="./屏幕截图 2024-06-03 141757.png " width="45px"  height="25px"><br><br>
                                            <button type="submit" title="点击登陆">登陆</button>

                        </table>
                    </div>
                </div>
                <img class="h2" src="./屏幕截图 2024-06-02 224810.png" width="490px" height="240px">
            </div>
        </div>
        <div class="end">
            <div class="end1">湖南强智科技发展有限公司版权所有</div>
            <div class="end2">在线用户数：5人</div>
        </div>
    </form>
    
   
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿淘宝商品页</title>
    <!-- 
        1. 页面的布局
        2. 控制台查看页面结构(可以自己写)
        3. 逐级向下依次尝试编写样式，不知道的就查看源代码
     -->
    <style>
        li{
            list-style-type: none;
            width: 196px;
            height: 328px;
            border: 1px solid #f2f2f2;
            margin: -3px;
            line-height: 1;
            padding-left: 20px;
            padding-top: 22px;
            padding-right: 20px;
            display: inline-block;
            
        }
        li:hover{
            border-color: red;
            
            
        }

        a{
            text-decoration: none;
            
            
           
        }

        .pro-introduce{
            font-size: 14px;
            color: #9b9b9b;
            line-height: 20px;
            padding-top: 10px;
        }

        .pro-price{
            font-size: 18px;
            color:red;
        }
        .pro-boss{
            font-size: 12px;
            color: #9b9b9b;
        }
        .pro-sale{
            border-top: 1px solid #9b9b9b;
            position: relative;
        }
        .pro-font{
            position: absolute;
            top:9px;
            right: 0;
            color: #9b9b9b;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <!-- 目录自己完成 -->
    <div></div>

    <!-- 商品页 -->
    <div>
        <ul>
            <li>
                <a href="https://detail.tmall.com/item.htm?id=654077193511&ali_refid=a3_430673_1006:1520690085:N:BaxGxtmXhnUjBqGrANoKiA%3D%3D:9e52cf1a23c201d69fb1a8474586d0b5&ali_trackid=162_9e52cf1a23c201d69fb1a8474586d0b5&spm=a2e0b.20350158.31919782.2&bxsign=tanwYCPigxwmu7mk5fLGaB_spS9GbhfT-QaY1t_W75eITBqAfGCTVRfx4C2P_kx3ZMUlIN5ziykSBmi9979r7P9GwQm8ILMGYHufjRI8dvqnks">
                    <img src="./O1CN01uBk3QL1CCCNgkC5pN_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="198px" height="198px">
                    <div class="pro-introduce"><span>椰子鞋350男鞋正品满天星黑夏透气休闲运动鞋子女款旗舰店官方士</span></div>
                    <div class="pro-price"><span>￥688</span></div>
                    <div class="pro-boss"><span>mbva旗舰店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 1000+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?id=795324239055&ali_refid=a3_430673_1006:1701140242:H:BaxGxtmXhnUjBqGrANoKiA%3D%3D:2ca3cc583ee7e94147bc43fa24f684c3&ali_trackid=282_2ca3cc583ee7e94147bc43fa24f684c3&spm=a2e0b.20350158.31919782.1&bxsign=tanHCazxCTtXaX4UCxlQbCe1t8JYm8bMvFDnxFP52K74miWkcsSLleLFDTc1P4lyfYGFMyZKHozsKrG1OWF7_nfxXd7prUQ6irdNZI3vNXkv_A">
                    <img src="./O1CN01X5H6ej1dsmpvbiGHB_!!2-saturn_solar.png_360x360xzq75.jpg_.webp" width="198px" height="198px">
                    <div class="pro-introduce"><span>真皮小白鞋男2024夏季新款韩版百搭牛皮白鞋运动休闲板鞋男鞋</span></div>
                    <div class="pro-price"><span>￥138</span></div>
                    <div class="pro-boss"><span>FLZX潮鞋</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 34</span></div></div>
                </a>
            </li>
            
        </ul>
    </div>


    <!-- 页脚自己完成 -->
    <div></div>
</body>
</html>