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盒布局-省份选择盘的实现的更多相关文章
- css笔记 - flex弹性盒布局
flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...
- css盒模型与bfc与布局与垂直水平居中与css设计模式等
一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...
- CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...
- css怪异盒模型和弹性盒布局(flex)详解及其案例
一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- CSS盒模型
CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
- CSS3-box-flex弹性盒布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS3-box盒布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- Leetcode（884）-索引处的解码字符串
给定一个编码字符串 S.为了找出解码字符串并将其写入磁带,从编码字符串中每次读取一个字符,并采取以下步骤: 如果所读的字符是字母,则将该字母写在磁带上. 如果所读的字符是数字(例如 d),则整个当前磁 ...
- PyQt5笔记
PyQt5 窗口类继承QMainWindow. 1.消息盒子QMessageBox 弹出一个窗口,根据选择的不同执行不同的操作.比如点击关闭后,实用消息盒子确认是否关闭. # 关闭QWidget将产生 ...
- 51nod1089 最长回文子串 manacher算法
0. 问题定义 最长回文子串问题:给定一个字符串,求它的最长回文子串长度. 如果一个字符串正着读和反着读是一样的,那它就是回文串.下面是一些回文串的实例: 12321 a aba abba aaaa ...
- tensorflow加载ckpt出错
Issue链接 问题: tensorflow加载ckpt出错 此处原因: 该ckpt文件对应的tensorflow版本过老, 其中的部分内置变量名发生了改变. 提示: Key lstm_o/bidir ...
- Vue Cheat Sheet & Nuxt.js Cheat Sheet
Vue Cheat Sheet & Nuxt.js Cheat Sheet Vue Cheat Sheet https://www.vuemastery.com/pdf/Vue-Essenti ...
- npm-run-all
npm-run-all npm scripts https://www.npmjs.com/package/npm-run-all A CLI tool to run multiple npm-scr ...
- Objective C & Swift & iOS & App
Objective C & Swift & iOS & App https://www.runoob.com/ios/ios-objective-c.html https:// ...
- Electron in Action
Electron in Action $ yarn add -D electron@latest # OR $ npm i -D electron@latest https://www.electro ...
- Captain technology INC：高性能电池助力新能源车企销量暴涨
来自七个欧洲国家的11个合作伙伴共聚一堂,投身于HyFlow研究项目,共同开发一种可兼顾高性能和能源需求的混合氧化还原液流储能系统.为此,科学家们希望将高性能钒氧化还原液流电池与超级电容器相结合. 到 ...
- BGV上线两天价格超过880美金，下一个YFI已到来！
BGV自上线以来就备受币圈关注,众多投资者纷纷表示看好BGV.BGV也不负众望,在上线交易所第二天,价格就迎来了暴涨,最高价格为888.88美金,超越了当前以太坊的价值.而这也迎来了币圈众多投资者的一 ...