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>
巴特西

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

最新文章

热门文章
