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" ...
随机推荐
- JavaScript基本包装类介绍
为了便于操作基本类型值,ECMAScript 提供了 3 个特殊的引用类型:Boolean.Number和 String.这些类型与其他引用类型相似,但同时也具有与各自的基本类型相应的特殊行为.实际上 ...
- mybaits(十)mybatis常见面试
面试题总结 1.MyBatis 解决了什么问题? 或:为什么要用 MyBatis? 或:MyBatis 的核心特性? 1)资源管理(底层对象封装和支持数据源) 2)结果集自动映射 3)SQL 与代 ...
- ASP.NET Core 中间件（Middleware)（一）
本文主要目标:记录Middleware的运行原理流程,并绘制流程图. 目录结构: 1.运行环境 2.Demo实践 3.源码追踪 4.AspnetCore内置middleware 一.运行环境 Visu ...
- git & github & git clone & 'git clone' failed with status 128
git & github & git clone & 'git clone' failed with status 128 'git clone' failed with st ...
- git & Angular git commit 规范
git & Angular git commit 规范 https://github.com/angular/angular/commits/master https://github.com ...
- Flutter: AnimatedList 一个滚动容器，可在插入或移除项目时为其设置动画
Flutter Widget of the Week import 'dart:math'; import 'package:flutter/material.dart'; void main() = ...
- NGK生态之星空计划启动在即，稀有VAST高兑换比带来高价值！
NGK生态之星空计划启动在即,为了感谢NGK布道者的支持,NGK官方将全力辅助算力市场,开展全新的星空计划,并发行星空币SPC,空投给算力持有者进行额外奖励. 至此,SPC已经顺利完成2轮空投,也初步 ...
- NGK全球行伦敦站，SPC推动全球数字金融创新
近日,NGK全球巡回路演在英国的首都伦敦盛大落幕,此次路演有幸邀请到了西欧区块链业界弗洛伊德大咖,NGK方面代表鲍利斯以及英国及其组周边国家社群意见代表马丁内斯等人,总计参与人数达到了数十人. 路演一 ...
- NGK全球巡回路演莫斯科站，共探BGV能否超越YFI?
近日,NGK全球巡回路演在俄罗斯首都莫斯科落下帷幕.此次路演取得了空前的成功.路演伊始俄罗斯路演讲师Andrew致开幕辞,安德鲁称,俄罗斯作为未一个幅员辽阔的大国,区块链技术有着非常大的应用场景. 俄 ...
- Spring学习过程中遇到的No bean named 'beanId' is defined报错
ApplicationContext applicationContext= new ClassPathXmlApplicationContext("bean.xml");Obje ...