css盒布局-省份选择盘的实现 

 1 <!DOCTYPE html>                                                    
  2 <html lang="en">
  3 <head>         
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>    
  7     .disk {    
  8         width: 400px;
  9         padding:10px;
 10         resize:both;
 11         /*resize设置元素的尺寸是否可以改变
 12             可选值：
 13                 -both(水平和垂直丢可以改变大小)
 14                 -horizontal水平可以改变大小
 15                 -vertical垂直可以改变大小
 16                 -none默认值，元素不能改变大小
 17          */    
 18         overflow:auto;
 19         border:1px #f90 solid;
 20         line-height:22px;
 21                
 22     }          
 23     .disk a {  
 24         display:block;
 25         float:left;
 26         width:60px;
 27         text-align: center;
 28         text-decoration: none;
 29         font-size: 12px;
 30         line-height: 20px;
 31         margin: 3px;
 32         border:1px #ccc solid;
 33         background-color:#e14e14e14;
 34         counter-increment:ycounter;
 35                
 36     }          
 37     .disk a:focus {
 38         outline:2px #fc6 solid;
 39         /*设置外边框到元素边框之间的空间大小o*/
 40         outline-offset:2px;
 41     }          
 42     .disk a:before {
 43         content:counter(ycounter)".";
 44     }          
 45                
 46     </style>   
 47 </head>        
 48 <body>         
 49     <div class="disk">
 50     <a href="">北京</a>
 51     <a href="">上海</a>
 52     <a href="">天津</a>
 53     <a href="">重庆</a>
 54     <a href="">安徽</a>
 55     <a href="">福建</a>
 56     <a href="">甘肃</a>
 57     <a href="">广东</a>
 58     <a href="">贵州</a>
 59     <a href="">海南</a>
 60     <a href="">河北</a>
 61     <a href="">河南</a>
 62     <a href="">湖北</a>
 63     <a href="">湖南</a>
 64     <a href="">吉林</a>
 65     <a href="">江苏</a>
 66     <a href="">江西</a>
 67     <a href="">辽宁</a>
 68     <a href="">宁夏</a>
 69     <a href="">青海</a>
 70     <a href="">山东</a>
 71     <a href="">山西</a>
 72     <a href="">陕西</a>
 73     <a href="">四川</a>
 74     <a href="">西藏</a>
 75     <a href="">新疆</a>
 76     <a href="">云南</a>
 77     <a href="">浙江</a>
 78     <a href="">黑龙江</a>
 79     <a href="">内蒙古</a>
 80          
 81     </div>
 82 </body>
 83 </html>

posted @ 2020-11-20 22:32  zou-ting-rong  阅读(186)  评论(0)  编辑  收藏  举报