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

    给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 15], target ...

  2. React Fragment All In One

    React Fragment All In One React还提供了一个无需包装即可呈现多个元素的组件. https://reactjs.org/docs/react-api.html#fragme ...

  3. css & clip-path

    css & clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path https://tongqu.me/ tw ...

  4. ES进行date_histogram时间聚合，聚合结果时间不正确问题

    在做项目中,有一个需求是统计本周内每天的漏洞数量,我选用的是ES中的date_histogram函数来进行聚合统计: 但是出现了一个问题,聚合出来的结果和想要统计的结果时间不一致,如下图所示 时间区间 ...

  5. 为什么说NGK公链的商用落地是可行的？

    互联网.大数据以及云计算的发展给人们的生活.工作带来了诸多便利,也让人们一次又一次感叹科技的进步.而NGK公链的诞生,更是让众人称之为传奇.其商用落地可行性,也让人惊叹.那么,为什么说NGK公链的商用 ...

  6. Java魔法类：Unsafe应用解析

    本文转载自Java魔法类:Unsafe应用解析 前言 Unsafe是位于sun.misc包下的一个类,主要提供一些用于执行低级别.不安全操作的方法,如直接访问系统内存资源.自主管理内存资源等,这些方法 ...

  7. 无情面试官之包含min函数的栈

    0 我是一个无情的面试官. 面人无数,挂人无数. 若想过我的面试,标准只有一个,那就是公司很缺人. 招新人,填旧坑. 1 今天是我的第1001次当面试官,要求却不是千里挑一,而是一击必中. 因为我招聘 ...

  8. IntelliJ IDEA 还能画思维导图，果然最强 IDE！

    最近栈长发现 IntelliJ IDEA 居然还能画思维导图,太牛逼了! 当然这得借助 IDEA 的 UML 插件,因为它本身也是一个 UML 图,所以这篇就从 UML 图开撕,看 IDEA 怎么画思 ...

  9. 搭建SSH框架

    以下为链接地址:https://www.2cto.com/kf/201606/518341.html

  10. JUnit5学习之六：参数化测试(Parameterized Tests)基础

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...