第三次作业

2301_81637433

于 2024-06-27 11:22:29 发布

阅读量186

点赞数 2

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/2301_81637433/article/details/140005904

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东登录页面</title>
    <style>
        .top{
            padding-left: 100px;
        }
        .top2{
           background-color:rgba(248, 198, 207, 0.747);
           text-align: center; 
           padding-top: 18px;
           width: 1400px;
           height:40px;

        }
        .middle{
            width: 1400px;
           height:500px;
           background-color: rgba(221, 9, 44, 0.856);
            align-items: center;
        }
        .middle img{
            margin-left: 250px;
        }
        .dl{
            border: 0px solid ;
            border-radius: 20px;
            float: right;
            width: 250px;
            height:250px;
            background-color: white;
            margin-top: 50px;
            padding: 40px 20px 0px 20px;
            margin-right: 200px;
            vertical-align: center;
            
        }
        .mmdl,.dxdl{
            line-height: 50px;
        }
        .mmdl{
            color: red;
            font-size: 20px;
            font-family: "微软雅黑";

        }
        .dxdl{
            font-size: 20px;
            font-family: "微软雅黑";
        }
        .input{
            /* border:1px solid grey ; */
            width: 350px;
            height: 50px;
            line-height: 10px;
            margin-top: 10px;
            margin-bottom: -25px;
        }
        .wjmm{
            font-size: 10px;
            font-family: "微软雅黑";
            color: #666;
            float: right;
        }
        .signin{
            font-size: 15px;
            font-family: "微软雅黑";
            width: 260px;
            height: 40px;
            background-color: rgba(253, 129, 156, 0.5);
            color: white;
        }
        .dlfs{
            
            border: 1px solid rgba(226, 223, 223, 0.377);
             width: 270px; 
             height: 300px;
            /* margin-top: 30px; */
            margin-bottom: 0px;
            padding-bottom: 0px;
            text-align: center;
            background-color:rgba(226, 223, 223, 0.377);
            font-size: 15px;
            font-family: "微软雅黑";
            color: #666;
        }
        .bottom ul li{
            display: inline;
            color: grey;
            text-align: center;
            font-family: "微软雅黑";
            /* padding-left: 100px; */
            /* float: left; */
        }
        .bottom ul{
        
            text-align:center;
         }
         p{
            /*注意：p前不用加. */
            font-size: 12px;
            text-align: center;
            color: #666;
        }
        a{
            color: #666;


    }
        
    </style>
</head>
<body>
    <!-- 头 -->
    <div class="top">
        <div class="logo"><img src="./京东logo.png" alt=""></div>
    </div>
    <div class="top2">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</div>
    <!-- 体 -->
    <div class="middle">
        <img src="./京东中间.png" width="500px" height="500px">
        <div class="dl">
            <span class="mmdl">密码登录</span> &nbsp;&nbsp;&nbsp;
            <span class="dxdl">短信登录</span>
            <div class="input" width:350px height:50px><input type="text" placeholder="账户名/手机号/邮箱" name="userAccount"></div>
            <div class="input"><input type="password" placeholder="密码" name="userPassword"></div>
            <span class="wjmm">忘记密码</span>
            <br>
            <button type="submit" class="signin"><a href="https://www.jd.com/?cu=true&utm_source=haosou-search&utm_medium=cpc&utm_campaign=t_262767352_haosousearch&utm_term=39245174717_0_dcf09582e1b2479da7b3615be4be4e82"></a>登&nbsp;&nbsp;&nbsp;录</button>
            <br>
            <span class="dlfs">QQ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;立即注册</span>
        
        
        </div>
    <!-- 尾部 -->
        <div class="bottom">
        <ul type-"disc">
            <li><a href="https://www.baidu.com/" >关于我们</a><span>&nbsp|</span></li>
            <li><a href="https://www.baidu.com/" >联系我们</a><span>&nbsp|</span></li>
            <li><a href="https://www.baidu.com/" >人才招聘</a><span>&nbsp|</span></li>
            <li><a href="https://www.baidu.com/" >商家入驻</a><span>&nbsp|</span></li>
            <li><a href="https://www.baidu.com/" >广告服务</a><span>&nbsp|</span></li>
            <li><a href="https://www.baidu.com/" >手机京东</a><span>&nbsp|</span></li>
            <li><a href="https://www.baidu.com/" >友情链接</a><span>&nbsp|</span></li>
            <li><a href="https://www.baidu.com/" >销售联盟</a><span>&nbsp|</span></li>
            <li><a href="https://www.baidu.com/" >京东社区</a><span>&nbsp|</span></li>
            <li><a href="https://www.baidu.com/" >京东公益</a><span>&nbsp|</span></li>
        </ul>
        <p>Copyright&copy;2004-2024&nbsp;&nbsp;  京东JD.com 版权所有</p>
        </div>
    </div>

</body>
</htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        
        .a{
            height: 50px;
        }
        .a ul{
            display: inline-block;
        }
        .a>ul li{
            display: inline-block;
            margin-left: 20px;
            margin-top: 10px  ;
            list-style: none;
        }
        .a>ul a{
            text-decoration: none;
            color: black;
         }
        .top{width: 1280px}
        .logo,.search,.c{
            display:inline-block;
        }
        .logo{
            width: 180px;
        }
        .c{
            width:80px;
        }
        .logo{
            float: left;
        }
        .search{
            width: 880px;
        }
        .search>.box{
            margin-left: 120px;
            margin-top: 30px;
        }
        .search>ul li{
            display: inline-block;
            margin-top: 0px;
            /* margin-left: 10px; */
            
        }
        .text{
            border: 1px solid red;
            height:30px;
            width: 600px;
        }
        .submit{
            height: 30px;
            width: 50px;
            background-color: red;
            
        }
        /* .c{
            margin-right: 0px;
            margin-top:0px; 
        } */
        .zb{
            width: 1400;
            height: 200px;
            background-color: white;
        }
        .middle_left,.middle_middle,.middle_right{
          display:inline-block;
         }
         .middle_left,.middle_right{
            width:250px;
         }
         .middle_left>ul{
            border: 1px solid white;
            background-color: white;
            margin: center;
            list-style-type: none;
         }
         .middle_left>ul a{
            text-decoration: none;
            color: black;
         }
        .middle_middle{
            width:400px;
            margin-left: 0px;
         }
         .middle_right{
           /* float: right; */
           margin-left: 100px;
         }
         /* 尾部 */
         .foot>.box1 {
            height: 400px;
            width: 900px;
            margin-left: 50px;
            position: absolute;
            margin-top: 200px;
         }
         .box1>span{
            font-size: 25px;
            color: grey;
            margin-left: 45px;
            margin-left: 400px;
            margin-top: 200px;
         }
         
         .box1>.box2{
            /* display: grid; */
            width: 900px;
            height: 200px;
            display: grid;
            grid-gap: 5px;
            margin-top: 50px;
            margin-left: 50px;
            grid-template-columns:repeat(5,1fr);
            grid-template-rows:repeat(2,1fr);
         }
         .box2>div{
            border: 1px solid white;
            background-color: whitesmoke;
            height: 200px;
         }
    </style>
</head>
<body>
    <div class="daohanglan">
        <div class="a">
            <ul>
                <li><a href="#">湖南</a></li>
                <li><a href="#">切换至企业版</a></li>
                <li> <a href="#"> 你好，请登录</a></li>
                <li> <a href="#">免费注册</a></li> 
                <li> <a href="#">我的订单&nbsp;&nbsp;&nbsp;|</a></li> 
                <li> <a href="#">我的京东&nbsp;&nbsp;&nbsp;|</a></li> 
                <li> <a href="#">企业采购&nbsp;&nbsp;&nbsp;|</a></li> 
                <li> <a href="#">商家服务&nbsp;&nbsp;&nbsp;|</a></li> 
                <li> <a href="#">网站导航&nbsp;&nbsp;&nbsp;|</a></li> 
                <li> <a href="#">手机京东&nbsp;&nbsp;&nbsp;|</a></li> 
                <li> <a href="#">网站无障碍</a></li> 
            </ul>
        </div>
    </div>
    <div class="top">
        <div class="logo">
            <a href="" ><img src="../京东logo.png" alt=""></a>
        </div>
        <div class="search">
            <form action="" class="box">
                <input type="text" class="text"  >
                <input type="submit" class="submit" value="搜索" >
            </form>
       
            <!-- 搜索框底下的关键词 -->

        <ul>
            <li>电脑数码&nbsp;&nbsp;&nbsp;</li>
            <li>拍卖&nbsp;&nbsp;&nbsp;</li>
            <li>京东超市&nbsp;&nbsp;&nbsp;</li>
            <li>京东手机&nbsp;&nbsp;&nbsp;</li>
            <li>京东生鲜&nbsp;&nbsp;&nbsp;</li>
            <li>京东家电&nbsp;&nbsp;&nbsp;</li>
            <li>企业会员&nbsp;&nbsp;&nbsp;</li>
            <li>大牌奥莱&nbsp;&nbsp;&nbsp;</li>
            <li>进口好物&nbsp;&nbsp;&nbsp;</li>
            <li>京东五金城&nbsp;&nbsp;&nbsp;</li>
        </ul>
        <!-- 搜索框右边 -->
        <!-- <div class="c">
            <img src="./京东搜索框右边部分.png" width="195px">
        </div> -->
    </div>
    <!-- 中部 -->
    <div class="zb">
        <div class="middle_left">
            <ul>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">手机</a>/<a href="#">运用商</a>/<a href="#">数码</a></li>
                <li><a href="#">电脑</a>/<a href="#">办公</a>
                <li><a href="#">家居</a>/<a href="#">家居</a>/<a href="#">家装</a>/<a href="#">厨具</a></li>
                <li><a href="#">男装</a>/<a href="#">女装</a>/<a href="#">童装</a>/<a href="#">内衣</a></li>
                <li><a href="#">美妆</a>/<a href="#">个护清洁</a>/<a href="#">宠物</a></li>
                <li><a href="#">女鞋</a>/<a href="#">箱包</a>/<a href="#">钟表</a>/<a href="#">珠宝</a></li>
                <li><a href="#">男鞋</a>/<a href="#">运动</a>/<a href="#">户外</a></li>
                <li><a href="#">房产</a>/<a href="#">汽车</a>/<a href="#">汽车用品</a></li>
                <li><a href="#">母婴</a>/<a href="#">玩具乐器</a></li>
                <li><a href="#">食品</a>/<a href="#">酒类</a>/<a href="#">生鲜</a>/<a href="#">特产</a></li>
                <li><a href="#">艺术</a>/<a href="#">礼品鲜花</a>/<a href="#">农资绿植</a></li>
                <li><a href="#">京东买药</a>/<a href="#">计生情趣</a>
                <li><a href="#">图书</a>/<a href="#">文娱</a>/<a href="#">教育</a>/<a href="#">电子书</a></li>
                <li><a href="#">机票</a>/<a href="#">酒店</a>/<a href="#">旅游</a>/<a href="#">生活</a></li>
                <li><a href="#">支付</a>/<a href="#">白条</a>/<a href="#">保险</a>/<a href="#">企业金额</a></li>
                <li><a href="#">安装</a>/<a href="#">维修</a>/<a href="#">清洗</a>/<a href="#">二手</a></li>
                <li><a href="#">元器件</a>/<a href="#">原材料</a>/<a href="#">五金机电</a></li>
                </ul>
        </div>

        <div class="middle_middle">
            <a href="#"><img src="./京东商品页中间图.png" alt=""></a>
        </div>
        <div class="middle_right">
            <div class="r1">
                <div><a href="#"><img src="./r1.png" alt=""></a></div>
                <div><a href="#"><img src="./r2.png" alt=""></a></div>
                <div><a href="#"><img src="./r3.png" alt=""></a></div>
                <div><a href="#"><img src="./r4.png" alt=""></a></div>   
            </div>
        </div>
    </div>
    <!-- 尾部商品展示 -->
     <div class="foot">
        <div class="box1">
            <span>为你推荐</span>
            <div class="box2">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</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>
        /* 头部 */
        .a{
            height: 100px;
        }
        .a1,.a2,.a3,.a4{
            height: 100px;
            display: inline-block;
            
        }
        /* 京东logo */
        .a1{
            width: 16%;
            margin-left: 150px;
        }
        /* 分类下拉框 */
        .a2{
            width: 10%;
           vertical-align: middle;
           
        }
        /* 搜索框box */
        .a3{
            width: 38%;
            vertical-align: middle;
        }
        /* 搜索输入框 */
        .a3>.search .text{
            border: none;
            height: 30px;
            width: 400px;
            border: 2px solid brown;
            margin-left: 80px;
        }
        /* 提交框1 */
        span>.submit1{
            border: none;
            height: 34px;
            width: 50px;
            margin-top: 2px;
            margin-left: -4px;
            background-color: brown;
            color: white;
            font-family: "楷体";
        } 
        /* 提交框2 */
        span>.submit2{
            border: none;
            height: 34px;
            width: 50px;
            margin-top: 2px;
            margin-left: -5px;
            background-color: rgb(101, 100, 100);
            color: white;
            font-family: "楷体";
        }
       /* 搜索框下面的文字 */
        .a3>ul li{
          list-style: none;
          display: inline-block;
         margin-left: 10px;
         font-size: 12px;
         font-family: "微软雅黑";
         position: relative;
         left: 0;
        }
        /* 购物框 */
        .a4{
            width: 19%;
            vertical-align: middle;
        }
        .a4>input{
            border: none;
            height: 30px;
            width:120px ;
            border: 1px solid rgb(174, 174, 174);
            
            font-family: "黑体";
            margin-left: 70px;
            font-size: 15px;
            color: rgb(251, 251, 251);
        }
       
 
 
 
        /* 店名 */
       .b{
            height: 120px;
        }
 
 
 
 
        /* 导航栏商品选择*/
        .c{
            height: 40px;
            background-color: rgba(0, 0, 0, 0.308);
           
        }
        /* 左边 */
        .c1{
            display: inline-block;
            margin-left: 200px;
        }
        .c1>ul li{
            list-style: none;
            display: inline-block;
             color: white;
            font-size: 16px;
            margin-left: 30px;  
            margin-top: 0px;
        }
        .c1>ul li:hover{
            color: red;
        }
        .c .c11{
            border: none;
            background-color: rgba(0, 0, 0, 0.205);
            color: white;
            font-size: 16px;
        }
        /* 右边导航搜索框 */
       .c>span{
       margin-left: 150px;
       }
 
 
 
 
 
       /* 商品导航栏介绍 */
       .d{
        height: 20px;
        background-color: rgb(206, 201, 201);
        }
       .d>ul{ 
        margin-left: 200px;
       
       }
       .d>ul>li{
        list-style: none;
        display: inline-block;
        margin-left: 20px;
        font-family: "微软雅黑";
        font-size: 13px;
       
       }
 
       
       
        /* 商品样式 */
        .e{
            height: 700px;
        }
        .e>div{
           height:  690px;
            display: inline-block;
            /* border: 1px solid red; */
        }
        .e1{
            width: 28%;
            vertical-align: top;
        }
 
        /* 左边商品展示 */
        .e1>.e11{
            margin-top: 15px;
            margin-left: 120px;
        }
        .e1>.e12, .e1>.e13{
          margin-left: 120px;
      
        }
        .e1>.e12>div,.e1>.e13>div{
            margin-top: 20px;
            display: inline-block;
            padding-left: 15px;
        }
        .e13>.e132{
           margin-left: 210px;
        }
        .e131:hover,.e132:hover{
            color: red;
        }
 
        /* 中间具体商品展示 */
        .e2{
            width: 40%;
        }
        .e2>div{
            margin-left: 100px;
        }
        /* 商品名称 */
        .e21{
            margin-top: 25px;
            color: rgb(102, 102, 102) ;
            font-size: 16px;
        }
        .e22>img{
            height: 150px;
        }
        /* 配送地址、配送时间 */
        .e23>.e232,.e23>.e233,.e23>.e234{
            margin-left:100px ;
        }
       .e232>ul li,.e233>ul li{
            display: inline-block;
            list-style: none;
            color: rgb(112, 162, 243);
            margin-left: 20px;
            margin-top: 10px;
            font-size: 14px;
        }
        
        .e2321{
            border: none;
        }
        .e23>.e234>div{
            margin-left:100px ;
            font-size: 13px;
            margin-top: 10px;
        }
        .e234>span{
            color: red;
            
        }
        .e24>img{
            width: 400px;
            height: 200px;
        }
 
        /* 右边推荐商品 */
        .e3{
            width: 28%;
            height: 590px;
            position: absolute;
           right: 0;
           top:35%;
        
        }
        .e3>div{
            margin-left: 80px;
            margin-top: 10px;
        }
        .e3>span{
            margin-top: 10px;
            margin-left: 140px;
            font-family:"微软雅黑" ;
            font-size: 20px;
            color: rgb(90, 88, 88);
        }
      
    </style>
</head>
<body>
 
 
    <!-- 头部 总搜索框-->
    <div class="a">  
        <!-- 京东logo -->
        <div class="a1"><img src="./京东logo.png" width="210px" height="80px" alt=""></div>
        <!-- 全部分类下拉框 -->
        <div class="a2">
            <select name="" id="">
                <option value="">全部分类</option>
                <option value="">家用电器</option>
                <option value="">数码</option>
                <option value="">...</option>
            </select>
        </div>
 
 
    <!-- 搜索框box -->
        <div class="a3">
          <div  class="search">
            <input type="text" class="text">
           <span> <input type="submit"  class="submit1" value="搜全站">
            <input type="submit"  class="submit2" value="搜本店"></span>
          </div>
            <ul>
                <li>箱包皮具</li>
                <li>女包</li>
                <li>女士双肩包</li>
                <li>三福</li>
                <li></li>
            </ul>
        </div>
        <!-- 我的购物车下拉框 -->
        <div class="a4"><input type="text"  placeholder="我的购物车&nbsp;&nbsp;&nbsp;>"></div>
    </div>

    <!-- 导航栏商品选择 -->
    <div class="c"> 
        <div class="c1">
            <ul>
                <li>首页</li>
                <li>
                    <select name="" class="c11" id="">
                        <option value="">全部分类</option>
                        <option value="">男装专区</option>
                        <option value="">鞋子专区</option>
                        <option value="">夹克</option>
                        <option value="">针织衫</option>
                        <option value="">会员专区</option>
                    </select>
                </li>
                <li>全部分类</li>
                <li>男装专区</li>
                <li>鞋子专区</li>
                <li>夹克</li>
                <li>针织衫</li>
                <li>会员专区</li>
            </ul>
        </div>
        <span> <input type="text" class="c12">
            <input type="submit" class="c13" value="搜索"></span>
        
    </div>
 
    <!-- 商品导航栏介绍 -->
    <div class="d">
        <ul>
            <li>箱包皮具</li>
            <li>></li>
            <li>女包</li>
            <li>></li>
            <li>女士双肩包</li>
            <li>></li>
            <li>三福</li>
        </ul>
    </div>
 
 
    <!-- 商品样式 -->
    <div class="e">
        <!-- 官网下载图片 -->
        <div class="e1">
           <div class="e11"> <img src="./商品图.png" height="400px" width="400px" alt=""></div>
            <div class="e12">
                <div><img src="https://img10.360buyimg.com/n5/s50x66_jfs/t1/227944/29/21525/60499/667b7d8dFfbdd1128/ba7b2aa7398c7002.jpg!cc_50x66" height="80px" width="80px" alt=""></div>
                <div><img src="https://img10.360buyimg.com/n5/s50x66_jfs/t1/218896/37/39230/60611/662a0d72Fe63cda41/044e1638fd11e16d.jpg!cc_50x66" height="80px" width="80px" alt=""></div>
                <div><img src="https://img10.360buyimg.com/n5/s50x66_jfs/t1/123734/20/44550/42557/662a0d72Fb4c9d8b7/99ce30977da22d48.jpg!cc_50x66" height="80px" width="80px" alt=""></div>
                <div><img src="https://img10.360buyimg.com/n5/s50x66_jfs/t1/235194/33/16585/61532/662a0d73Ffb901a11/d27532a1f6d4dbb8.jpg!cc_50x66"height="80px" width="80px"  alt=""></div>
                <div><img src="https://img10.360buyimg.com/n5/s50x66_jfs/t1/133949/1/41894/50364/662a0d73Fdb8889b3/e7c319a96f899cc2.jpg!cc_50x66"height="80px" width="80px"  alt=""></div>
            </div>
            <div class="e13">
                <div class="e131"><a href="#">关注</a></div>
                <div class="e132"><a href="#">举报</a></div>
            </div>
        </div> 
 
        <!-- 中间的商品具体介绍 -->
        <div class="e2">
            <!-- 商品名称 -->
            <div class="e21">当季新品 三福背包夏季芭蕾运动风少女感甜美蝴蝶结双口袋双肩包485632 精白 大</div>
            <!-- 价格 -->
            <div class="e22"><img src="./价格图.png" width="600px" height="200px" alt=""></div>
            <!-- 配送地址 、配送时间 -->
            <div class="e23">
                <div class="e231">配&nbsp;送&nbsp;至
                    <select name="" id="">
                        <option value="">湖南省长沙市望城区丁字湾镇芙蓉北路</option>
                    </select>
                    <span>有货</span>
                <div>
                <div class="e232">
                    <ul>
                        <li>支持&nbsp;&nbsp;&nbsp;晚发赔</li>
                        <li>|</li>
                        <li>可配送全球</li>
                        <li>|</li>
                        <li>店铺发货&售后</li>
                        <li>|</li>
                        <li>
                            <select name="" class="e2321" id="">
                                <option value="">七天价保</option>
                                <option value="">过敏无忧</option>
                                <option value="">免费上门退换</option>
                                <option value="">破损退换</option>
                                <option value="">闪电退款</option>
                            </select>
                        </li>
                    </ul>
                </div>
                <div class="e233">
                    <ul>
                        <li>京东物流</li>
                        <li>后天达</li>
                        <li>|</li>
                        <li>预约送货</li>
                        <li>|</li>
                        <li>部分发货</li>
                    </ul>
                </div>
                <div class="e234">由<span>三福官方旗舰店</span>发货,并提供售后服务, 6月22日-6月28日的订单预计在6月29日前发货,请您耐心等待,详细请联系商家客服</div>
                
            </div>
            <!--选择商品的款式 -->
            <div class="e24"><img src="./商品样式.png" width="600px" alt=""></div>
         <hr>
        </div> 
 
        <!-- 右边推荐商品 -->
         <div class="e3">
            <span>看了又看</span>
            <div><img src="./又看1.png" width="200px" height="200px" alt=""></div>
            <div><img src="./又看2.png" width="200px" height="200px" alt=""></div>
            <div><img src="./又看3.png" width="200px" height="200px" 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>
        .box{
            /* 盒子模型由
            内容区域（可设置 内容区域的宽高）、
            内间距（padding）、
            边框（border）、
            外边距（margin）组成 */
        width: 1200px;
        height: 650px;
        padding: 50px;
        border:10px solid red;
        margin: 30px;
        /* 因为外边距的不计算在内，所以盒子的的宽为1320，高为770； */
        /*盒子尺寸的设计默认content-box是内容区域，
        若改为border-box,则此时的1200px是盒子的总宽度的意思， 而不再是1320*/
        box-sizing:border-box;
        /* 常用替换元素有
        <iframe/》、<img/>、<video/> */
    }   
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>