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. SPOJ SUBST1 New Distinct Substrings（后缀数组 本质不同子串个数）题解

    题意: 问给定串有多少本质不同的子串? 思路: 子串必是某一后缀的前缀,假如是某一后缀\(sa[k]\),那么会有\(n - sa[k] + 1\)个前缀,但是其中有\(height[k]\)个和上一 ...

  2. 关于 TCP 三次握手和四次挥手，满分回答在此

    尽人事,听天命.博主东南大学研究生在读,热爱健身和篮球,正在为两年后的秋招准备中,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 C ...

  3. sentry can not delete release bug

    sentry can not delete release bug bug $ ./node_modules/@sentry/cli/bin/sentry-cli releases list $ ./ ...

  4. js coverage testing

    js coverage testing 测试覆盖率 istanbul 伊斯坦堡/伊斯坦布尔 https://istanbul.js.org/ jest coverage https://jestjs. ...

  5. React + GraphQL 2020 速成课程

    React + GraphQL 2020 速成课程 technologies React (to build our user interface) GraphQL (to get and chang ...

  6. 如何正确的使用 Dart SDK API

    如何正确的使用 Dart SDK API dart-core dart:core library https://api.dart.dev/stable/2.9.1/dart-core/dart-co ...

  7. auto embedded component in an online code editor

    auto embedded component in an online code editor how to auto open a component in the third parts onl ...

  8. Windows 10 滚动截图工具

    Windows 10 滚动截图工具 Edge & Note & Clip https://www.runoob.com/docker/docker-architecture.html ...

  9. document.getElementById & document.querySelector

    document.getElementById & document.querySelector https://developer.mozilla.org/en-US/docs/Web/AP ...

  10. c++ DWORD和uintptr_t

    x86模式 DWORD 是4字节 x86模式 uintptr_t 是4字节 x64模式 DWORD 是4字节 x64模式 uintptr_t 是8字节 std::cout << sizeo ...