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盒布局-省份选择盘的实现的更多相关文章

  1. css笔记 - flex弹性盒布局

    flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...

  2. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  3. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  4. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

  5. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  6. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  7. CSS盒模型

    CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

  8. CSS3-box-flex弹性盒布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. CSS3-box盒布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. zoj-3870 (二进制)

    For an upcoming programming contest, Edward, the headmaster of Marjar University, is forming a two-m ...

  2. hdu4801 PocketCube 2阶魔方

    http://acm.hdu.edu.cn/showproblem.php?pid=4801 1. 题目描述给定一个2×2×22×2×2的魔方,当某个面上的4个小块颜色均相同时,称这个面为comple ...

  3. js ^ operator

    js ^ operator 位运算 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwis ...

  4. webpack & webpack-cli

    webpack & webpack-cli Error: Cannot find module 'webpack' Google site: stackoverfow UnhandledPro ...

  5. how to get svg text tspan x,y position value in js

    how to get svg text tspan x,y position value in js <svg xmlns="http://www.w3.org/2000/svg&qu ...

  6. Flutter 在同一页面显示List和Grid

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends State ...

  7. Flutter ReorderableListView 可拖拽的列表

    import 'package:flutter/material.dart'; import 'dart:math' as math; void main() => runApp(MyApp() ...

  8. 「NGK每日快讯」2021.2.4日NGK公链第93期官方快讯!

  9. 微信附近的人，用redis也能实现？（GEO）

    相信微信附近的人的功能大家都应该用过 我可以很随意的通过我自己的定位能看到我附近的人,并且能看到那个人距离我的距离,大家有没有思考过这个是怎么实现的? 作为一个程序猿任何问题应该都有一个思考的过程,而 ...

  10. Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题

    原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...