微信扫一扫打赏支持

尚硅谷css3---flex布局实例（多列布局）

尚硅谷css3---flex布局实例（多列布局）

一、总结

一句话总结：

弹性盒子的操作比较简单，在弹性盒子上指定display: flex，在item上面指定flex综合属性的值为1。
#nav > .row{
  display: flex;
}
#nav > .row > .item{
  flex: 1;
  text-align: center;
}

 

 

1、图标的另外一种生成方式（用伪元素）？

可以用伪元素:before弄一个block块，然后指定宽高，且居中
 1 #nav > .row > .item > a:before{
 2   content: "";
 3   display: block;
 4   width: 86px;
 5   height: 86px;
 6   margin: 0 auto;
 7 }
 8 
 9 #nav > .row:nth-child(1) > .item:nth-child(1) >a:before{
10   background: url(img/01.png) no-repeat;
11 }

 

 

 

二、flex布局实例（多列布局）

 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style type="text/css">
  7             *{
  8                 margin: 0;
  9                 padding: 0;
 10             }
 11             a{
 12                 text-decoration: none;
 13                 color: gray;
 14                 display: block;
 15             }
 16             #nav > .row{
 17                 display: flex;
 18             }
 19             #nav > .row > .item{
 20                 flex: 1;
 21                 text-align: center;
 22             }
 23             
 24             #nav > .row > .item > a:before{
 25                 content: "";
 26                 display: block;
 27                 width: 86px;
 28                 height: 86px;
 29                 margin: 0 auto;
 30             }
 31             
 32             #nav > .row:nth-child(1) > .item:nth-child(1) >a:before{
 33                 background: url(img/01.png) no-repeat;
 34             }
 35             #nav > .row:nth-child(1) > .item:nth-child(2) >a:before{
 36                 background: url(img/02.png) no-repeat;
 37             }
 38             #nav > .row:nth-child(1) > .item:nth-child(3) >a:before{
 39                 background: url(img/03.png) no-repeat;
 40             }
 41             #nav > .row:nth-child(1) > .item:nth-child(4) >a:before{
 42                 background: url(img/04.png) no-repeat;
 43             }
 44             #nav > .row:nth-child(1) > .item:nth-child(5) >a:before{
 45                 background: url(img/05.png) no-repeat;
 46             }
 47             
 48             
 49             #nav > .row:nth-child(2) > .item:nth-child(1) >a:before{
 50                 background: url(img/06.png) no-repeat;
 51             }
 52             #nav > .row:nth-child(2) > .item:nth-child(2) >a:before{
 53                 background: url(img/07.png) no-repeat;
 54             }
 55             #nav > .row:nth-child(2) > .item:nth-child(3) >a:before{
 56                 background: url(img/08.png) no-repeat;
 57             }
 58             #nav > .row:nth-child(2) > .item:nth-child(4) >a:before{
 59                 background: url(img/09.png) no-repeat;
 60             }
 61             #nav > .row:nth-child(2) > .item:nth-child(5) >a:before{
 62                 background: url(img/10.png) no-repeat;
 63             }
 64         </style>
 65     </head>
 66     <body>
 67         <div id="nav">
 68             <div class="row">
 69                 <div class="item">
 70                     <a href="javascript:;">天狗</a>
 71                 </div>
 72                 <div class="item">
 73                     <a href="javascript:;">聚划算</a>
 74                 </div>
 75                 <div class="item">
 76                     <a href="javascript:;">天狗国际</a>
 77                 </div>
 78                 <div class="item">
 79                     <a href="javascript:;">外卖</a>
 80                 </div>
 81                 <div class="item">
 82                     <a href="javascript:;">天狗超市</a>
 83                 </div>
 84             </div>
 85             <div class="row">
 86                 <div class="item">
 87                     <a href="javascript:;">充值中心</a>
 88                 </div>
 89                 <div class="item">
 90                     <a href="javascript:;">海峰旅行</a>
 91                 </div>
 92                 <div class="item">
 93                     <a href="javascript:;">领金币</a>
 94                 </div>
 95                 <div class="item">
 96                     <a href="javascript:;">拍卖</a>
 97                 </div>
 98                 <div class="item">
 99                     <a href="javascript:;">分类</a>
100                 </div>
101             </div>
102         </div>
103     </body>
104 </html>

 

 

 

 

 

 
posted @ 2020-02-23 00:56  范仁义  阅读(756)  评论(0)    收藏  举报