布局划分从一小块一小块开始,每次浮动不忘清除浮动,

原创 2018-11-22 11:45:41 162
摘要:<!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>

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

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

         <div class="contentPhone"></div>

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

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

         <div class="contentPhone"></div>

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

    </div>

</div>


<!--底部-->

<div class="footers">

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

</div>

</body>

</html>


发布手记

热门词条