layer的变动

    1. body{
    2.   margin: 0;
    3.   background-color: #f4f4f4;
    4. }
    6. .clearfix::after{
    7.   content: "";
    8.   display: table;
    9.   clear: both;
    10. }
    11. /* 因为不止最上面的大div要用width100%，min-width，
    12. 每一层都要用到，所以单独抽出个类，就不用每次都写了，而是写上类名，
    13. 用类名代替这些css代码，把css样式封装成一个一个的类，在css上少写，在html上多写类名  */
    14. .layer{
    15.   /* width: 100%;
    16.   min-width: 1190px; */
    18.   width: 1190px;
    19.   margin: 0 auto;
    20. }
    22. .t-nav-cover{
    23.   /* width: 100%;
    24.   min-width: 1190px; */
    26.   width: 100%;
    27.   min-width: 1190px;
    29.   height: 35px;
    30.   background-color: #f5f5f5;
    31.   border-bottom: 1px solid #eee;
    32. }
    34. .t-nav-cover .site-nav{
    35.   /* width: 1190px; */
    36.   height: 35px;
    37.   /* margin: 0 auto; */
    38.   background-color: #000;
    39. }
    41. .main-nav-cover{
    42.   width: 100%;
    43.   min-width: 1190px;
    44. }
    46. .t-main-cover{
    47.   width: 100%;
    48.   min-width: 1190px;
    49.   /* width: 100%; */
    50.   /* height: 121px; */
    51.   background-color: #fff;
    52. }
    54. .t-main-cover .main-belt{
    55.   /* width: 1190px; */
    56.   height: 121px;
    57.   /* margin: 0 auto; */
    58.   background-color: orange;
    59. }
    61. .main-nav-cover .main-nav{
    62.   /* width: 1190px; */
    63.   height: 30px;
    64.   /* margin: 0 auto; */
    65.   background-color: #ff5000;
    66. }
    68. .main-show-area{
    69.   /* width: 1190px; */
    70.   /* height: 632px; */
    71.   /* margin: 0 auto; */
    72.   /*可以删掉 */
    73.   /* background-color: #666; */
    74. }
    77. /* .main-show-area .main-show-box{
    78. float: left;
    79. height: 100%;
    80. }
    82. .main-show-area .main-show-box.main-area{
    83. width: 900px;
    84. background-color: pink;
    85. }
    87. .main-show-area .main-show-box.funcs-area{
    88. width: 290px;
    89. background-color: purple;
    90. } */
    95. /* .main-show-area .main-show-box{
    96. float: left;
    97. height: 100%;
    98. } */
    100. .main-show-area .main-area{
    101.   float: left;
    102.   width: 900px;
    103.   /* height: 100%; */
    104.   height: 632px;
    105.   /* background-color: pink; */
    106. }
    108. .main-show-area .main-area .main-show{
    109.   height: 522px;
    110.   /* background-color: pink; */
    111.   margin-bottom: 10px;
    112. }
    114. .main-show-area .main-area .main-show .nav-menu-list{
    115.   float: left;
    116.   width: 190px;
    117.   height: 100%;
    118.   background-color: blue;
    119. }
    121. .main-show-area .main-area .head-line{
    122.   width: 890px;
    123.   height: 100px;
    124.   margin-right: 10px;
    125.   background-color: green;
    126. }
    128. .main-show-area .main-area .main-show .sliders-wrap{
    129.   float: left;
    130.   width: 520px;
    131.   height: 512px;
    132.   margin: 10px 0 0 10px;
    133.   /* background-color: pink; */
    134. }
    136. .main-show-area .main-area .main-show .sliders-wrap .main-slider{
    137.   height: 280px;
    138.   background-color: pink;
    139. }
    141. .main-show-area .main-area .main-show .sliders-wrap .goods-silder{
    142.   height: 230px;
    143.   background-color: #ff5000;
    144.   /* overflow: hidden; */
    145. }
    147. .main-show-area .main-area .main-show .sliders-wrap .goods-silder .goods-slider-hd{
    148.   height: 18px;
    149.   /* margin-top: 10px; */
    150.   padding-top: 10PX;
    152.   /* background-color: #000; */
    154. }
    156. /* .goods-slider{
    157. height: 230px;
    158. background-color: #000;
    159. } */
    161. .main-show-area .main-area .main-show .hot-sale-imgs{
    162.   float:left;
    163.   width: 160px;
    164.   height: 512px;
    165.   margin: 10px 10px 0 ;
    166.   /* background-color: red; */
    167. }
    169. .main-show-area .main-area .main-show .hot-sale-imgs .t-img{
    170.   height: 280px;
    171.   background-color: green;
    172. }
    174. .main-show-area .main-area .main-show .hot-sale-imgs .b-img{
    175.   height: 230px;
    176.   background-color: yellowgreen;
    177. }
    179. .main-show-area  .funcs-area{
    180.   float: left;
    181.   width: 290px;
    182.   height: 632px;
    183.   /* background-color: purple; */
    184.   margin-top: 10px;
    185. }
    187. .main-show-area  .funcs-area .member{
    188.   height: 145px;
    189.   background-color: blue;
    190. }
    192. .main-show-area  .funcs-area  .member-tip{
    193.   height: 29px;
    194.   background-color: green;
    195. }
    197. .main-show-area  .funcs-area .member-notice{
    198.   height: 108px;
    199.   background-color: #ff5000;
    200. }
    202. .main-show-area  .funcs-area .member-funcs{
    203.   height: 232px;
    204.   background-color: #000;
    205. }
    207. .main-show-area  .funcs-area .member-apps{
    208.   height: 110px;
    209.   background-color: pink;
    211. }
    213. .life-belt{
    214.   /* width: 1190px; */
    215.   height: 166px;
    216.   /* margin:   0 auto; */
    217.   background-color: #f40;
    218. }
    1. <!DOCTYPE html>
    2. <html lang="en">
    4.   <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>淘宝</title>
    9.     <link rel="stylesheet" href="./css/index.css">
    10.   </head>
    12.   <body>
    14.     <!-- <div class="t-nav-cover">
    15.         <div class="site-nav"></div>
    16.     </div>
    18.     <div class="t-main-cover">
    19.         <div class="main-belt"></div>
    20.     </div> -->
    23.     <!-- <div class="layer t-nav-cover">
    24.         <div class="site-nav"></div>
    25.     </div>
    27.     <div class="layer t-main-cover">
    28.         <div class="main-belt"></div>
    29.     </div>
    31.     <div class="layer main-nav-cover">
    32.         <div class="main-nav"></div>
    33.     </div>
    35.     <div class="main-show-area clearfix">
    36.         <div class="main-show-box main-area">
    38.         </div>
    39.         <div class="main-show-box funcs-area">
    41.         </div>
    42.     </div> -->
    44.     <!-- 最顶上的区域 有登录按钮 -->
    45.     <div class="t-nav-cover">
    46.       <div class="layer site-nav"></div>
    47.     </div>
    49.     <!-- 带搜索框的区域 -->
    50.     <div class="t-main-cover">
    51.       <div class="layer main-belt"></div>
    52.     </div>
    54.     <!-- 带主题市场的区域 -->
    55.     <div class="main-nav-cover">
    56.       <div class="layer main-nav"></div>
    57.     </div>
    59.     <!-- 主展示区域 -->
    60.     <div class="layer main-show-area clearfix">
    61.       <div class="main-area">
    62.         <div class="main-show clearfix">
    64.           <!-- 竖栏展示框 -->
    65.           <div class="nav-menu-list"></div>
    67.           <!-- 中间包含轮播图的区域 -->
    68.           <div class="sliders-wrap">
    70.             <!-- 轮播图 -->
    71.             <div class="main-slider"></div>
    72.             <!-- <div class="goods-silder"></div> -->
    74.             <div class="goods-silder">
    75.               <div class="goods-slider-hd"></div>
    76.             </div>
    77.           </div>
    79.           <div class="hot-sale-imgs">
    80.             <div class="t-img"></div>
    81.             <div class="b-img"></div>
    82.           </div>
    83.         </div>
    84.         <div class="head-line"></div>
    85.       </div>
    86.       <div class="funcs-area">
    87.         <div class="member"></div>
    88.         <div class="member-tip"></div>
    89.         <div class="member-notice"></div>
    90.         <div class="member-funcs"></div>
    91.         <div class="member-apps"></div>
    92.       </div>
    93.     </div>
    94.     <div class="layer life-belt">
    96.     </div>
    99.   </body>
    101. </html>