第三次作业2

原创 于 2024-06-22 23:10:44 发布 · 790 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #css3

1.淘宝登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝登陆面</title>
    <style>
        .box{
            width: 1000px;
            height: 800px;
            background-color: rgb(108, 108, 108,0.1)
        }
        .logo{
            height: 44px;
            float:top;
            border-top: 10px;
    
        }
        .head{
            height: 150px;
           
        }
        .body{
            width: 700px;
            height: 500px;
            background-color: white;
            float: left;
            margin-left: 150px;
            border-radius:30px;
           
        }
        .body1{
            width: 350px;
            height: 500px;
           float: left; 
        }

        .body2{
            width: 350px;
            height: 500px;
            float: left;
        }

        .b1{
            width: 350px;
            height: 100px;
            float: top;
            margin-top: 50px;
            float: left;
            margin-left: 60px;
        }
      
        .b2{
            width: 350px;
            height: 150px;
            float: left;
            margin-left: 80px;
        }
        .b3{
            float: left;
            margin-left: 80px;
        }

        input{
            width: 200px;
            height: 40px;
            border-radius:10px;
            background-color: rgb(108, 108, 108,0.08);
            border: none;
        }

        button{
            width: 210px;
            height: 40px;
            background-color:#FF4E00;
            border-radius:10px;
            border: none;
        }
        .b4{
            float: left;
            float: top;
            margin-left: 90px;
            margin-top: 20px;
            
        }
        
        .b5{
            float: left;
            margin: 80px;
            float: top;
            margin-top: 7px;
        }
     
        .d1{
            width: 350px;
            height: 100px;
            float: top;
            margin-top: 60px;
            float: left;
            margin-left: 100px;
        }

        .d2{
            float: left;
            margin-left: 90px;
        }

        .d3{
            float: left;
            margin-left: 40px
        }
    </style>
</head>
<body>
    <div>
        <div class="box">
            <div class="head">
                <div class="logo"><img src="./屏幕截图 2024-06-21 093514.png" width="65px" height="50px" alt="" ></div>
            </div>
            <div class="body">
                <div class="body1">
                    <div class="b1"><b><big><big>&nbsp  密码登录 &nbsp &nbsp 短信登录</big></big></b></div>
                    <div class="b2"><p><input type="text" name="text1" id="text1" value="" placeholder="账号名/邮箱/手机号"></p>
                        <p><input type="password" name="password" id="password" placeholder="请输入登录密码"></p>
                    </div>
                    <div class="b3"><button type="submit">登录</button></div>
                    <div class="b4"><img src="./屏幕截图 2024-06-21 141121.png" alt="" width="180px" height="30px"></div>
                    <div class="b5"><small>免费注册&nbsp&nbsp忘记账号名&nbsp&nbsp忘记密码</small></div>    
                </div>
                <div class="body2">
                    <div class="d1"><span><big><big>手机扫码安全登录</big></big></span></div>
                    <div class="d2"><img src="./屏幕截图 2024-06-21 143123.png" alt="" width="200px" height="200px"></div>
                    <div class="d3"><img src="./屏幕截图 2024-06-21 142338.png" alt="" width="280px" height="90px"></div>
                </div>
            </div>
            <div class="foot"></div>
        </div>
    </div>
</body>
</html>

 

2.淘宝商品页

<!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>
            <li>
                <a href="https://item.taobao.com/item.htm?id=653570010193&ali_refid=a3_430673_1006:1516370079:N:fzeFe7AeXDYK2rO%2BbJeW5w%3D%3D:4e8524fa9380350f38c5be74e8b94cc1&ali_trackid=1_4e8524fa9380350f38c5be74e8b94cc1&spm=a2e0b.20350158.31919782.1&bxsign=tanGC9vTxcyU8yj-v3Q_6Sc2p5hYQmvtvazocLONIH0IjP0DKeZDQlKcsbBBrPfHxqS3FFlOfo3rd-8GPYWJwyyVJaviAKvQ94JNyMsweaB8yk">
                    <img src="./O1CN01Hrwief1RYpwVUSnl7_!!2212359922124.jpg_Q75.jpg_.avif" width="198px" height="198px">
                    <div class="pro-introduce"><span>小恶魔与天使drew笑脸男鞋2022夏季爆款潮ins厚底百搭小白鞋</span></div>
                    <div class="pro-price"><span>￥598</span></div>
                    <div class="pro-boss"><span>DA小恶魔与天使</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 600+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?id=805077244295&ali_refid=a3_430673_1006:1573080028:H:fzeFe7AeXDYK2rO%2BbJeW5w%3D%3D:437e64ffa3c6b7e21b833956ad45f409&ali_trackid=282_437e64ffa3c6b7e21b833956ad45f409&spm=a2e0b.20350158.31919782.2&bxsign=tan1WSJs8VSx-8HmMxEPfjITEqTLciSVPAb6qWoaPXBELRdinc4iHLJNewbfFKpHkl_sHW6sSCCGfm48SGJYXPXQ6L8B3LoZoCWIJ2A_YNZnZI">
                    <img src="./O1CN01MSpxWn1KbrVdLIHI9_!!133274031183.jpg_Q75.jpg_.avif" width="198px" height="198px">
                    <div class="pro-introduce"><span>法国GFS男鞋夏季板鞋2024新款男士百搭休闲跑鞋鞋子增高小白潮鞋</span></div>
                    <div class="pro-price"><span>￥458</span></div>
                    <div class="pro-boss"><span>Gefansi轻奢</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 30</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?id=709759671225&ali_refid=a3_430673_1006:1670330051:N:fzeFe7AeXDYK2rO%2BbJeW5w%3D%3D:0ed76cca772d07008baf9cd89bd33e22&ali_trackid=1_0ed76cca772d07008baf9cd89bd33e22&spm=a2e0b.20350158.31919782.3&bxsign=tanEE6mEpGxuCFnG-GLQ7gZleSEb2lNUoUqirhLacClvT3wlbhIhD2VcwiRlsRtD0rsJENjhJuRn-r4-X6SxULu85IpYcH-72sprV3x_76OyVI">
                    <img src="./图1.avif" width="198px" height="198px">
                    <div class="pro-introduce"><span>空军一号鞋子男鞋夏季透气2024新款莆田运动潮鞋帆布板鞋小白鞋男</span></div>
                    <div class="pro-price"><span>￥888</span></div>
                    <div class="pro-boss"><span>欧洲站篮球馆</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 64</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?id=797837988670&ali_refid=a3_430673_1006:1682027260:H:iUybtMq3tdcCZ%2Fx4SlnofA%3D%3D:6c2ef16383d267b81f5b722f495eb8eb&ali_trackid=282_6c2ef16383d267b81f5b722f495eb8eb&spm=a2e0b.20350158.31919782.4&bxsign=tanUNDqtwvPtNm9uduoJr0FgDpu7kkUQy4Wmm5mPY0eIty0wkY1HDnzrP4dsDmsl-qy4WKf-lE5G03nxKv3SvLNy5t4gXxokMYQl4kfK_GyAY4">
                    <img src="./图2.avif" width="198px" height="198px">
                    <div class="pro-introduce"><span>鸿星官网尓克男鞋2024新款夏季透气运动休闲鞋子男款百搭老爹潮鞋</span></div>
                    <div class="pro-price"><span>￥158</span></div>
                    <div class="pro-boss"><span>福建国潮鸿星体验店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 96</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?id=797295006861&ali_refid=a3_430673_1006:1694159089:H:fzeFe7AeXDYK2rO%2BbJeW5w%3D%3D:e55d50da9fa989693113eb38f63d0ed0&ali_trackid=282_e55d50da9fa989693113eb38f63d0ed0&spm=a2e0b.20350158.31919782.5&bxsign=tan17PKbDoQosEeWZyCp7nmlDyJZ2AqXV6CDj-XjC6VNJatgV1tSJ3S4eoPyZoDi9IxXBg54jPRZbrKt-LvTKDGkFGZRdIYyVIi43pyycQi8Ec">
                    <img src="./图3.avif" width="198px" height="198px">
                    <div class="pro-introduce"><span>鸿星官网尓克男鞋夏季透气2024新款潮流百搭休闲板鞋男款运动网鞋</span></div>
                    <div class="pro-price"><span>￥218</span></div>
                    <div class="pro-boss"><span>鸿星国品店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 100+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?id=796714574252&ali_refid=a3_430673_1006:1680897106:H:fzeFe7AeXDYK2rO%2BbJeW5w%3D%3D:59f74eab46bcea3aa1b079d0858e2c3a&ali_trackid=282_59f74eab46bcea3aa1b079d0858e2c3a&spm=a2e0b.20350158.31919782.6&bxsign=tanO1GAwHVzMHm-Dyo0Cr2tz64SKit705cICqW1rdgtSCz7zWNjj6X9kZ8kmdwsLeO9aygVOB6GpU_ZGCvkiVl8a22q7gkGWLAxJOZjOW5n5WQ">
                    <img src="./图4.avif" width="198px" height="198px">
                    <div class="pro-introduce"><span>2024新款夏季潮男鞋子潮鞋透气休闲鞋潮流百搭轻奢欧洲站潮牌板鞋</span></div>
                    <div class="pro-price"><span>￥488</span></div>
                    <div class="pro-boss"><span>得物名品馆代购</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 1</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?id=780147535872&ali_refid=a3_430673_1006:1108611128:N:iUybtMq3tdcCZ%2Fx4SlnofA%3D%3D:40d0e3a4c4591ff8cf9e3b98b7fd706b&ali_trackid=1_40d0e3a4c4591ff8cf9e3b98b7fd706b&spm=a2e0b.20350158.31919782.9&bxsign=tanJ3bfgDVzm57206FOde7-cES37DGHeG9kdZs6I4JRnJHOf7f0lKwF6ee310nejFw7HXexCheee0woMarwDpXI95elQ1yUwfrojR7YdE6OG-c">
                    <img src="./🤮.avif" width="198px" height="198px">
                    <div class="pro-introduce"><span>板鞋男火星之旅小众设计感复古潮鞋春季2024新款韩版百搭休闲鞋子</span></div>
                    <div class="pro-price"><span>￥309</span></div>
                    <div class="pro-boss"><span>怪叔叔小众原创潮鞋</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 96</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?id=775646116055&ali_refid=a3_430673_1006:1172310040:H:fzeFe7AeXDYK2rO%2BbJeW5w%3D%3D:9a8d01dcc24ea7fbdcae377c2b8ac0c3&ali_trackid=282_9a8d01dcc24ea7fbdcae377c2b8ac0c3&spm=a2e0b.20350158.31919782.32&bxsign=tanEEPFbfILciEoHwHLgIgGBhsNF_OoA5CCGM6gw2cQ2YWiIM6rr9ZI17GCMTaJqNyhl-oxIVGTcJZrYck0DJQBSZ7aznwGPnurWl8-UuEE8bE">
                    <img src="./6.avif" width="198px" height="198px">
                    <div class="pro-introduce"><span>2024正品黄彪马甲级男鞋夏季网面刺绣情侣运动鞋透气潮流跑步鞋男</span></div>
                    <div class="pro-price"><span>￥349</span></div>
                    <div class="pro-boss"><span>运动系列潮流店</span></div>
                    <div class="pro-sale"><div class="pro-font"><span>月销 36</span></div></div>
                </a>
            </li>
        </ul>
    </div>


    <!-- 页脚自己完成 -->
    <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>淘宝界面</title>
    <style>
        div{
            width: 1500px;
            height: 700px;
            background-color: rgb(108, 108, 108, 0.05);
        }

        .head{
            height: 90px;
        }

        .body{
            width: 200px;
            float: top;
            margin-top: 10px;
            height: 600px;
            background-color:white;
            float: left;
            margin-left:30px;
            border-radius:25px;
        }

        .foot{
            width: 850px;
            height: 600px;
            float: left;
            margin-left: 50px;
            float: top;
            margin-top: 10px;

        }

        .h1,.h2{
            float: top;
            margin-top: 10px;
            height: 75px;
        }
        .h1{
            width: 200px;
            float: left;
            margin-left: 30px;
        }

        .h2{
            width: 390px;
            float: left;
            margin-left: 600px;
        }

        .f1,.f2{
            float: left;
            margin-left: 20px;
            width: 850px;
            border-radius:25px;
            background-color: white;
        }

        .f1{
            height: 350px;
            float: top;
            margin-top: 10px;
        }

        .f2{
            height: 350px;
            float: top;
            margin-top: 30px;
            background-color: white;
        }

        input{
            width: 300px;
            height: 35px;
            border: none;
            background-color: rgb(108, 108, 108, 0.05);
        }

        button{
            width:65px;
            height: 37px;
            background-color: rgb(255, 119, 0);
            color: white;
            border: none;
        }

        .search{
            float: top;
            margin-top: 10px;
            float: left;
            margin-left: 10px;
            width: 180px;
            height: 30px;
            background-color: rgba(255, 119, 0, 0.514);
            color: rgb(255, 119, 0) ;
            border-radius:5px;
        }

        .b1{
            width: 200px;
            height: 140px;
            float: left;
            margin-left: 15px;
            background-color: white;
        }

        .f11{
            width: 800px;
            height: 120px;
            background-color: white;
        }

        .f111{
            width: 15%;
            height: 120px;
            float: left;
            background-color: white;
        }

        .f112{
            width: 45%;
            height: 120px;
            float: left;
            background-color: rgb(108, 108, 108, 0.05);
            background-color: white;
        }

        .f113{
            width: 40%;
            height: 120px;
            float: left;
            background-color: rgb(108, 108, 108, 0.05);
            background-color: white;
        }


        .f12{
            width: 850px;
            height:50px;
        }
        
        .f121,.f122,.f123,.f124,.f125{
            width: 170px;
            height: 80px;
            float: left;
            text-align: center;
            background-color: white;

        }
      
        .ff2{
            width: 650px;
            height: 200px;
            float: left;
            margin-left: 30px;
            float: top;
            margin-top: 20px;
            background-color: white;
        }
    </style>
</head>
<body>
    <div>
        <div class="head">
            <div class="h1"><img src="./屏幕截图 2024-06-22 202432.png" alt="" width="300px" height="65px"></div>
            <div class="h2"><p><input type="text" name="text1" id="text1" value="" placeholder="小白鞋"><button type="submit">搜索</button></p></div>
        </div>
        <div class="body">
            <p><div class="search"><b>首页</b></div></p>
        <div class="b1">
            <p>我的购物车</p>
            <p>我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ^</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已买到的宝贝</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的拍卖</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;官方集运</p>
            <p>我的卡卷包</p>
            <p>我的收藏</p>
            <p>我的足迹</p>
            <p>购买过的店铺</p>
            <p>我的发票</p>
            <p>评价管理</p>
            <p>退款维权</p>
            <p>账户设置</p>
        </div>      
        </div>
        <div class="foot">
            <div class="f1">
                <div class="f11">
                    <div class="f111"><img src="./屏幕截图 2024-06-22 214228.png" alt="" width="120px" height="120px"></div>
                    <div class="f112">
                        <p><b><big><big>熊美丽</big></big></b></p>
                        <p>我的账号</p>
                        <p>tb0131933223</p>
                    </div>
                    <div class="f113"><p><big>收货地址</big></p>
                    <p>
                        湖南省长沙市望城区丁字湾街道中南林业科技大学涉外学院
                    </p>
                    </div>
                </div>
                <div class="f12">
                   <div class="f121"><p><b><big>0</big></b></p>
                <p>待付款</p>
                </div>
                   <div class="f122"><p><b><big>0</big></b></p>
                <p>待发货</p>
                </div>
                   <div class="f123"><p><b><big>0</big></b></p>
                    <p>待收货</p>
                </div>
                   <div class="f124"><p><b><big>12</big></b></p>
                    <p>待评价</p>
                </div>
                   <div class="f125"><p><b><big>0</big></b></p>
                    <p>退款/售后</p>
                </div>
                </div>
            </div>
            <div class="f2">
                <div class="ff2"><big>我的物流</big></div>
            </div>
            
        </div>
    </div>
</body>
</html>

 

xmlhcxr
关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值