九宫格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="./css/font-awesome.min.css">
  7.     <link rel="stylesheet" href="./css/icon.css">
  8. </head>
  9. <body>
  10. <style>
  11.     body{
  12.         background-color: #f4f4f4;
  13.     }
  14.     ul{
  15.         padding: 0;
  16.         margin: 0;
  17.         list-style: none;
  18.         /*box-sizing: border-box;*/
  19.     }
  20.     ul,li{
  21.         box-sizing: border-box;
  22.     }
  23.     .clearfix::after{
  24.         content: "";
  25.         display: table;
  26.         clear: both;
  27.     }
  28.     .funcs-container{
  29.         width: 290px;
  30.         height: 232px;
  31.         margin: 100px auto;
  32.         /*border: 1px solid red;*/
  33.         background-color:#fff;
  34.         overflow: hidden;
  35.     }
  37.     .funcs-container  .funcs-list{
  38.         width: 294px;
  39.         height: 232px;
  40.         /*border: 1px solid #000000;*/
  41.         margin-left: -2px ;
  42.         border-bottom: 1px solid #ddd;
  43.     }
  45.     .funcs-container  .funcs-list .funcs-item{
  46.         float: left;
  47.         width: 25%;
  48.         height: 77px;
  49.         border-top: 1px solid #dddddd;
  50.         border-left:1px solid #dddddd;
  51.         /*border-right: 1px solid #000000;*/
  52.     }
  54.     .funcs-container  .funcs-list .funcs-item .funcs-link{
  55.         display: block;
  56.         width: 100%;
  57.         height: 100%;
  59.     }
  60.     a{
  61.         text-decoration: none;
  62.     }
  63.     p{
  64.         matgin:0;
  65.     }
  67.     .funcs-container  .funcs-list .funcs-item .funcs-link{
  68.         font-size: 12px;
  69.         color: #333;
  70.         text-align: center;
  71.     }
  72. </style>
  74. <div class="funcs-container">
  75.     <ul class="funcs-list ">
  76.         <li class="funcs-item">
  77.             <a href="" class="funcs-link">
  78.                 <i class="icon icon-calendar"></i>
  79.                 <p>日历</p>
  80.             </a>
  81.         </li>
  82.         <li class="funcs-item">
  83.             <a href="" class="funcs-link">
  84.                 <i class="icon icon-calendar"></i>
  85.                 <p>日历</p>
  86.             </a>
  87.         </li>
  88.         <li class="funcs-item">
  89.             <a href="" class="funcs-link">
  90.                 <i class="icon icon-calendar"></i>
  91.                 <p>日历</p>
  92.             </a>
  93.         </li>
  94.         <li class="funcs-item">
  95.             <a href="" class="funcs-link">
  96.                 <i class="icon icon-calendar"></i>
  97.                 <p>日历</p>
  98.             </a>
  99.         </li>
  100.         <li class="funcs-item">
  101.             <a href="" class="funcs-link">
  102.                 <i class="icon icon-calendar"></i>
  103.                 <p>日历</p>
  104.             </a>
  105.         </li>
  106.         <li class="funcs-item">
  107.             <a href="" class="funcs-link">
  108.                 <i class="icon icon-calendar"></i>
  109.                 <p>日历</p>
  110.             </a>
  111.         </li>
  112.         <li class="funcs-item">
  113.             <a href="" class="funcs-link">
  114.                 <i class="icon icon-calendar"></i>
  115.                 <p>日历</p>
  116.             </a>
  117.         </li>
  118.         <li class="funcs-item">
  119.             <a href="" class="funcs-link">
  120.                 <i class="icon icon-calendar"></i>
  121.                 <p>日历</p>
  122.             </a>
  123.         </li>
  124.         <li class="funcs-item">
  125.             <a href="" class="funcs-link">
  126.                 <i class="icon icon-calendar"></i>
  127.                 <p>日历</p>
  128.             </a>
  129.         </li>
  130.         <li class="funcs-item">
  131.             <a href="" class="funcs-link">
  132.                 <i class="icon icon-calendar"></i>
  133.                 <p>日历</p>
  134.             </a>
  135.         </li>
  136.         <li class="funcs-item">
  137.             <a href="" class="funcs-link">
  138.                 <i class="icon icon-calendar"></i>
  139.                 <p>日历</p>
  140.             </a>
  141.         </li>
  142.         <li class="funcs-item">
  143.             <a href="" class="funcs-link">
  144.                 <i class="icon icon-calendar"></i>
  145.                 <p>日历</p>
  146.             </a>
  147.         </li>
  149.     </ul>
  150. </div>
  152. </body>
  153. </html>
  1. /*.icon {*/
  2. /*  display: block;*/
  3. /*  width: 32px;*/
  4. /*  height: 32px;*/
  5. /*  background-repeat: no-repeat;*/
  6. /*  background-size: 100% 100%;*/
  7. /*  margin:10px auto 0;*/
  8. /*}*/
  10. .icon {
  11.   display: block;
  12.   width: 24px;
  13.   height: 24px;
  14.   margin: 11px auto 0;
  15.   background-repeat: no-repeat;
  16.   background-size: 100% 100%;
  17.   vertical-align: middle;
  18.   /*margin:10px auto 0;*/
  19. }
  21. .icon-calendar {
  22.   background-image: url("../icons/calendar.png");
  23. }
  25. /*.icon-goods {*/
  26. /*  background-image: url("../icons/goods.png");*/
  27. /*}*/
  29. /*.icon-files {*/
  30. /*  background-image: url("../icons/files.png");*/
  31. /*}*/
  33. /*.icon-identity {*/
  34. /*  background-image: url("../icons/identity.png");*/
  35. /*}*/
  37. /*.icon-income {*/
  38. /*  background-image: url("../icons/income.png");*/
  39. /*}*/
  41. /*.icon-job {*/
  42. /*  background-image: url("../icons/job.png");*/
  43. /*}*/

li中因为可以点击跳转所以用a，包裹图标与文字
image.png

课程列表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>腾讯课堂课程列表</title>
  6.     <link rel="stylesheet" href="./css/font-awesome.min.css">
  7.     <link rel="stylesheet" href="./css/icon.css">
  8. </head>
  9. <body>
  10. <style>
  11.     ul{
  12.         padding: 0;
  13.         margin: 0;
  14.         list-style: none;
  15.     }
  16.     ul,li,div{
  17.         box-sizing: border-box;
  18.     }
  19.     .clearfix::after{
  20.         content: '';
  21.         display: table;
  22.         clear: both;
  23.     }
  24.     .courses-container{
  25.         width: 1230px;
  26.         margin: 100px auto;
  27.         border: 1px solid red;
  28.     }
  29.     .courses-container .courses-list{
  30.         width: 1500px;
  31.         margin-left:-18px ;
  32.         /*border: 1px solid orange;*/
  33.     }
  34.     .courses-container .courses-list  .course-item{
  35.         float: left;
  36.         width: 236px;
  37.         height: 221px;
  38.         margin-left: 9px;
  39.         border: 1px solid #000000;
  40.     }
  41. </style>
  42.     <div class="courses-container">
  43.         <ul class="courses-list clearfix">
  44.             <li class="course-item">
  46.             </li>
  47.             <li class="course-item">
  49.             </li>
  50.             <li class="course-item">
  52.             </li>
  53.             <li class="course-item">
  55.             </li>
  56.             <li class="course-item">
  58.             </li>
  59.         </ul>
  60.     </div>
  62. </body>
  63. </html>

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>腾讯课堂课程列表</title>
  6.     <link rel="stylesheet" href="./css/font-awesome.min.css">
  7.     <link rel="stylesheet" href="./css/icon.css">
  8. </head>
  9. <body>
  10. <style>
  11.     ul{
  12.         padding: 0;
  13.         margin: 0;
  14.         list-style: none;
  15.     }
  16.     ul,li,div{
  17.         box-sizing: border-box;
  18.     }
  19.     i{
  20.         font-style: normal;
  21.     }
  22.     .clearfix::after{
  23.         content: '';
  24.         display: table;
  25.         clear: both;
  26.     }
  27.     .courses-container{
  28.         width: 1230px;
  29.         margin: 100px auto;
  30.         /*border: 1px solid red;*/
  31.     }
  32.     .courses-container .courses-list{
  33.         width: 1500px;
  34.         margin-left:-18px ;
  35.         /*border: 1px solid orange;*/
  36.     }
  37.     .courses-container .courses-list  .course-item{
  38.         float: left;
  39.         position: relative;
  40.         width: 236px;
  41.         height: 221px;
  42.         margin-left: 9px;
  43.         /*border: 1px solid #000000;*/
  45.         padding: 7px 7px 10px;
  46.         /*padding: 7px 20px 10px;*/
  47.         border: 1px solid transparent;
  48.     }
  50.     .courses-container .courses-list  .course-item .course-tip{
  51.         position: absolute;
  52.         left: 7px;
  53.         width: 220px;
  54.         /*top: 131px;*/
  55.         /*top: 100px;*/
  56.         /*top: 80px;*/
  57.         /*top: 85px;*/
  58.         top: 105px;
  59.         height: 24px;
  60.     }
  62.     .courses-container .courses-list  .course-item .course-tip2{
  63.         position: absolute;
  64.         left: 7px;
  65.         width: 220px;
  66.         /*top: 131px;*/
  67.         /*top: 100px;*/
  68.         /*top: 80px;*/
  69.         /*top: 85px;*/
  70.         top: 105px;
  71.         height: 24px;
  72.         line-height: 24px;
  73.         background-color:  rgba(0,0,0,.6);
  74.         color: #ffffff;
  75.         font-size: 12px;
  76.         padding: 0 2px;
  78.     }
  81.     .courses-container .courses-list  .course-item .opacity-block{
  82.         height: 100%;
  83.         background-color: #000000;
  84.         opacity: .6;
  85.         filter: alpha(opacity=60);
  86.     }
  87.     .courses-container .courses-list  .course-item .course-tip .content-block {
  88.         position: absolute;
  89.         top: 0;
  90.         left: 0;
  91.         z-index: 1;
  92.         color: #ffffff;
  94.         width: 100%;
  95.         height: 100%;
  96.         line-height: 24px;
  97.         font-size: 12px;
  98.         padding:0 2px;
  99.     }
  103.     .courses-container .courses-list  .course-item:hover{
  104.         /*border: 1px solid #dddddd;*/
  105.         border-color: #dddddd;
  106.         box-shadow: 0 0 5px #dddddd;
  107.     }
  109.     .courses-container .courses-list  .course-item .course-link{
  110.         display: block;
  111.         width: 220px;
  112.         height: 124px;
  113.         margin-bottom: 5px;
  115.         /*margin: 0 auto;*/
  117.     }
  118.     .courses-container .courses-list  .course-item .course-link img{
  119.         width: 100%;
  120.     }
  121.     h4{
  122.         margin: 0;
  123.         font-weight: normal;
  124.     }
  125.     .courses-container .courses-list  .course-item .course-title{
  126.         height: 40px;
  127.         margin-bottom: 8px;
  128.         /*line-height: 40px;*/
  129.         font-size: 14px;
  130.         color: #333;
  131.     }
  133.     .courses-container .courses-list  .course-item .course-title a{
  135.         color: #333;
  136.     }
  138.     .courses-container .courses-list  .course-item .course-title a:hover{
  139.         color: #13d0a1;
  140.     }
  142.     a{
  143.         text-decoration: none;
  144.     }
  145.     .courses-container .courses-list  .course-item .course-info{
  146.         height: 24px;
  147.         line-height: 24px;
  148.     }
  150.     .courses-container .courses-list  .course-item .course-info .info-free{
  151.         font-size: 14px;
  152.         color: #5fb41b;
  153.     }
  154.     .courses-container .courses-list  .course-item .course-info .info-users{
  155.         float: right;
  156.         color: #999999;
  157.         font-size: 12px;
  158.     }
  159.     .courses-container .courses-list  .course-item .course-info .info-price {
  160.         /*font-size: 14px;*/
  161.         color: #e85308;
  162.     }
  163.     .courses-container .courses-list  .course-item .course-info .tip-badge{
  164.         display: inline-block;
  165.         height: 16px;
  166.         line-height: 16px;
  167.         padding: 0 2px;
  168.         border: 1px solid #e85308;
  169.         font-size: 12px;
  170.         color:#e85308 ;
  171.         /*vertical-align: middle;*/
  172.         vertical-align: -3px;
  173.         vertical-align: 5px;
  174.         vertical-align: 2px;
  176.     }
  179. </style>
  180.     <div class="courses-container">
  181.         <ul class="courses-list clearfix">
  182.             <li class="course-item">
  183.                 <div class="course-tip">
  184.                     <div class="content-block">随到随学（共7节）</div>
  185.                     <div class="opacity-block"></div>
  186.                 </div>
  187.                 <a href="" class="course-link">
  188.                     <img src="./img/1.png" alt="">
  189.                 </a>
  190.                 <h4 class="course-title">
  191.                     <a href="">【罗翔】4500买的吊坠价值20万？张女士赚了个10年有期徒刑？</a>
  192.                 </h4>
  193.                 <div class="course-info">
  194.                     <span class="info-free">免费</span>
  195.                     <span class="info-users">2750人 最近报名</span>
  196.                 </div>
  197.             </li>
  199.             <li class="course-item">
  200.                 <div class="course-tip2">
  201. <!--                    <div class="content-block">随到随学（共7节）</div>-->
  202.                     <span class="tip-text">随到随学（共7节）</span>
  203. <!--                    <div class="opacity-block"></div>-->
  204.                 </div>
  205.                 <a href="" class="course-link">
  206.                     <img src="./img/1.png" alt="">
  207.                 </a>
  208.                 <h4 class="course-title">
  209.                     <a href="">【罗翔】4500买的吊坠价值20万？张女士赚了个10年有期徒刑？</a>
  210.                 </h4>
  211.                 <div class="course-info">
  212.                     <span class="info-free">免费</span>
  213.                     <span class="info-users">2750人 最近报名</span>
  214.                 </div>
  215.             </li>
  217.             <li class="course-item">
  218.                 <a href="" class="course-link">
  219.                     <img src="./img/1.png" alt="">
  220.                 </a>
  221.                 <h4 class="course-title">
  222.                     <a href="">【罗翔】4500买的吊坠价值20万？张女士赚了个10年有期徒刑？</a>
  223.                 </h4>
  224.                 <div class="course-info">
  225.                     <span class="info-free">免费</span>
  226.                     <span class="info-users">2750人 最近报名</span>
  227.                 </div>
  228.             </li>
  230.             <li class="course-item">
  231.                 <a href="" class="course-link">
  232.                     <img src="./img/1.png" alt="">
  233.                 </a>
  234.                 <h4 class="course-title">
  235.                     <a href="">【罗翔】4500买的吊坠价值20万？张女士赚了个10年有期徒刑？</a>
  236.                 </h4>
  237.                 <div class="course-info">
  238.                     <span class="info-price">￥999.00</span>
  239.                     <i class="tip-badge">可试学</i>
  240.                     <span class="info-users">2750人 最近报名</span>
  241.                 </div>
  242.             </li>
  244.             <li class="course-item">
  245.                 <a href="" class="course-link">
  246.                     <img src="./img/1.png" alt="">
  247.                 </a>
  248.                 <h4 class="course-title">
  249.                     <a href="">【罗翔】4500买的吊坠价值20万？张女士赚了个10年有期徒刑？</a>
  250.                 </h4>
  251.                 <div class="course-info">
  252.                     <span class="info-free">免费</span>
  253.                     <span class="info-users">2750人 最近报名</span>
  254.                 </div>
  255.             </li>
  259.             <!--            <li class="course-item">-->
  260. <!--                <a href="" class="course-link">-->
  261. <!--                    <img src="./img/1.png" alt="">-->
  262. <!--                </a>-->
  263. <!--                <h4>111111</h4>-->
  264. <!--            </li>-->
  265. <!--            <li class="course-item">-->
  267. <!--            </li>-->
  268. <!--            <li class="course-item">-->
  270. <!--            </li>-->
  271. <!--            <li class="course-item">-->
  273. <!--            </li>-->
  274.         </ul>
  275.     </div>
  277. </body>
  278. </html>

image.png

总结

image.png
当多个元素在内部，左对齐，左边有边距时可以用padding
其实也可以，再套用一个div，div>div,再拿子div放这些元素，设置padding相当于在div中加了个盒子div，相当于套了个盒子

image.png
与文档流不一致时，多用float，因为可以自动排列，按照一定顺序，从左到右，从上到下。从左到右也遵循着流。
决定定位也可以脱离文档流，需要在父级元素精确定位时用