【无标题】

最新推荐文章于 2024-07-19 18:46:52 发布
最新推荐文章于 2024-07-19 18:46:52 发布
阅读量182 收藏
点赞数 1
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/efangqi/article/details/139774103
版权

淘宝登录页面

分析布局：

35826744cf734b6791539e65a6b384c5.png

具体代码如下

<!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;
        }
        .body1{
            margin-top: -5px;
            background-color: #f3f3f3;
            width: 1260px;
            height: 80px;
        }
        .body2{
            /* 定义为弹性盒子 使俩个板块并列排布 */
            display: flex;
            width: 800px;
            height: 550px;
            /* 调整间距 */
            padding-top: 10px;
            margin-left: 220px;
            /* 调整边框弧度 */
            border-radius: 30px;
            border: 1px solid white;
            background-color: white;
        }
        .item1{
            margin-left: 90px;
        }
        .bp1{
            margin-left: 40px;
            margin-top: 80px;
        }
        /* 在三级标题中间添加竖杠 */
        h3 {
            display: inline; /* 使得两个h2元素在同一行显示 */
            margin-right: 15px; /* 调整标题间距 */
        }
        h3::after {
            content: '|'; /* 添加竖杠 */
            margin-left: 15px; /* 调整竖杠与后面标题的距离 */
        }
        h3:last-child::after {
            content: ''; /* 最后一个标题后不加竖杠 */
        }
        .bp2{
            margin-left: -15px;
            width: 300px;
            margin-top: 45px;
            text-align: center;
        }
        .bp2 p{
            margin: 15px;
            color: black;
        }
        .bp2 input{
            width: 250px;
            height: 40px;
        }
        .bp2 button{
            background-color: lightsalmon;
            width: 200px;
            height: 40px;
        }
        .bp3{
            margin-left: -30px;
            margin-top: 80px;
        }
        .item2{
            /* 设置文字居中 */
            text-align: center;
            margin-left: 120px;
            margin-top: 85px;
        }
    </style>
</head>
<body>
    <div>
        <!-- 引入logo -->
        <img src="../淘宝头部.png" width="1260px" height="75px">
    </div>
    <div class="content">
        <!-- 制作核心内容 -->
        <div class="body1"></div>
        <!-- 设置卡片内容 -->
        <div class="body2">
            <!-- 左边板块 -->
            <div class="item1">
                <div class="bp1">
                    <h3>密码登录</h3><h3>短信登录</h3>
                </div>
                <div class="bp2">
                    <p><input type="text" name="username" placeholder="帐号名/邮箱/手机号"></p>
                    <p><input type="text" name="password" placeholder="请输入登录密码"></p>
                    <button>登录</button>
                </div>
                <!-- 左边板块尾部 -->
                <div class="bp3">
                    <a href="#">支付宝登录</a>&nbsp;&nbsp;<a href="">免费注册</a>&nbsp;&nbsp;<a href="">忘记账号名</a>&nbsp;&nbsp;<a href="">忘记密码</a>
                </div>
            </div>
            <!-- 右边板块 -->
            <div class="item2">
                <p><b>手机扫码安全登录</b></p><br>
                <img src="../淘宝二维码图.png" width="200px" height="200px">
            </div>
        </div>
    </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>作业</title>
 
    <!-- 
        写一个页面技巧：
        1.分析布局
        2.分析子项
        3.抄样式
     -->
     <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;
       }
 
       /* 店铺 */
       .boss{
        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>
   
 
        <!--中间淘宝logo 以及搜索框 -->
        
    <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="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1679021403:N:U7EnhIPO1nfNKckdjIcU1xLif4BvWFeT:b59fdde97925cdc100838b3884a80f0b&ali_trackid=1_b59fdde97925cdc100838b3884a80f0b&bxsign=tanZmHjZ4vOlF_MSm97f-5QyUHzZYgnvkqYBU9Ja0eeBR0ei6GifDfLBwt54iCjnNzhQS1l4N7XO7jIbLn_apDyNOJvQlmxTote2SmQ83kpRE4&id=732572582099&spm=a2e0b.20350158.31919782.1">
                <!-- 1.图片 -->
                <div class="image"><img src="https://img.alicdn.com/imgextra/i3/110839213/O1CN015mArS62Hvborse1R2_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="230" height="210" alt=""></div>
                <!-- 2.文字说明 -->
                <div class="introduce"><span>凌兮洛原创汉服女明制绣花交领飞机袖国风马面裙套装日常显瘦</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥394</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>凌兮洛汉服馆</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;2000+</span></div>
 
            </a>
        </li>
 
        <li>
            <!--点击跳转到购买页面  -->
            <a href="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1679021403:N:U7EnhIPO1nfNKckdjIcU1xLif4BvWFeT:b59fdde97925cdc100838b3884a80f0b&ali_trackid=1_b59fdde97925cdc100838b3884a80f0b&bxsign=tanZmHjZ4vOlF_MSm97f-5QyUHzZYgnvkqYBU9Ja0eeBR0ei6GifDfLBwt54iCjnNzhQS1l4N7XO7jIbLn_apDyNOJvQlmxTote2SmQ83kpRE4&id=732572582099&spm=a2e0b.20350158.31919782.1">
                <!-- 1.图片 -->
                <div class="image"><img src="https://img.alicdn.com/imgextra/i4/115205355/O1CN01eT7as21pQdtNyyeUY_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce" ><span>重回汉唐花宴景直领对襟衫穿孔收腰国风马面裙明制汉服新中式</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥118</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>重回汉唐旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;1000+</span></div>
 
            </a>
        </li>
        <li>
            <!--点击跳转到购买页面  -->
            <a href="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1679021403:N:U7EnhIPO1nfNKckdjIcU1xLif4BvWFeT:b59fdde97925cdc100838b3884a80f0b&ali_trackid=1_b59fdde97925cdc100838b3884a80f0b&bxsign=tanZmHjZ4vOlF_MSm97f-5QyUHzZYgnvkqYBU9Ja0eeBR0ei6GifDfLBwt54iCjnNzhQS1l4N7XO7jIbLn_apDyNOJvQlmxTote2SmQ83kpRE4&id=732572582099&spm=a2e0b.20350158.31919782.1">
                <!-- 1.图片 -->
                <div class="image"><img src="https://img.alicdn.com/imgextra/i3/99506023/O1CN01IgDR3j1uMaQGqedd7_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>曹州莘月原创汉服女春暖花开明制对襟立领衫汉元素日常马面裙</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥298</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>曹州星悦原创汉服店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;2500+</span></div>
 
            </a>
        </li>
        <li>
            
 
            <!--点击跳转到购买页面  -->
            <a href="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1679021403:N:U7EnhIPO1nfNKckdjIcU1xLif4BvWFeT:b59fdde97925cdc100838b3884a80f0b&ali_trackid=1_b59fdde97925cdc100838b3884a80f0b&bxsign=tanZmHjZ4vOlF_MSm97f-5QyUHzZYgnvkqYBU9Ja0eeBR0ei6GifDfLBwt54iCjnNzhQS1l4N7XO7jIbLn_apDyNOJvQlmxTote2SmQ83kpRE4&id=732572582099&spm=a2e0b.20350158.31919782.1">
                <!-- 1.图片 -->
                <div class="image"><img src="https://img.alicdn.com/imgextra/i2/2345060098/O1CN01li0sOf1CavlzxFpbC_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>醉欢楼原创(牡丹芳)明制云肩汉服女2024新款夏季改良重工马面裙</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥410</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>醉欢楼旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;4000+</span></div>
 
            </a>
        </li>
        <li>
            <!--点击跳转到购买页面  -->
            <a href="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1679021403:N:U7EnhIPO1nfNKckdjIcU1xLif4BvWFeT:b59fdde97925cdc100838b3884a80f0b&ali_trackid=1_b59fdde97925cdc100838b3884a80f0b&bxsign=tanZmHjZ4vOlF_MSm97f-5QyUHzZYgnvkqYBU9Ja0eeBR0ei6GifDfLBwt54iCjnNzhQS1l4N7XO7jIbLn_apDyNOJvQlmxTote2SmQ83kpRE4&id=732572582099&spm=a2e0b.20350158.31919782.1">
                <!-- 1.图片 -->
                <div class="image"><img src="https://img.alicdn.com/imgextra/i3/110839213/O1CN015mArS62Hvborse1R2_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>凌兮洛原创汉服女明制绣花交领飞机袖国风马面裙套装日常显瘦</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥49</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>凌兮洛汉服馆</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;2000+</span></div>
 
            </a>
        </li>
        <li>
            <!--点击跳转到购买页面  -->
            <a href="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1679021403:N:U7EnhIPO1nfNKckdjIcU1xLif4BvWFeT:b59fdde97925cdc100838b3884a80f0b&ali_trackid=1_b59fdde97925cdc100838b3884a80f0b&bxsign=tanZmHjZ4vOlF_MSm97f-5QyUHzZYgnvkqYBU9Ja0eeBR0ei6GifDfLBwt54iCjnNzhQS1l4N7XO7jIbLn_apDyNOJvQlmxTote2SmQ83kpRE4&id=732572582099&spm=a2e0b.20350158.31919782.1">
                <!-- 1.图片 -->
                <div class="image"><img src="https://img.alicdn.com/imgextra/i3/110839213/O1CN015mArS62Hvborse1R2_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>凌兮洛原创汉服女明制绣花交领飞机袖国风马面裙套装日常显瘦</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥49</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>凌兮洛汉服馆</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;2000+</span></div>
 
            </a>
        </li>
        <li>
            <!--点击跳转到购买页面  -->
            <a href="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1679021403:N:U7EnhIPO1nfNKckdjIcU1xLif4BvWFeT:b59fdde97925cdc100838b3884a80f0b&ali_trackid=1_b59fdde97925cdc100838b3884a80f0b&bxsign=tanZmHjZ4vOlF_MSm97f-5QyUHzZYgnvkqYBU9Ja0eeBR0ei6GifDfLBwt54iCjnNzhQS1l4N7XO7jIbLn_apDyNOJvQlmxTote2SmQ83kpRE4&id=732572582099&spm=a2e0b.20350158.31919782.1">
                <!-- 1.图片 -->
                <div class="image"><img src="https://img.alicdn.com/imgextra/i3/110839213/O1CN015mArS62Hvborse1R2_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>凌兮洛原创汉服女明制绣花交领飞机袖国风马面裙套装日常显瘦</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥49</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>凌兮洛汉服馆</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;2000+</span></div>
 
            </a>
        </li>
        <li>
            <!--点击跳转到购买页面  -->
            <a href="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1679021403:N:U7EnhIPO1nfNKckdjIcU1xLif4BvWFeT:b59fdde97925cdc100838b3884a80f0b&ali_trackid=1_b59fdde97925cdc100838b3884a80f0b&bxsign=tanZmHjZ4vOlF_MSm97f-5QyUHzZYgnvkqYBU9Ja0eeBR0ei6GifDfLBwt54iCjnNzhQS1l4N7XO7jIbLn_apDyNOJvQlmxTote2SmQ83kpRE4&id=732572582099&spm=a2e0b.20350158.31919782.1">
                <!-- 1.图片 -->
                <div class="image"><img src="https://img.alicdn.com/imgextra/i3/110839213/O1CN015mArS62Hvborse1R2_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>凌兮洛原创汉服女明制绣花交领飞机袖国风马面裙套装日常显瘦</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥49</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>凌兮洛汉服馆</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;2000+</span></div>
 
            </a>
        </li>
        <li>
            <!--点击跳转到购买页面  -->
            <a href="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1679021403:N:U7EnhIPO1nfNKckdjIcU1xLif4BvWFeT:b59fdde97925cdc100838b3884a80f0b&ali_trackid=1_b59fdde97925cdc100838b3884a80f0b&bxsign=tanZmHjZ4vOlF_MSm97f-5QyUHzZYgnvkqYBU9Ja0eeBR0ei6GifDfLBwt54iCjnNzhQS1l4N7XO7jIbLn_apDyNOJvQlmxTote2SmQ83kpRE4&id=732572582099&spm=a2e0b.20350158.31919782.1">
                <!-- 1.图片 -->
                <div class="image"><img src="https://img.alicdn.com/imgextra/i3/110839213/O1CN015mArS62Hvborse1R2_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>凌兮洛原创汉服女明制绣花交领飞机袖国风马面裙套装日常显瘦</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥49</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>凌兮洛汉服馆</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;2000+</span></div>
 
            </a>
        </li>
        <li>
            <!--点击跳转到购买页面  -->
            <a href="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1679021403:N:U7EnhIPO1nfNKckdjIcU1xLif4BvWFeT:b59fdde97925cdc100838b3884a80f0b&ali_trackid=1_b59fdde97925cdc100838b3884a80f0b&bxsign=tanZmHjZ4vOlF_MSm97f-5QyUHzZYgnvkqYBU9Ja0eeBR0ei6GifDfLBwt54iCjnNzhQS1l4N7XO7jIbLn_apDyNOJvQlmxTote2SmQ83kpRE4&id=732572582099&spm=a2e0b.20350158.31919782.1">
                <!-- 1.图片 -->
                <div class="image"><img src="https://img.alicdn.com/imgextra/i3/110839213/O1CN015mArS62Hvborse1R2_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>凌兮洛原创汉服女明制绣花交领飞机袖国风马面裙套装日常显瘦</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥49</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>凌兮洛汉服馆</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;2000+</span></div>
 
            </a>
        </li>
        </ul>  
        
    </div>
    <div>版权
        <!--底下是一些版权数据  -->
    </div>
 
 
</body>
</html>

结果

 

淘宝个人中心

分析布局：

ae379663970c45a3bf2241bd68f738f1.png

具体代码如下

<!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;
        }
        /* 自定义字体 */
        @font-face{
        font-family: pcy;
        src: url(./hanyituantuanyuanyuan.ttf);
        }
        .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;
        }
        /* 左侧导航栏 */
        .bp{
            margin-top: 25px;
            list-style: none;
            color: coral;
            font-size: 20px;
        }
        .li1{
            margin-top :10px;
            list-style: none;
            font-size: 15px;
        }
        /* 中间内容 */
        .item2{
            margin: 25px 30px;
            width: 800px;
            height: 700px;
        }
        .item21 img{
            width: 800px;
            height: 130px;
        }
        /* 我的物流栏 */
        .item22{
            display: flex;
            margin-top: 20px;
            width: 800px;
            height: 50px;
            background-color: rgb(215, 228, 229,0.3);
        }
        .item22 img{
            padding-top: 10px;
            padding-left: 10px;
            width: 30px;
            height: 30px;
        }
        .item22 p{
            margin-left: 15px;
            margin-top: 15px;
            color:rgb(66, 87, 126);
        }
        /* 商品推荐栏 */
        .item23{
            margin-top: 15px;
            width: 800px;
        }
        .xh1{
            height: 45px;
            background-color:rgb(143, 191, 230,0.7);
        }
        .xh1 p{
            padding-top: 10px;
            padding-left: 5px;
            color:white;
        }
        .xh1 button{
            float: right;
            width: 80px;
            margin-right: 10px;
            margin-top: -18px;
        }
        .xh2 li{
            margin-left: -30px;
            margin-right: 20px;
            list-style-type: none;
            display: inline-block;
        }
        .xh2 img{
            margin-top: 10px;
            margin-right: 20px;
            width: 240px;
            height: 245px;
            text-align: center;
        }
        /* 右边日历 */
        .item3{
            margin-top: 25px;
        }
        .rl1{
            margin-left: -15px;
            text-align: center;
            padding-top: 8px;
            width: 270px;
            height: 30px;
            background-color: rgba(78, 172, 83, 0.8);
            color: white;
        }
        .rl2{
            margin-left: -15px;
            width: 270px;
            height: 100px;
            padding-top: 2px;
            text-align: center;
            background-color: rgb(219, 242, 223,0.5);
            color: rgb(78, 172, 83);
        }
        .Y{
            font-size: 40px;
        }
    </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="item1">
            <ul>
                <li class="bp">全部功能</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="item2">
            <div class="item21">
                <img src="./淘宝.png">
            </div>
            <div class="item22">
                <img src="./快递车.svg" ><p>我的物流</p>
            </div>
            <div class="item23">
                <div class="xh1">
                    <p>根据浏览，猜我喜欢</p>
                    <button>换一组</button>
                </div>
                <div class="xh2">
                    <ul>
                        <li>
                            <a href="">
                                <!-- 1.图片 -->
                                <div class="pro-img"><img src="./朴彩英.jpg"></div>
                                <!-- 2.文字说明 -->
                                <div class="pro-introduce">
                                    <span>BLACKPINK朴彩英rolo专辑R</span>
                                </div>
                                <!-- 3.价格 -->
                                <div class="pro-price"><span>126.51</span></div>
                                <!-- 4.店铺 -->
                                <div class="pro-boss"><span>广东</span></div>
                                <!-- 5.月销3000+ -->
                                <div class="pro-sale"><span>月销3000+</span></div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <!-- 1.图片 -->
                                <div class="pro-img"><img src="./朴彩英.jpg"></div>
                                <!-- 2.文字说明 -->
                                <div class="pro-introduce">
                                    <span>BLACKPINK朴彩英rolo专辑R</span>
                                </div>
                                <!-- 3.价格 -->
                                <div class="pro-price"><span>126.51</span></div>
                                <!-- 4.店铺 -->
                                <div class="pro-boss"><span>广东</span></div>
                                <!-- 5.月销3000+ -->
                                <div class="pro-sale"><span>月销3000+</span></div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <!-- 1.图片 -->
                                <div class="pro-img"><img src="./朴彩英.jpg"></div>
                                <!-- 2.文字说明 -->
                                <div class="pro-introduce">
                                    <span>BLACKPINK朴彩英rolo专辑R</span>
                                </div>
                                <!-- 3.价格 -->
                                <div class="pro-price"><span>126.51</span></div>
                                <!-- 4.店铺 -->
                                <div class="pro-boss"><span>广东</span></div>
                                <!-- 5.月销3000+ -->
                                <div class="pro-sale"><span>月销3000+</span></div>
                            </a>
                        </li>
                </div>
            </div>
        </div>
        <div class="item3">
            <div class="rl1">我的日历</div>
            <div class="rl2">
                <p class="Y">06</p>
                <p>星期四</p>
                <p>2024 06</p>
            </div>
        </div>
    </div>
</body>
</html>

结果

 

efangqi
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt-无标题窗口
学而思
05-21 7362
        今天学习了下无标题窗口，于是来记录下我的学习过程首先建立一个Qt Widgets Application继承QWidget类创建完后直接运行就得到了如下效果那么，既然是无标题窗口就要去掉窗口栏啊，于是加上setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);去掉标题栏，但是这样整个窗口就不能移动...
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
C#中实现无标题栏窗体拖动的代码
热门推荐
百锦再的博客
01-18 1万+
事件来实现拖动功能。当鼠标按下时，我们标记鼠标正在拖动，并保存当前坐标。在鼠标移动时，如果鼠标正在拖动，我们更新窗体的位置，使其跟随鼠标移动。当鼠标释放时，我们取消拖动标记。请注意，在窗体上添加了对应事件处理程序的窗体控件属性应该设置为对应的事件处理程序方法。在窗体设计视图，选择属性窗格，在事件选项卡中为。在C#中实现无标题栏窗体拖动的代码可以通过处理鼠标事件来实现。这样，当你在运行窗体时，你就可以通过鼠标拖动窗体来改变其位置。事件分别选择对应的处理程序方法。在这个示例代码中，我们通过处理。
C# 移动无标题栏无边框窗体的3种方法
SabreWulf
03-13 2254
目录 第一种：手工移动 第二种：调用系统API 1.引入下面代码 前提需要引入命名空间using System.Runtime.InteropServices 2.增加鼠标按下事件发送消息，让系统误以为按下是标题栏 第三种，重写 WndProc 第一种：手工移动 直接通过修改窗体位置从而达到移动窗体的效果 //定义一个位置信息Point用于存储鼠标位置 private Point mPoint; /// <summary>
Qt实现改变无标题栏窗体大小及移动窗体
danshiming的博客
11-10 3206
Qt实现鼠标左键拖动无标题栏窗体右下角改变窗体大小及移动窗体
VC去掉'无标题'字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
visual c++取掉对话框窗口的 -无标题 字样的方法
08-04
在Visual C++编程环境中，创建窗口应用程序时，默认情况下，窗口标题栏可能会显示“-无标题”字样，这通常是由于没有正确设置窗口类或没有自定义窗口标题所导致的。要解决这个问题，我们需要深入理解Windows API中的...
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
Android 全屏无标题栏的三种实现方法
09-02
在Android应用开发中，有时我们需要实现全屏无标题栏的效果，以提供更加沉浸式的用户体验。以下将详细介绍三种在Android中实现全屏无标题栏的方法。 ### 方法一：通过Java代码 在Activity的`onCreate()`方法中，在...
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1334
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 591
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 738
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
拖拽上传（预览图片）
喵喵的博客
07-18 361
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
Html_Css问答集(11)
白话魔法师
07-16 848
html与css学习中的一些疑问，问答中轻松获取知识。
相对定位语法：css+xpath基础语法使用-定位页面元素
m0_69119792的博客
07-16 759
介绍css和xpath，设置相对定位的基础使用
css 屏幕四周报警提示
AS_JOPO的专栏
07-16 359
屏幕四周出现律动的红色边框，产生报警提示的效果。
如何利用 CSS 动画和过渡效果来增强用户交互体验？
xy520521的博客
07-16 171
动态交互效果：通过结合CSS动画和JavaScript，可以实现动态的交互效果。通过定义关键帧，在不同的时间点改变元素的样式，可以创建各种复杂的动画效果。过渡延迟与持续时间：通过调整CSS过渡的延迟和持续时间，可以实现不同的交互效果。延迟可以用来创建一定的悬停效果，持续时间可以用来控制过渡的速度。渐变过渡：使用CSS过渡属性，比如transition，来实现元素的平滑过渡效果。淡入淡出效果：使用CSS的opacity属性来实现元素的淡入淡出效果。可以通过改变元素的透明度来实现平滑的淡入淡出过渡效果。
编织文字的魔法：探索WebKit的CSS文本效果
最新发布
2401_85341950的博客
07-19 538
WebKit，作为众多浏览器的核心引擎，支持一系列CSS文本效果，使开发者能够创造出引人注目的文本样式。本文将深入探讨WebKit对CSS文本效果的支持，并提供详细的解释和代码示例。请注意，本文提供了一个关于WebKit CSS文本效果的概述，包括代码示例和关键概念的解释。通过本文的介绍，你应该对WebKit的CSS文本效果有了基本的了解。通过本文，我们希望能够帮助开发者更好地利用WebKit的CSS文本效果，创造出更加丰富和吸引人的Web页面。通过媒体查询，可以为不同屏幕尺寸的设备应用不同的文本效果。
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值