居中

image.png
居中 div嵌套div，控制子元素的margin，父div width100%，与html一样
image.png

淘宝两侧会有空白，不会全部占满的，大div占满html的宽度，小div在大div中居中，大div包裹小div

cover包裹
nav导航
t top
t-nav-cover 顶部导航栏包裹的元素，起到顶部导航栏包裹的元素

site 网站

顶部居中

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>淘宝</title>
  8.     <link rel="stylesheet" href="./css/index.css">
  9. </head>
  10. <body>
  12.     <div class="t-nav-cover">
  13.         <div class="site-nav"></div>
  14.     </div>
  15. </body>
  16. </html>

index.css

  1. body{
  2.     margin: 0;
  3. }
  5. .t-nav-cover{
  6.     width: 100%;
  7.     min-width: 1190px;
  8.     height: 35px;
  10.     background-color: #f5f5f5;
  11.     border-bottom: 1px solid #eee;
  12. }
  14. .t-nav-cover .site-nav{
  15.     width: 1190px;
  16.     height: 35px;
  17.     margin: 0 auto;
  18.     background-color: #000;
  19. }

image.png
这是最顶部的导航栏

左侧导航栏，下部导航栏，都是是导航栏，都是为了导航，点击触发，点击跳转

布局分析

image.png

左右，同一高度的div划分布局，需要新的div盒子。因为不同一高度的，文档流上下排列，在一个div里面，上下排列。
为了让其左右排列，用div包裹，让div左右排列，div里面的内容上下排列，不用必须用新的div

父元素不设高度，子元素设置高度，父元素会被撑开，父元素应该包裹子元素，不管写法上，还是视觉效果上

  1. body{
  2.     margin: 0;
  3.     background-color: #f4f4f4;
  4. }
  7. /* 因为不止最上面的大div要用width100%，min-width，
  8. 每一层都要用到，所以单独抽出个类，就不用每次都写了，而是写上类名，
  9. 用类名代替这些css代码，把css样式封装成一个一个的类，在css上少写，在html上多写类名  */
  10. .layer{
  11.     width: 100%;
  12.     min-width: 1190px;
  13. }
  15. .t-nav-cover{
  16.     /* width: 100%;
  17.     min-width: 1190px; */
  18.     height: 35px;
  20.     background-color: #f5f5f5;
  21.     border-bottom: 1px solid #eee;
  22. }
  24. .t-nav-cover .site-nav{
  25.     width: 1190px;
  26.     height: 35px;
  27.     margin: 0 auto;
  28.     background-color: #000;
  29. }
  32. .t-main-cover{
  33.     /* width: 100%; */
  34.     /* height: 121px; */
  35.     background-color: #fff;
  36. }
  38. .t-main-cover .main-belt{
  39.     width: 1190px;
  40.     height: 121px;
  41.     margin: 0 auto;
  42.     background-color: orange;
  43. }
  45. .main-nav-cover .main-nav{
  46.     width: 1190px;
  47.     height: 30px;
  48.     margin: 0 auto;
  49.     background-color: #ff5000;
  50. }
  52. .main-show-area{
  53.     width: 1190px;
  54.     height: 632px;
  55.     margin: 0 auto;
  56.     /*可以删掉 */
  57.     /* background-color: #666; */
  58. }
  61. .main-show-area .main-show-box{
  62.     float: left;
  63.     height: 100%;
  64. }
  66. .main-show-area .main-show-box.main-area{
  67.     width: 900px;
  68.     background-color: pink;
  69. }
  71. .main-show-area .main-show-box.funcs-area{
  72.     width: 290px;
  73.     background-color: purple;
  74. }
  1.  <div class="layer t-nav-cover">
  2.         <div class="site-nav"></div>
  3.     </div>
  5.     <div class="layer t-main-cover">
  6.         <div class="main-belt"></div>
  7.     </div>
  9.     <div class="layer main-nav-cover">
  10.         <div class="main-nav"></div>
  11.     </div>
  13.     <div class="main-show-area">
  14.         <div class="main-show-box main-area">
  16.         </div>
  17.         <div class="main-show-box funcs-area">
  19.         </div>
  20.     </div>

image.png

  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;
  17. }
  19. .t-nav-cover{
  20.     /* width: 100%;
  21.     min-width: 1190px; */
  22.     height: 35px;
  24.     background-color: #f5f5f5;
  25.     border-bottom: 1px solid #eee;
  26. }
  28. .t-nav-cover .site-nav{
  29.     width: 1190px;
  30.     height: 35px;
  31.     margin: 0 auto;
  32.     background-color: #000;
  33. }
  36. .t-main-cover{
  37.     /* width: 100%; */
  38.     /* height: 121px; */
  39.     background-color: #fff;
  40. }
  42. .t-main-cover .main-belt{
  43.     width: 1190px;
  44.     height: 121px;
  45.     margin: 0 auto;
  46.     background-color: orange;
  47. }
  49. .main-nav-cover .main-nav{
  50.     width: 1190px;
  51.     height: 30px;
  52.     margin: 0 auto;
  53.     background-color: #ff5000;
  54. }
  56. .main-show-area{
  57.     width: 1190px;
  58.     /* height: 632px; */
  59.     margin: 0 auto;
  60.     /*可以删掉 */
  61.     /* background-color: #666; */
  62. }
  65. /* .main-show-area .main-show-box{
  66.     float: left;
  67.     height: 100%;
  68. }
  70. .main-show-area .main-show-box.main-area{
  71.     width: 900px;
  72.     background-color: pink;
  73. }
  75. .main-show-area .main-show-box.funcs-area{
  76.     width: 290px;
  77.     background-color: purple;
  78. } */
  83. /* .main-show-area .main-show-box{
  84.     float: left;
  85.     height: 100%;
  86. } */
  88. .main-show-area .main-area{
  89.     float: left;
  90.     width: 900px;
  91.     /* height: 100%; */
  92.     height: 632px;
  93.     /* background-color: pink; */
  94. }
  96. .main-show-area .main-area .main-show{
  97.     height: 522px;
  98.     /* background-color: pink; */
  99.     margin-bottom: 10px;
  100. }
  102. .main-show-area .main-area .main-show .nav-menu-list{
  103.     float: left;
  104.     width: 190px;
  105.     height: 100%;
  106.     background-color: blue;
  107. }
  109. .main-show-area .main-area .head-line{
  110.     width: 890px;
  111.     height: 100px;
  112.     margin-right: 10px;
  113.     background-color: green;
  114. }
  116. .main-show-area .main-area .main-show .sliders-wrap{
  117.     float: left;
  118.     width: 520px;
  119.     height: 512px;
  120.     margin: 10px 0 0 10px;
  121.     /* background-color: pink; */
  122. }
  124. .main-show-area .main-area .main-show .sliders-wrap .main-slider{
  125.     height: 280px;
  126.     background-color: pink;
  127. }
  129. .main-show-area .main-area .main-show .sliders-wrap .goods-silder{
  130.     height: 230px;
  131.     background-color: #ff5000;
  132.     /* overflow: hidden; */
  133. }
  135. .main-show-area .main-area .main-show .sliders-wrap .goods-silder .goods-slider-hd{
  136.     height: 18px;
  137.     /* margin-top: 10px; */
  138.     padding-top: 10PX;
  140.     /* background-color: #000; */
  142. }
  144. /* .goods-slider{
  145.     height: 230px;
  146.     background-color: #000;
  147. } */
  149. .main-show-area .main-area .main-show .hot-sale-imgs{
  150.     float:left;
  151.     width: 160px;
  152.     height: 512px;
  153.     margin: 10px 10px 0 ;
  154.     /* background-color: red; */
  155. }
  157. .main-show-area .main-area .main-show .hot-sale-imgs .t-img{
  158.     height: 280px;
  159.     background-color: green;
  160. }
  162. .main-show-area .main-area .main-show .hot-sale-imgs .b-img{
  163.     height: 230px;
  164.     background-color: yellowgreen;
  165. }
  167. .main-show-area  .funcs-area{
  168.     float: left;
  169.     width: 290px;
  170.     height: 632px;
  171.     /* background-color: purple; */
  172.     margin-top: 10px;
  173. }
  175. .main-show-area  .funcs-area .member{
  176.     height: 145px;
  177.     background-color: blue;
  178. }
  180. .main-show-area  .funcs-area  .member-tip{
  181.     height: 29px;
  182.     background-color: green;
  183. }
  185. .main-show-area  .funcs-area .member-notice{
  186.     height: 108px;
  187.     background-color: #ff5000;
  188. }
  190. .main-show-area  .funcs-area .member-funcs{
  191.     height: 232px;
  192.     background-color: #000;
  193. }
  195. .main-show-area  .funcs-area .member-apps{
  196.     height: 110px;
  197.     background-color: pink;
  199. }
  201. .life-belt{
  202.     width: 1190px;
  203.     height: 166px;
  204.     margin:   0 auto;
  205.     background-color: #f40;
  206. }
  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="layer t-nav-cover">
  46.         <div class="site-nav"></div>
  47.     </div>
  49.     <!-- 带搜索框的区域 -->
  50.     <div class="layer t-main-cover">
  51.         <div class="main-belt"></div>
  52.     </div>
  54.     <!-- 带主题市场的区域 -->
  55.     <div class="layer main-nav-cover">
  56.         <div class="main-nav"></div>
  57.     </div>
  59.     <!-- 主展示区域 -->
  60.     <div class="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="life-belt">
  96.     </div>
  97. </body>
  98. </html>

image.png、

总结

命名规则

cover 覆盖 是