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" ...
随机推荐
- HDU 3966 Aragorn's Story（树链剖分）题解
题意:给一棵树,要求你对一个路径上的值进行加减,查询某个点的值 思路:重链剖分. 由于分了轻重儿子,我每次到重儿子的top只要O(1),经过的轻儿子最多logn条,那么我每次往上跳最多跳logn次. ...
- LOJ6283 数列分块入门 7 （分块 区间加/乘）题解
题意:区间加,区间乘,单点询问 思路:假设一个点为a,那么他可以表示为m * a + sum,所以区间加就变为m * a + sum + sum2,区间乘变为m * m2 * a + sum * m2 ...
- XSS脚本汇总
(1)普通的XSS JavaScript注入<SCRIPT SRC=http://***/XSS/xss.js></SCRIPT> (2)IMG标签XSS使用JavaScrip ...
- Kconfig 配置文件编码规则
最早接触到Kconfig是在u-boot的移植过程中.所今天来好好学习一下如何编写一个符合Kconffigde 配置文件.Kbuild或者是Kconfig的中文翻译意思是内核配置/构建系统.他最早出自 ...
- 事件循环 EventLoop（Promise，setTimeOut，async/await执行顺序）
什么是事件循环?想要了解什么是事件循环就要从js的工作原理开始说起: JS主要的特点就是单线程,所谓单线程就是进程中只有一个线程在运行. 为什么JS是单线程的而不是多线程的呢? JS的主要用途就是与用 ...
- TypeScript Developer Roadmap
TypeScript Developer Roadmap https://github.com/xgqfrms/TypeScript-Developer-Roadmap https://typescr ...
- UI 素材网站
UI 素材网站 UI 设计师网站 国外: dribble.behance.Pinteres 国内: 优设.站酷.UI中国.花瓣 https://design.google/ https://dribb ...
- vue render html string
vue render html string shit element ui render string array relativeShowConvert(data) { // log(`data` ...
- 让 gRPC 提供 REST 服务
让 gRPC 提供 REST 服务 Intro gRPC 是一个高性能.开源和通用的 RPC 框架,面向移动和 HTTP/2 设计. gRPC 基于 HTTP/2 标准设计,带来诸如双向流.流控.头部 ...
- gitLab的使用 和 git 、 github、gitlab的区别
一.git . github.gitlab的区别 (百度相关内容得到的理解) 二.git最基本作用:版本控制 三.有集成了git的GIT安装包 github和gitlab都使用git该版 ...