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" ...
随机推荐
- axios增加自定义headers，页面上出现，服务端收不到
问题 axios增加自定义headers,页面上出现,服务端收不到 原因 vue-cli起的服务是用node-http-proxy中间件处理的 默认是只有几个常用的header,自定义header是直 ...
- Verilog基础语法总结
去年小学期写的,push到博客上好了 Verilog 的基本声明类型 wire w1; // 线路类型 reg [-3:4] r1; // 八位寄存器 integer mem[0:2047]; // ...
- HDU 4280 Island Transport（HLPP板子）题解
题意: 求最大流 思路: \(1e5\)条边,偷了一个超长的\(HLPP\)板子.复杂度\(n^2 \sqrt{m}\).但通常在随机情况下并没有isap快. 板子: template<clas ...
- Google reCAPTCHA 2 : Protect your site from spam and abuse & Google reCAPTCHA 2官方教程
1
- website SEO all in one
website SEO all in one SEO 指标量化 https://www.similarweb.com/zh/top-websites/ demo https://www.similar ...
- js assert
js assert console.assert The console.assert() method writes an error message to the console if the a ...
- mdn & remove & removeChild
mdn & remove & removeChild Element https://developer.mozilla.org/en-US/docs/Web/API/Element ...
- Dyno-queues 分布式延迟队列 之 生产消费
Dyno-queues 分布式延迟队列 之 生产消费 目录 Dyno-queues 分布式延迟队列 之 生产消费 0x00 摘要 0x01 前情回顾 1.1 设计目标 1.2 选型思路 0x02 产生 ...
- 16_MySQL聚合函数的使用（重点，建议大家多动手操作）
本节所涉及的SQL语句 -- 聚合函数 SELECT AVG(sal+IFNULL(comm,0)) AS avg FROM t_emp; -- SUM SELECT SUM(sal) FROM t_ ...
- 死磕以太坊源码分析之EVM如何调用ABI编码的外部方法
死磕以太坊源码分析之EVM如何调用ABI编码的外部方法 配合以下代码进行阅读:https://github.com/blockchainGuide/ 写文不易,给个小关注,有什么问题可以指出,便于大家 ...