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盒布局-省份选择盘的实现的更多相关文章

  1. css笔记 - flex弹性盒布局

    flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...

  2. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  3. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  4. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

  5. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  6. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  7. CSS盒模型

    CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

  8. CSS3-box-flex弹性盒布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. CSS3-box盒布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 关于优先队列的总结II

    优先队列这个数据结构还是很有用的,可以帮我们解决很多棘手的排序的问题,所以再来细细看一下, priority_queue<Type, Container, Functional> Type ...

  2. 013.NET5_MVC_Razor扩展Html控件01

    Razor扩展控件  第一种方式: 1. 定义一个静态类 2. 定义静态扩展方法,扩展IHtmlHelper类型,返回IHtmlContent类型: 本质:通过后台方法,返回一个已经存在的Html标签 ...

  3. Nmap & ncat

    Nmap & ncat https://github.com/udacity/course-ud303 https://nmap.org/dist/nmap-7.30-setup.exe Yo ...

  4. Recoil & React official state management

    Recoil & React official state management Redux Recoil.js https://recoiljs.org/ A state managemen ...

  5. taro & querySelector & refs

    taro & querySelector & refs delayQuerySelector https://github.com/NervJS/taro-ui/blob/dev/sr ...

  6. web testing

    web testing cypress https://www.cypress.io/ https://github.com/cypress-io/cypress https://docs.cypre ...

  7. 三种远程部署war包检测

    简介 远程部署漏洞属于服务器.中间件配置问题,攻击者可通过远程部署漏洞获取系统权限,远程部署漏洞经常出现在Tomcat.Jboss.Weblogic等web容器之上. 0x01 ### tomcat部 ...

  8. banner自用图床

    放些常用的图做图床,也不在别的平台用.

  9. 1047 Student List for Course ——PAT甲级真题

    1047 Student List for Course Zhejiang University has 40,000 students and provides 2,500 courses. Now ...

  10. SpringBoot整合Mybatis 使用generator自动生成实体类代码、Mapper代码、dao层代码

    1.新建一个SpringBoot项目,并引入Mybatis和mybatis-generator相关的依赖. <dependency> <groupId>org.springfr ...