第三次作业

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>
       *{
            margin: 0px;
        }
        
        .content{
            width: 1260px;
            height: 650px;
            background-color: #f3f3f3;
        }
      
        .a1{
            margin-top: -5px;
            background-color: #f3f3f3;
            width: 1260px;
            height: 80px;
        }
        
        .a2{
            display: flex;
            width: 800px;
            height: 550px;
            padding-top: 10px;
            margin-left: 220px;
            border-radius: 30px;
            border: 1px solid white;
            background-color: white;
        }
       
        .b1{
            margin-left: 90px;
        }
       
        .c1{
            margin-left: 40px;
            margin-top: 80px;
        }
       
        h3 {
            display: inline; 
            margin-right: 15px;
        }
       
        h3::after {
            content: '|'; 
            margin-left: 15px; 
        }
       
        h3:last-child::after {
            content: '';
        }
       
        .c2{
            margin-left: -15px;
            width: 300px;
            margin-top: 45px;
            text-align: center;
        }
       
        .c2 p{
            margin: 15px;
            color: black;
        }
      
        .c2 input{
            width: 250px;
            height: 40px;
        }
       
        .c2 button{
            background-color: lightsalmon;
            width: 200px;
            height: 40px;
        }
       
        .c3{
            margin-left: -30px;
            margin-top: 80px;
        }
     
        .b2{
            text-align: center;
            margin-left: 120px;
            margin-top: 85px;
        }
    </style>
</head>
<body>
    <div>
        <img src="./标.png" width="1260px" height="75px">
    </div>
    <div class="content">
        <div class="a1"></div>
        <div class="a2">
            <div class="b1">
                <div class="c1">
                    <h3>密码登录</h3><h3>短信登录</h3>
                </div>
                <div class="c2">
                    <p><input type="text" name="username" placeholder="帐号名/邮箱/手机号"></p>
                    <p><input type="text" name="password" placeholder="请输入登录密码"></p>
                    <button>登录</button>
                </div>
                <div class="c3">
                    <a href="#">支付宝登录</a>&nbsp;&nbsp;<a href="">免费注册</a>&nbsp;&nbsp;<a href="">忘记账号名</a>&nbsp;&nbsp;<a href="">忘记密码</a>
                </div>
            </div>
            <div class="b2">
                <p><b>手机扫码安全登录</b></p><br>
                <img src="./码.png" width="200px" height="200px">
            </div>
        </div>
    </div>
</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> 淘宝商品展示页</title>
 
     <style>
        *{
            margin-top: 0;
        }
        .dhl{
            height: 25px;
            background-color: rgb(216, 216, 216);
            margin-top: 0px;
        }
        .dhl li{
            display: inline-block;
            list-style: none;
            margin-top: 5px;
            font-size: 10px;
            padding-left: 20px;
 
        }
      
        .dhl li:hover{
            background-color: chocolate;
        }
 
        .container li{
            width: 234px;
            height: 366px;
            list-style-type: none;
            display: inline-block;
            padding-top:22px ;
            padding-left:20px ;
            padding-right:20px ;
            margin-right: -5px;
            border-top: 1px solid #9b9b9b;
            border-left:1px solid #9b9b9b;
            border-right:1px solid #9b9b9b;
            position: relative;
          
        }
 
        [name="address"]{
            font-size: 14px;
            border: none;
        }
        
        .container li:hover{
            border: 1px solid red;
        }
        
        a{
            text-decoration: none;
        }
      
        .image{
            text-align: center;
        }
 
       .introduce{
            font-family: "pingfangSC-Regular";
            font-size: 14px;
            color: #9b9b9b;;
            line-height: 20px;
            padding-top: 15px;
        }
 
        .prace{
            font-size: 18px;
            color: red;
            line-height: 30px;
        }
 
        .store{
            font-size: 12px;
            color: #9b9b9b;
            line-height: 30px;
        }
 
        .sale{
            color: #9b9b9b;
            font-size: 12px;
            line-height: 50px;
            text-align: right;
        }
 
        .search{
            width: 1200px;
            height: 100px;
            display: inline-block;
            position: relative;
            padding-top: 0%;
        }
      
        .search a{
            font-size: 10px;
            margin-left: 12px;
            text-align: center;
            color: #666;
        }
        
        .red{
            color: rgb(255, 50, 50);
        }
       
        .submit{
            background-color: red;
        }
       
        .text{
            border: none;
            width: 400px;
            height: 20px;
            border: 2px solid red;
        }
 
       .search-border{
            width: 600px;
            height: 100px;
            margin-top: 20px;
            margin-left: 400px;
        }
    
     </style>
</head>
<body>
    <div class="dhl">
       <ul>
        <li > <select name="address" >
            <option value="china">中国大陆</option>
            <option value="tw">中国台湾</option>
            <option value="xg">中国香港</option>
            <option value="hg">韩国</option>
            <option value="mg">美国</option>
        </select></li>
        <li>账号管理</li>
        <li>手机逛淘宝</li>
        <li>网页无障碍</li>
        <li>淘宝网首页</li>
        <li>我的淘宝</li>
        <li>购物车</li>
        <li>收藏夹</li>
        <li>商品分类</li>
        <li>免费开店</li>
        <li>千牛卖家中心</li>
        <li>帮助中心</li>
       </ul>
    </div>
    <div class="search">
       
        <div class="search-border">
            <form method="post" action="" class="box">
                <input type="text" class="text" name="key" placeholder="潮流女装">
                <input type="submit" class="submit" value="搜索">
            </form>
        <br>
        <a href="" class="red" target="_blank">一淘限时抢</a>
        <a href="" class="" target="_blank">口红</a>
        
        <a href="" class="" target="_blank">洗衣液</a>
        
        <a href="" class="" target="_blank">女鞋</a>
        
        <a href="" class="" target="_blank">洗衣液</a>
        
        <a href="" class="" target="_blank">粉饼</a>
        
        <a href="" class="" target="_blank">散粉</a>
        
        <a href="" class="" target="_blank">床垫</a>
        
        <a href="" class="" target="_blank">针织衫</a>
        
        <a href="" class="" target="_blank">连衣裙</a>
        
        <a href="" class="" target="_blank">运动鞋</a>
        </div>
    </div>
 
 
         <!--商品列表展示  -->  
    <div class="container">
 
       <!-- 所有的商品信息 -->
        <ul>
            <!-- 单个商品信息 -->
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2.文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>¥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="store"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
 
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce" ><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>¥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>¥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>¥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>¥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>¥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png " width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>¥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png " width="230" height="210" alt="" ></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>¥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></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>
        *{
            margin: 0px;
        }
       
        .header{
            width: 1265px;
            height: 30px;
            background-color: rgb(216, 216, 216);
        }
       
        .header li{
            display: inline-block;
            list-style: none;
            margin-top: 5px;
            font-size: 15px;
            padding-left: 15px;
        }
        
        .body{
            width: 1265px;
            height: 50px;
            background-color:coral;
        }
      
        .body li{
            margin-top: 10px;
            display: inline-block;
            list-style: none;
            color: white;
        }
        
        .text{
            font-family:"pcy";
            color: white;
            font-size: 25px;
        }
        
        .body a{
            margin-top: 15px;
            margin-right: 180px;
            float: right;
        }
       
        .body input{
            width: 250px;
            height: 20px;
        }
        
        .body button{
            background-color: gainsboro;
            border: 0px none;
            height: 25px;
            width: 60px;
        }
        
        .content{
            display: flex;
        }
        
        .b{
            margin-top: 25px;
            list-style: none;
            color: coral;
            font-size: 20px;
        }
       
        .li1{
            margin-top :10px;
            list-style: none;
            font-size: 15px;
        }
        
        .a2{
            margin: 25px 30px;
            width: 800px;
            height: 700px;
        }
        
        .a21 img{
            width: 800px;
            height: 130px;
        }
        
        .a22{
            display: flex;
            margin-top: 20px;
            width: 800px;
            height: 50px;
            background-color: rgb(215, 228, 229,0.3);
        }
        
        .a22 img{
            padding-top: 10px;
            padding-left: 10px;
            width: 30px;
            height: 30px;
        }
        
        .a22 p{
            margin-left: 15px;
            margin-top: 15px;
            color:rgb(66, 87, 126);
        }

        .a23{
            margin-top: 15px;
            width: 800px;
        }
        
        .a231{
            height: 45px;
            background-color:rgb(143, 191, 230,0.7);
        }
        
        .a231 p{
            padding-top: 10px;
            padding-left: 5px;
            color:white;
        }
       
        .a231 button{
            float: right;
            width: 80px;
            margin-right: 10px;
            margin-top: -18px;
        }
       
        .a232 li{
            margin-left: -30px;
            margin-right: 20px;
            list-style-type: none;
            display: inline-block;
        }
       
        .a232 img{
            margin-top: 10px;
            margin-right: 20px;
            width: 240px;
            height: 245px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <ul>
            <li>tb098577178</li>
            <li>手机逛淘宝</li>
            <li>网页无障碍</li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li>淘宝回首页</li>
            <li>我的淘宝</li>
            <li>购物车</li>
            <li>收藏夹</li>
            <li>商品分类</li>
            <li>免费开店</li>
            <li>千牛卖家中心</li>
            <li>卖家中心</li>
        </ul>
    </div>
    <div class="body">
        <ul>
            <li class="text">我的淘宝</li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li>首页</li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li>账号设置</li>
            <a><input type="text"><button>搜索</button></a>
        </ul>
    </div>
    <div class="content">
        <div class="a1">
            <ul>
                <li class="b">全部功能</li>
                <li class="li1">我的购物车</li>
                <li class="li1">已买到的宝贝</li>
                <li class="li1">购买过的店铺</li>
                <li class="li1">我的卡券包</li>
                <li class="li1">我的发票</li>
                <li class="li1">我的收藏</li>
                <li class="li1">评价管理</li>
                <li class="li1">退款维权</li>
                <li class="li1">我的足迹</li>
            </ul>
        </div>
        <div class="a2">
            <div class="a21">
                <img src="./。.png">
            </div>
            <div class="a22">
                <img src="./物流.png" ><p>我的物流</p>
            </div>
            <div class="a23">
                <div class="a231">
                    <p>根据浏览,猜我喜欢</p>
                    <button>换一组</button>
                </div>
                <div class="a232">
                    <ul>
                        <li>
                            <a href="">
                                <!-- 1.图片 -->
                                <div class="image"><img src="./潮流女装.png"></div>
                                <!-- 2.文字说明 -->
                                <div class="introduce">
                                    <span>美式穿搭花灰色杆条短袖t恤女</span>
                                </div>
                                <!-- 3.价格 -->
                                <div class="price"><span>¥28.50</span></div>
                                <!-- 4.店铺 -->
                                <div class="store"><span>zti旗舰店</span></div>
                                <!-- 5.月销3000+ -->
                                <div class="sale"><span>月销0</span></div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <!-- 1.图片 -->
                                <div class="image"><img src="./潮流女装.png"></div>
                                <!-- 2.文字说明 -->
                                <div class="store">
                                    <span>美式穿搭花灰色杆条短袖t恤女</span>
                                </div>
                                <!-- 3.价格 -->
                                <div class="price"><span>¥28.50</span></div>
                                <!-- 4.店铺 -->
                                <div class="store"><span>zti旗舰店</span></div>
                                <!-- 5.月销3000+ -->
                                <div class="sale"><span>月销0</span></div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <!-- 1.图片 -->
                                <div class="image"><img src="./潮流女装.png"></div>
                                <!-- 2.文字说明 -->
                                <div class="introduce">
                                    <span>美式穿搭花灰色杆条短袖t恤女</span>
                                </div>
                                <!-- 3.价格 -->
                                <div class="price"><span>¥28.50</span></div>
                                <!-- 4.店铺 -->
                                <div class="store"><span>zti旗舰店</span></div>
                                <!-- 5.月销3000+ -->
                                <div class="pro-sale"><span>月销0</span></div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值