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" ...
随机推荐
- spfa+链式前向星模板
#include<bits/stdc++.h> #define inf 1<<30 using namespace std; struct Edge{ int nex,to,w ...
- Gym 101128J Saint John Festival（凸包 + 二分判点和凸包关系）题解
题意:给你一堆黑点一堆红点,问你有最多几个黑点能找到三个红点,使这个黑点在三角形内? 思路:显然红点组成的凸包内的所有黑点都能做到.但是判断黑点和凸包的关系朴素方法使O(n^2),显然超时.那么我现在 ...
- 最新 React 源码学习笔记
最新 React 源码学习笔记 v17.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 refs https://github.com/learn ...
- Linux 创建/编辑/查看 文件/文件夹的命令汇总
Linux 创建/编辑/查看 文件/文件夹的命令汇总 Linux 创建文件的命令Linux,编辑文件的命令Linux 查看文件的命令,touch,vim,vi,gedit,cat,ls -a, ls ...
- js double 精度损失 bugs
js double 精度损失 bugs const arr = [ 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01 ]; // [ ...
- DOH & TRR & HTTPS & DNS
DOH & TRR & HTTPS & DNS DNS over HTTPS Trusted Recursive Resolver DNS 解析过程图解 DNS 解析过程 递归 ...
- navigator.geolocation.getCurrentPosition
navigator.geolocation.getCurrentPosition Geolocation API Specification 2nd Edition W3C Recommendatio ...
- how to drag a tab to open it in a new window
how to drag a tab to open it in a new window 在新的窗口中打开拖拽的 tab? https://superuser.com/questions/131928 ...
- Vue SSR in Action
Vue SSR in Action https://ssr.vuejs.org/ https://ssr.vuejs.org/api/ https://ssr.vuejs.org/guide/data ...
- nodejs 查看进程表
psaux tasklist system-tasks const { exec } = require("child_process"); const isWindows = p ...