981 1 分钟

# 实例

设置一些不同的列表样式:

# 无序列表实例

ul.circle {list-style-type: circle}
ul.square {list-style-type: square}

# 有序列表实例

ol.upper-roman {list-style-type: upper-roman}
ol.lower-alpha {list-style-type: lower-alpha}


2.2k 2 分钟

# list-style-type 属性定义及用法

在 css 中,list-style-type 属性是使用来设置列表项标记的类型,在有序列表和无序列表中经常都会使用该属性。

目前,所有主流浏览器都支持 list-style-type 属性,但是任何版本的 Internet Explorer(包括 IE8)都不支持属性值 "decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian" 或 "inherit";

如果需要同时设置多个列表属性,可以使用 list-style 属性,list-style 属性可以在一个声明中同时设置 list-style-type(列表项标记的类型), list-style-position(何处放置列表项标记), list-style-image(图像来替换列表项的标记)属性;

4.2k 4 分钟

# 所有 CSS 伪类、元素

选择器示例示例说明
:checkedinput:checked选择所有选中的表单元素
:disabledinput:disabled选择所有禁用的表单元素
:emptyp:empty选择所有没有子元素的 p 元素
:enabledinput:enabled选择所有启用的表单元素
:first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 元素
:in-rangeinput:in-range选择元素指定范围内的值
:invalidinput:invalid选择所有无效的元素
:last-childp:last-child选择所有 p 元素的最后一个子元素
:last-of-typep:last-of-type选择每个 p 元素是其母元素的最后一个 p 元素
:not(selector):not(p)选择所有 p 以外的元素
:nth-child(n)p:nth-child(2)选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)p:nth-last-child(2)选择所有 p 元素倒数的第二个子元素
:nth-last-of-type(n)p:nth-last-of-type(2)选择所有 p 元素倒数的第二个为 p 的子元素
:nth-of-type(n)p:nth-of-type(2)选择所有 p 元素第二个为 p 的子元素
:only-of-typep:only-of-type选择所有仅有一个子元素为 p 的元素
:only-childp:only-child选择所有仅有一个子元素的 p 元素
:optionalinput:optional选择没有 "required" 的元素属性
:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性
:read-onlyinput:read-only选择只读属性的元素属性
:read-writeinput:read-write选择没有只读属性的元素属性
:requiredinput:required选择有 "required" 属性指定的元素属性
:rootroot选择文档的根元素
:target#news:target选择当前活动 #news 元素 (点击 URL 包含锚的名字)
:validinput:valid选择所有有效值的属性
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
:first-letterp:first-letter选择每个 <p> 元素的第一个字母
:first-linep:first-line选择每个 <p> 元素的第一行
:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 <p> 元素
:beforep:before在每个 <p> 元素之前插入内容
:afterp:after在每个 <p> 元素之后插入内容
:lang(language)p:lang(it)为 <p> 元素的 lang 属性选择一个开始值

2.1k 2 分钟

# 一:display:flex 布局

display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是 W3C 提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。

Flex 是 Flexible Box 的缩写,意为 "弹性布局",用来为盒状模型提供最大的灵活性。设为 Flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。

987 1 分钟

# 1 flex 与 inline-flex 布局,都是弹性布局,盒状容器布局。 Flex 布局是什么?_w3cschool # 2 下面一个实例来说明一下: 有一个要求,要求 item 增多的时候,不会换行,并且 container 容器也会随时 item 的数量的增多,自动的变宽,让容器去适应 item 数量。 # 2.1 以下是二种不同的效果: flex inline-flex 说明: 1)display:flex 的时候,不管 item 有多少个,最多显示初始一屏宽度。 2)display:inline-flex 的时候,会随 item...
383 1 分钟

我们在使用 vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写。这时我们需要关闭。这里有两种方法。

1.8k 2 分钟

做网页有时候会用到 JS 检测 IE 的版本,下面是检测 Microsoft Internet Explorer 版本的三种代码!
有一种代码:

230 1 分钟

html, body &#123; margin:0; padding:0;&#125;.container &#123; height:100%;width:100%; /*width: 100%;*/ border: 1px solid green; position:fixed; background: url(image/login.jpg) no-repeat;text-align:center;&#125;要铺满的 div 加 class=&quot;container&quot;