CSS
- CSS语法
- CSS Id 和 Class
- CSS创建
- CSS背景
- CSS文本格式
- CSS 字体
- CSS链接
- CSS 列表
- CSS表格
- CSS 盒子模型(Box Model)
- CSS 边框
- CSS 轮廓（outline）
- CSS margin(外边距)
- CSS padding(填充)
- CSS 分组 和 嵌套 选择器
- CSS 尺寸 (Dimension)
- CSS 可见性
- CSS Position(定位)
- CSS 布局 - Overflow
- CSS Float(浮动)
- CSS 布局 - 水平 & 垂直对齐
- CSS 组合选择符
- CSS 伪类(Pseudo-classes)
- 语法
- anchor伪类
- 伪类和CSS类
- CSS :first-child 伪类
- 匹配第一个`
`元素
- 匹配所有`
`元素中的第一个` `元素
- 匹配所有作为第一个子元素的`
`元素中的所有 ` `元素
- 匹配第一个`
- CSS - :lang 伪类
- CSS 伪元素
- 伪类和为元素的区别
- CSS 导航栏
- CSS 下拉菜单
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在 样式表中
把样式添加到 HTML 4.0 中，是为了 解决内容与表现分离的问题
外部样式表可以 极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义 可层叠为一个
CSS语法
CSS 规则由两个主要的部分构成：
选择器，以及一条或多条声明
CSS Id 和 Class
Id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性id="para1":
#para1{
text-align:center;
color:red;
}
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
Class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}
可以指定特定的HTML元素使用class
所有的 p 元素使用 class=“center” 让该元素的文本居中
p.center {text-align:center;}
CSS创建
如何插入样式表
外部样式表(External style sheet)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存
内部样式表(Internal style sheet)
当单个文档需要特殊的样式时，就应该使用内部样式表
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联v样式(Inline style)
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法
例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。
Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表，而==文字排列（text-alignment）和字体尺寸（font-size）==会被内部样式表中的规则取代。
多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。
甚至可以在同一个 HTML 文档内部引用多个外部样式表。
优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
<head>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
</head>
<body>
<h3>测试！</h3>
</body>
CSS优先级法则
- 选择器都有一个权值，权值越大越优先；
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
- 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
- 继承的CSS 样式不如后来指定的CSS 样式；
- 在同一组属性设置中标有“!important”规则的优先级最大；
权重计算
- 内联样式表的权值最高 1000；
- ID 选择器的权值为 100
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
CSS背景
CSS 属性定义背景效果:
- background-color
颜色 - background-image
图片 - background-repeat
水平repeat-x垂直repeat-y平铺 - background-attachment
背景图像是否固定或者随着页面的其余部分滚动 - background-position
设置背景图像的起始位置
CSS文本格式
文本颜色
body {color:red;}
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线
a {text-decoration:none;}p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
也可以这样装饰文字：
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
不建议强调指出不是链接的文本，因为这常常混淆用户
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:50px;}
CSS 字体
CSS字体属性定义字体，加粗，大小，文字样式。
CSS字型
在CSS中，有两种类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
- 特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
CSS链接
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
CSS 列表
CSS列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
在HTML中，有两种类型的列表：
- 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
- 有序列表 - 列表项的标记有数字或字母，使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
list-style-type属性
指定列表项标记的类型
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
list-style-image属性
指定列表项标记的图像
ul{
list-style-image: url('sqpurple.gif');
}
列表 -简写属性
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
ul{
list-style: square url("sqpurple.gif");
}
可以按顺序设置如下属性：
- list-style-type
- list-style-position (有关说明，请参见下面的CSS属性表)
- list-style-image
如果上述值丢失一个，其余仍在指定的顺序，就没关系。
CSS表格
表格边框
table, th, td{
border: 1px solid black;
}
在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse属性。
折叠边框
table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}
表格宽度和高度
table {
width:100%;
}
th{
height:50px;
}
表格文字对齐
text-align属性设置水平对齐方式，向左，右，或中心
td{
text-align:right;
}
垂直对齐属性设置垂直对齐，比如顶部，底部或中间
td{
height:50px;
vertical-align:bottom;
}
表格填充
在表的内容中控制空格之间的边框，应使用td和th元素的填充属性
td{
padding:15px;
}
表格颜色
table, td, th{
border:1px solid green;
}
th{
background-color:green;
color:white;
}
CSS 盒子模型(Box Model)
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
元素的宽度和高度
例子中的元素的总宽度为300px
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS 边框
border-style属性
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset: 定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
border-width 属性
p.one{
border-style:solid;
border-width:5px;
}
p.two{
border-style:solid;
border-width:medium;
}
border-color属性
border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
p.one{
border-style:solid;
border-color:red;
}
p.two{
border-style:solid;
border-color:#98bf21;
}
CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
“CSS” 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。
1.outline是不占空间的，即不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）
2.outline有可能是非矩形的（火狐浏览器下）
CSS margin(外边距)
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
Margin可以使用负值，重叠的内容。
Margin - 单边外边距属性
可以指定不同的侧面不同的边距
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin - 简写属性
所有边距属性的简写属性是margin
margin:100px 50px;
margin属性可以有一到四个值。
-
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px -
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px -
margin:25px 50px;
上下边距为25px
左右边距为50px -
margin:25px;
所有的4个边距都是25px
CSS padding(填充)
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
padding - 单边外边距属性
指定不同的侧面不同的填充
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
padding - 简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。
这就是所谓的简写属性。所有的填充属性的简写属性是 padding
Padding属性，可以有一到四个值。
-
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px -
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px -
padding:25px 50px;
上下填充为25px
左右填充为50px -
padding:25px;
所有的填充都是25px
CSS 分组 和 嵌套 选择器
分组选择器
h1{
color:green;
}
h2{
color:green;
}
p{
color:green;
}
使用选择器之后
h1,h2,p{
color:green;
}
嵌套选择器
- .p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class=“marked” 的元素指定一个样式。
- .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
CSS 尺寸 (Dimension)
CSS 可见性
隐藏元素
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。
h1.hidden {visibility:hidden;}
visibility:hidden可以隐藏某个元素，该元素虽然被隐藏了，但仍然会影响布局。
h1.hidden {display:none;}
display:none可以隐藏某个元素，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
<h1><p><div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
<span><a>
CSS中块级、内联元素的应用
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
- display:block – 显示为块级元素
- display:inline – 显示为内联元素
- display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
如何改变一个元素显示
把列表项显示为内联元素
li {display:inline;}
把span元素作为块元素
span {display:block;}
CSS Position(定位)
position 属性指定了元素的定位类型。
position 属性的五个值：
- static
- relative
- fixed
- absolute
- sticky
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
div.static {
position: static;
border: 3px solid #73AD21;
}
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
p.pos_fixed{
position:fixed;
top:30px;
right:5px;
}
relative 定位
相对定位元素的定位是相对其正常位置
h2.pos_left{
position:relative;
left:-20px;
}
h2.pos_right{
position:relative;
left:20px;
}
移动相对定位元素，但它原本所占的空间不会改变。
h2.pos_top{
position:relative;
top:-50px;
}
相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
h2{
position:absolute;
left:100px;
top:150px;
}
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
CSS 布局 - Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
CSS Overflow
可以控制内容溢出元素框时在对应的元素区间内添加滚动条
overflow: visible
默认情况下，overflow 的值为 visible， 意思是内容溢出元素框
CSS Float(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边
彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
CSS 布局 - 水平 & 垂直对齐
元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用text-align: center;
图片居中对齐
要让图片居中对齐, 可以使用margin: auto;并将它放到 块 元素中
img {
display: block;
margin: auto;
width: 40%;
}
左右对齐 - 使用定位方式
我们可以使用position: absolute;属性来对齐元素
当使用 position 来对齐元素时, 通常<body>元素会设置 margin 和 padding。 这样可以避免在不同的浏览器中出现可见的差异。
左右对齐 - 使用 float 方式
如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。
我们可以在父元素上添加 overflow: auto;来解决子元素溢出的问题
垂直居中对齐 - 使用 padding
如果要水平和垂直都居中，可以使用 padding 和 text-align: center
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
垂直居中 - 使用 line-height
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行，添加以下代码: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
垂直居中 - 使用 position 和 transform
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
CSS 组合选择符
后代选择器(以空格分隔)
div p{
background-color:yellow;
}
子元素选择器(以大于号分隔）
只能选择作为某元素子元素的元素
div>p{
background-color:yellow;
}
相邻兄弟选择器（以加号分隔）
可选择紧接在另一元素后的元素，且二者有相同父元素。
div+p{
background-color:yellow;
}
普通兄弟选择器（以破折号分隔）
选取所有指定元素之后的相邻兄弟元素
div~p{
background-color:yellow;
}
CSS 伪类(Pseudo-classes)
添加一些选择器的特殊效果
语法
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
anchor伪类
链接的不同状态都可以以不同的方式显示
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。
伪类和CSS类
伪类可以与 CSS 类配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>
CSS :first-child 伪类
可以使用 :first-child 伪类来选择父元素的第一个子元素
匹配第一个<p>元素
p:first-child{
color:blue;
}
匹配所有<p>元素中的第一个<i>元素
p > i:first-child{
color:blue;
}
匹配所有作为第一个子元素的<p>元素中的所有 <i>元素
p:first-child i{
color:blue;
}
CSS - :lang 伪类
:lang 类为属性值为 no 的q元素定义引号的类型
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>
</body>
CSS 伪元素
添加一些选择器的特殊效果
语法
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式
p:first-line {
color:#ff0000;
font-variant:small-caps;
}
“first-line” 伪元素只能用于块级元素
下面的属性可应用于 “first-line” 伪元素：
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式
p:first-letter {
color:#ff0000;
font-size:xx-large;
}
“first-letter” 伪元素只能用于块级元素
下面的属性可应用于 “first-letter” 伪元素：
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if “float” is “none”)
- text-transform
- line-height
- float
- clear
伪元素和CSS类
伪元素可以结合CSS类：
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
多个伪元素
段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示
p:first-letter{
color:#ff0000;
font-size:xx-large;
}
p:first-line {
color:#0000ff;
font-variant:small-caps;
}
CSS - :before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。
h1:before {
content:url(smiley.gif);
}
CSS - :after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。
h1:after{
content:url(smiley.gif);
}
伪类和为元素的区别
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
CSS 导航栏
导航栏=链接列表
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
列表中删除边距和填充
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
垂直导航栏
a{
display:block;
width:60px;
}
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
垂直导航条实例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
background-color: #555;
color: white;
}
激活/当前导航条实例
添加 “active” 类来标准哪个选项被选中
a.active {
background-color: #4CAF50;
color: white;
}
创建链接并添加边框
可以在 <li>or<a>上添加text-align:center 样式来让链接居中。
可以在 border<ul>上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个<li>元素上添加border-bottom
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
全屏高度的固定导航条
左边是全屏高度的固定导航条，右边是可滚动的内容
下例为左侧固定导航条代码
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* 全屏高度 */
position: fixed;
overflow: auto; /* 如果导航栏选项多，允许滚动 */
}
水平导航栏
两种方法创建横向导航栏，使用内联(inline)或浮动(float)的列表项
想链接到具有相同的大小，必须使用浮动的方法
内联列表项
li{
display:inline;
}
display:inline; -默认情况下，<li>元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。
浮动列表项
对于所有的链接宽度相等，浮动 <li>元素，并指定为<a>元素的宽度
li{
float:left;
}
a{
display:block;
width:60px;
}
- float:left - 使用浮动块元素的幻灯片彼此相邻
- display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
- width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
水平导航条实例
创建一个水平导航条，在鼠标移动到选项后修改背景颜色。
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/*鼠标移动到选项上修改背景颜色 */
li a:hover {
background-color: #111;
}
激活/当前导航条实例
.active {
background-color: #4CAF50;
}
链接右对齐
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li style="float:right"><a class="active" href="#about">关于</a></li>
</ul>
添加分割线
<li>通过 border-right 样式来添加分割线:
/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
固定导航条
头部
ul {
position: fixed;
top: 0;
width: 100%;
}
底部
ul {
position: fixed;
bottom: 0;
width: 100%;
}
灰色水平导航条
固定在底部
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color: #666;
}
CSS 下拉菜单
.dropdown类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。
注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。
:hover选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
扫一扫
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
