布局划分。float运用以及模块命名,重要的是命名一样,代码多用 减少重复代码

原创2018-11-22 13:31:4981
摘要:<!DOCTYPE html><html><head>    <meta charset="utf-8"> <title>小米商城</title> <link rel="shortcut icon" type='image/x-icon' hre

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>小米商城</title>

<link rel="shortcut icon" type='image/x-icon' href='img/footlogo.png'>

<link rel='stylesheet' type='text/css' href='font-awesome/css/font-awesome.min.css'>

    <link rel="stylesheet" type='text/css' href="css/style.css">

</head>

<body>

<!--头部-->

<div class="header">

    <div class="menu"></div>

</div>


<!--主体部分-->

<div class="contents">

    <div class="content">

         <div class="contentMenu"></div>

         <div class="contentPic">

              <div class="contentPic_l"></div>

              <div class="contentPic_r"></div>

         </div>

         <div class="clear"></div>

         <div class="contentPic_ul">

               <div class="contentPic_ul_1"></div>

               <div class="contentPic_ul_0" style="background:url(img/midAD1.jpg); margin-right:13px;"></div>

               <div class="contentPic_ul_0" style="background:url(img/midAD2.jpg); margin-right:13px;"></div>

               <div class="contentPic_ul_0" style="background:url(img/midAD3.jpg)"></div>

         </div>

         <div class="clear"></div>

         <!--小米闪购-->

         <div class="contentShop">

              <h1>小米闪购</h1>

              <div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid red;"></div>

              <div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid red;"></div>

              <div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid red;"></div>

              <div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid red;"></div>

              <div class="contentShop_1" style="border-top:1px solid red;"></div>

         </div>

         <div class="clear"></div>

         <div class="contentImg" style="background:url(img/longAD1.jpg)"></div>

         <div class="contentUL">手机</div>

         <div class="contentPhone">

               <div class="contentPhone_l"></div>

               <div class="contentPhone_r">

                   <div style="margin-right:12.7px;"></div>

                   <div style="margin-right:12.7px;"></div>

                   <div style="margin-right:12.7px;"></div>

                   <div ></div>

                   <div style="margin-right:12.7px;margin-top:12px;"></div>

                   <div style="margin-right:12.7px;margin-top:12px;"></div>

                   <div style="margin-right:12.7px;margin-top:12px;"></div>

                   <div style="margin-top:12px;"></div>

               </div>

         </div>


         <div class="contentImg" style="background:url(img/longAD2.jpg)"></div>

           <div class="contentUL">智能</div>

         <div class="contentPhone">

               <div class="contentPhone_0" style="margin-right:12.7px;background:url(img/buy/家电AD1.jpg);"></div>

               <div class="contentPhone_1" style="margin-right:12.7px;"></div>

               <div class="contentPhone_1" style="margin-right:12.7px;"></div>

               <div class="contentPhone_1" style="margin-right:12.7px;"></div>

               <div class="contentPhone_1"></div>

               <div class="contentPhone_0" style="margin-right:12.7px;margin-top:12px;background:url(img/buy/家电AD2.jpg);"></div>

               <div class="contentPhone_1" style="margin-right:12.7px; margin-top:12px;"></div>

               <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12px;"></div>

               <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12px;"></div>

               <div class="contentPhone_1" style='margin-top:12px;'>

                    <div class="contentPhone_1_t"></div>

                    <div class="contentPhone_1_d"></div>

               </div>


         </div>

         <div class="contentImg" style="background:url(img/longAD3.jpg)"></div>

          <div class="contentUL">家电</div>

         <div class="contentPhone">

               <div class="contentPhone_0" style="margin-right:12.7px;background:url(img/buy/智能AD1.jpg);"></div>

               <div class="contentPhone_1" style="margin-right:12.7px;"></div>

               <div class="contentPhone_1" style="margin-right:12.7px;"></div>

               <div class="contentPhone_1" style="margin-right:12.7px;"></div>

               <div class="contentPhone_1"></div>

               <div class="contentPhone_0" style="margin-right:12.7px;margin-top:12px;background:url(img/buy/智能AD2.jpg);"></div>

               <div class="contentPhone_1" style="margin-right:12.7px; margin-top:12px;"></div>

               <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12px;"></div>

               <div class="contentPhone_1" style="margin-right:12.7px;margin-top:12px;"></div>

               <div class="contentPhone_1" style='margin-top:12px;'>

                    <div class="contentPhone_1_t"></div>

                    <div class="contentPhone_1_d"></div>

               </div>

         </div>

         <div class="contentImg" style="background:url(img/longAD4.jpg)"></div>

    </div>

</div>


<!--底部-->

<div class="footers">

     <div class="footer">网页底部</div>

</div>

</body>

</html>


发布手记

热门词条