【无标题】1.自行学习css盒子模型，编写一篇博客记录，并提交链接2.使用css+html完成一套完整电商(如京东、淘宝、拼多多、天猫等)页面，包含登录页、商品展示页、购物车、支付订单、个人中心等

佳ink

已于 2024-06-26 02:05:28 修改

阅读量145

点赞数 3

文章标签： javascript 前端 css

于 2024-06-26 02:04:33 首次发布

本文链接：https://blog.csdn.net/2402_84915958/article/details/139974445

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网页</title>
    <style>
        .tbsy{
            width: 1500px;
        }
        .dl {
            display: flex;
            height: 20px;
        }
        .dl > .zb >ul > li {
            float: left;
            display: flex;
            list-style-type: none;
            padding: 10px;
        }
        .dl >.yb > ul> li  {
            float: right;
            display: flex;
            list-style-type: none;
            padding: 10px;
        }

        .ssl{
            display: flex;
            height: 100px;
            margin: auto;
            width: 1000px;
            margin-top: 50px;
        }
        .ssl > tbtb{
            float: left;
            

        }
        .ssl > ss {
            margin: auto;
            
        }
        .ssl > lt{
            float: right;
        }

        .fl, .xh ,.sp{
            width: 1200px;
        }
        .fl{
            height: 500px;
            display: flex;
            margin: auto;
        }
        .xh{
            height:  50px;
        }
        .sp{
            height: 300px;
        }

        .fl >.lb {
            background-color: aquamarine;
            float: left;
            margin: auto;
        }
        .fl > .zj{
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-template-rows: repeat(2,1fr);
            grid-gap: 1px;
           
            
        }
        
        .fl > .lb > .j11{
            grid-area: 1/1/2/2;
            height: 150px;
            width: 240px;
        }
        .fl > .lb > .j12{
            grid-area: 2/1/3/2;
            height: 150px;
            width: 240px;
        }
        .fl > .lb > .j13{
            grid-area: 1/2/2/3;
            height: 150px;
            width: 240px;
        } 
        .fl > .lb > .j14{
            grid-area: 2/2/3/3 ;
            height: 150px;
            width: 240px;
        }
        .fl > .yb {
            width: 300px;
        }
        .fl > .yb > .zj{
            display: flex;
        }
        .fl > .yb > .sb{
            height: 150px ;
            margin: auto;
        }
        .fl > .yb >  .zj>.j1{
            height: 50px;
            width: 75px;
            background-color: chartreuse;
            
        }
        .fl > .yb >.zj> .j2{
            height: 50px;
            width: 75px;
            background-color: rgb(88, 248, 7);
            
        }
        .fl > .yb >.zj> .j3{
            height: 50px;
            width: 75px;
            background-color: rgb(66, 121, 11);
            
        }

        .fl >.yb > .wb{
            display: flex;
            
        }

        .fl > .yb > .wb > div{
            height: 50px;
            width: 70px;
        }

        .xh{
            display: flex;
            margin: auto;
        }
        .sp{
            display: flex;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="tbwz" >
    <div class="tbsy">
        <div class="dl">
            <div class="zb">
                <ul >
                    <li>
                        <select name="address" id="area">
                    
                            <option value="">中国大陆</option>
                            <option value="">中国香港</option>
                            <option value="">中国台湾</option>
                            <option value="">中国澳门</option>
                        </select>
                    </li>
                    <li><a href="https://login.taobao.com/member/login.jhtml?spm=a21bo.jianhua/a.754894437.1.5af92a89HnZdtR&f=top&redirectURL=https%3A%2F%2Fwww.taobao.com%2F">亲,请登录</a></li>
                    <li>手机逛淘宝</li>
                    <li>网页无障碍</li>
                </ul>
            </div>
            <div class="yb">
                <ul >
                    <li>
                        <select name="address" id="wdtb">
                            <option value="">我的淘宝</option>
                            <option value="">已买到的宝贝</option>
                            <option value="">我的足迹</option>
                        </select>
                    </li>
                    <li><img src="./屏幕截图 2024-06-02 121045.png" alt="">购物车</li>
                    <li><img src="./屏幕截图 2024-06-02 121058.png" alt="">收藏夹</li>
                    <li>商品分类</li>
                    <li>
                        <select name="address" id="mfkd">
                            <option value="">免费开店</option>
                            <option value="">对公支付</option>
                        </select>
                    </li>
                    <li>
                        <select name="address" id="qnmjzx">
                            <option value="">千牛卖家中心</option>
                            <option value="">开店入驻</option>
                            <option value="">已卖出的宝贝</option>
                            <option value="">售出中的宝贝</option>
                            <option value="">卖家服务市场</option>
                            <option value="">卖家培训中心</option>
                            <option value="">体检中心</option>
                            <option value="">电商学习中心</option>
                        </select>
                    </li>
                    <li>
                        <select name="address" id="wdtb">
                            <option value="">帮助中心</option>
                            <option value="">官方客服</option>
                            <option value="">商家客服</option>
                            <option value="">消息中心</option>
                            <option value="">意见反馈</option>
                            <option value="">举报中心</option>
                        </select>
                    </li>
                </ul>
            </div>
        </div>
    <div class="ssl">
        <div class="tbtb"> <img src="./QQ截图20240625211326.png" alt=""></div>
        <div class="ss">
            <div><p><input type="text" placeholder="你好宝贝"></p></div>
        </div>
        <div class="lt"><img src="./QQ截图20240625211342.png" alt=""></div>
    </div>
    <div class="fl">
        <div class="zb">
            <div class="wz">分类</div>
            <ul class="lb">
                <li>
                    <i></i>
                    <a href="">电脑</a>
                    <span>/</span>
                    <a href="">办公</a>
                    <span>/</span>
                    <a href="">文具</a>
                <li>
                    <i></i>
                    <a href="">工业品</a><span>/</span>
                    <a href="">商业</a><span>/</span>
                    <a href="">定制</a>
                </li>
                <li>
                    <i></i>
                    <a href="">家电</a><span>/</span>

                    <a href="">手机</a><span>/</span>
                    <a href="">数码</a>
                </li>
                <li>
                    <i></i>
                    <a href="">家具</a><span>/</span>
                    <a href="">家装</a><span>/</span>
                    <a href="">家居</a>
                </li>
                <li>
                    <a href="">女装</a><span>/</span>
                    <a href="">男装</a><span>/</span>
                    <a href="">内衣</a>
                </li>
                <li>
                    <a href="">女鞋</a><span>/</span>
                    <a href="">男鞋</a><span>/</span>
                    <a href="">运动</a>
                </li>
                <li>
                    <a href="">汽车</a><span>/</span>
                    <a href="">珠宝</a><span>/</span>
                    <a href="">箱包</a>
                </li>
                <li>
                    <a href="">食品</a><span>/</span>
                    <a href="">生鲜</a><span>/</span>
                    <a href="">健康</a>
                </li>
                <li>
                    <a href="">母婴</a><span>/</span>
                    <a href="">童装</a><span>/</span>
                    <a href="">潮玩</a>
                </li>
                <li>
                    <a href="">美妆</a><span>/</span>
                    <a href="">洗护</a><span>/</span>
                    <a href="">宠物</a>
                </li>
                <li>
                    <a href="">娱乐</a>
                    <span>/</span>
                    <a href="">图书</a><span>/</span>
                    <a href="">鲜花</a><span>/</span>
                </li>
            </ul>
        </div>
        <div class="zj">
            
                <div class="j11"><img src="./微信截图_20240625230309.png" alt=""></div>
                <div class="j12"><img src="./微信截图_20240625203829.png" alt=""></div>
            
            
                <div class="j13"><img src="./QQ截图20240625204040.png" alt=""></div>
                <div class="j14"><img src="./QQ截图20240625204114.png" alt=""></div>
            
        </div>
        <div class="yb">
            <div class="sb">
                <img src="./getAvatar.jpeg" alt="">
                <p>佳好</p>
            </div>
            <div class="zj">
                <div class="j1"><li>登录</li></div>
                <div class="j2"><li>注册</li></div>
                <div class="j3"><li>开店</li></div>
            </div>
            <div class="wb">
                <div>
                    <div><img src="./QQ截图20240625204454.png" alt=""></div>
                    <p>宝贝收藏</p>
                </div>
                <div>
                    <div><img src="./QQ截图20240625204504.png" alt=""></div>
                    <p>买过的店</p>
                </div>
                <div>
                    <div><img src="./QQ截图20240625204513.png" alt=""></div>
                    <p>收藏的店</p>
                </div>
                <div>
                    <div><img src="./QQ截图20240625204529.png" alt=""></div>
                    <p>我的足迹</p>
                </div>
                
            </div>
        </div>
    </div>
    <div class="xh">
        <div class="cwxh"><img src="./QQ截图20240625204556.png" alt=""></div>
        <div class="cdsm"><img src="./QQ截图20240625204606.png" alt=""></div>
        <div class="fsss"><img src="./QQ截图20240625204614.png" alt=""></div>
        <div class="ydhw"><img src="./QQ截图20240625204624.png" alt=""></div>
        <div class="jxsh"><img src="./QQ截图20240625204634.png" alt=""></div>
        
    </div>
    <div class="sp">
        <div>
            <img src="./微信截图_20240625204647.png" alt="">
            
        </div>
        <div>
            <img src="./QQ截图20240625204659.png" alt="">
            
        </div>
        <div>
            <img src="./QQ截图20240625204711.png" alt="">
            
        </div>
        <div>
            <img src="./微信截图_20240625204725.png" alt="">
            
        </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>
    <style>
        .dl {
            display: flex;
            height: 20px;
        }
        .dl > .zb >ul > li {
            float: left;
            display: flex;
            list-style-type: none;
            padding: 10px;
        }
        .dl >.yb > ul> li  {
            float: right;
            display: flex;
            list-style-type: none;
            padding: 10px;
        }
        .sb > div{
            display: flex;
            height: 350px;
            width: 900px;
        }
        .sb > .zb{
            width: 300px;
            float: left;
        }
        .sb > .yb{
            width: 550px;
            margin-left: 50px;
            float: right;
        }
        .gm{
            display: flex;
            margin: auto;
            margin-right: 200px;
        }
        
        .ljgm{
            height: 65px;
            width: 100px;
            background-color: cadetblue;
        }
        .jr{
            height: 65px;
            width: 100px;
            background-color: rgb(8, 235, 243);
        }
        .sc{
            height: 65px;
            width: 100px;
            background-color: rgb(214, 242, 243);
        
        }
        .wb{
            display: flex;
        }
        .gm{
            float: right;
        }
    </style>
</head>
<body>
    <div class="">
        <div class="sym">
            <div class="sb">
                <div class="zb">
                    <div class="sptp"><img src="./微信截图_20240625204647.png" alt=""></div>
                </div>
                <div class="yb">
                        <div>
                            <div class="spjs"><strong>米菲兔联名金号毛巾纯棉卡通可爱儿童情侣洗脸巾家用浴巾吸水A类</strong>
                    
                            <img src="./QQ截图20240626005832.png" alt="">
                            <p>配&nbsp;&nbsp;&nbsp;送:
                            山东聊城&nbsp;至&nbsp;
                            长沙市&nbsp;望城区<br>
                            快递: &nbsp;免运费
                            &nbsp;预计17小时内发货，预计3天内</p>
                        </div>
                
                <div class="gm">
                    <div class="ljgm">立即购买</div>
                    <div class="jr">加入购物车</div>
                    <div class="sc">收藏</div>
                </div>
            </div>
            </div>
            <div class="xb">
                <div><img src="./QQ截图20240626005123.png" alt=""></div>
                <div><img src="./QQ截图20240626005133.png" alt=""></div>
                <div><img src="./QQ截图20240626005142.png" alt=""></div>
                <div><img src="./QQ截图20240626005156.png" alt=""></div>
            </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>
    <style>
        .dljm{
            height: 650px;
            width: 800px;
        }
        .zb{
            float: left;
        }
        .dl{
            height: 50px;
            width: 300px;
            margin-top: 30px;
            background-color: chocolate;
            margin: auto;
            text-align: center;
        }
        .j1{
            display: flex;
            list-style: 10px;
        }
        .yb{
            float:right;
            
        }
        
    </style>
</head>
<body>
    <div>
        <div class="dljm">
            <div class="zb">
                <div class="mmdl">
                    <span>密码登录</span> &nbsp;&nbsp;&nbsp;<span>短信登录</span>
                </div>
                <div>
                    <p><input type="text" placeholder="天才从不留姓名"></p>
                    <p><input type="password" placeholder="谁能奈我何"></p>
                </div>
                <div class="dl">
                   <p> 登录</p>
                </div>
                <div class="zfbdd">
                    <div class="j1">
                        <div class="zfb"><img src="" alt="">支付宝登录</div>
                        <div class="dd"><img src="" alt="">钉钉登录</div>
                    </div>
                    <div class="j2">免费注册&nbsp;&nbsp;忘记账户名&nbsp;&nbsp;忘记密码</div>
                </div>
            </div>
            <div class="yb" >
                <div class="sjcm">手机扫码安全登录</div>
                <div class="tp" ><img src="./微信图片_20240319225330.jpg" alt="" style="width: 350px; height: 350px;"></div>
            </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>css盒子</title>
    <style>
    * {
        font-size: 16px;
        }
        .j1 {
        height: 60px;
        width: 200px;
        background-color: black;
        }
        
        .j2 {
        height: 60px;
        width: 30%;
        
        background-color: red;
        }
        </style>
</head>
<body>
        <div class="j1">hahaha</div>
        <p>
        
        <div class="j2">haha</div>
    
</body>
</html>