Java WEB 八

CSS

九、CSS实例【续】

12、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 元素指定一个样式。

举例：

p{
    color:blue;
    text-align:center;
}
.marked{
    background-color:red;
}
.marked p{
    color:white;
}
p.marked{
    text-decoration:underline;
}

13、CSS 尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

Ⅰ、所有CSS 尺寸 (Dimension)属性

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

14、CSS 显示 与 可见性

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

Ⅰ、隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
举例：

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
举例：

h1.hidden {display:none;}

Ⅱ、CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：

• < h1>
• < p>
• < div>

内联元素只需要必要的宽度，不强制换行。
内联元素的例子：

• < span>
• < a>

Ⅲ、如何改变一个元素显示

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
下面的示例把列表项显示为内联元素：
举例：

li {display:inline;}

下面的示例把span元素作为块元素：
举例：

span {display:block;}

注意： 变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

15、CSS 定位

position 属性指定了元素的定位类型。
position 属性的五个值：

• static
• relative
• fixed
• absolute
• sticky

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

Ⅰ、static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
实例

div.static {
    position: static;
    border: 3px solid #73AD21;
}

Ⅱ、fixed 定位

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
举例：

p.pos_fixed{
    position:fixed;
    top:30px;
    right:5px;
}

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。

Ⅲ、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 定位的元素和其他元素重叠。

Ⅴ、sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

举例：

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

Ⅵ、重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
举例：

img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

Ⅶ、所有的CSS定位属性

“CSS” 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。

属性	说明	值	CSS
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。	auto、length、%、inherit	2
clip	剪辑一个绝对定位的元素	shape、auto、inherit	2
cursor	显示光标移动到指定的类型	url、auto、crosshair、default、pointer、move、e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、text、wait、help	2
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。	auto、length、%、inherit	2
overflow	设置当元素的内容溢出其区域时发生的事情。	auto、hidden、scroll、visible、inherit	2
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域	auto、hidden、scroll、visible、no-display、no-content	2
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域	auto、hidden、scroll、visible、no-display、no-content	2
position	指定元素的定位类型	absolute、fixed、relative、static、inherit	2
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。	auto、length、%、inherit	2
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。	auto、length、%、inherit	2
z-index	设置元素的堆叠顺序	number、auto、inherit	2

16、CSS 布局

CSS 布局 属性用于控制内容溢出元素框时显示的方式。

Ⅰ、CSS Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。
注意: overflow 属性只工作于指定高度的块元素上。
注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

Ⅱ、overflow: visible

默认情况下，overflow 的值为 visible， 意思是内容溢出元素框。
举例：

div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}

17、CSS 浮动

Ⅰ、什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

Ⅱ、元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
举例：

img{
    float:right;
}

Ⅲ、彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
在这里，我们对图片廊使用 float 属性：
举例：

.thumbnail{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

Ⅳ、清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：
举例：

.text_line{
    clear:both;
}

Ⅴ、CSS 中所有的浮动属性

“CSS” 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。

属性	描述	值	CSS
clear	指定不允许元素周围有浮动元素。	left、right、both、none、inherit	1
float	指定一个盒子（元素）是否可以浮动。	left、right、none、inherit	1

18、CSS 对齐方式

Ⅰ、元素居中对齐

要水平居中对齐一个元素(如 < div>), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配。
举例：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

Ⅱ、文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
举例：

.center {
    text-align: center;
    border: 3px solid green;
}

Ⅲ、图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中。
举例：

img {
    display: block;
    margin: auto;
    width: 40%;
}

Ⅳ、左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:
举例：

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

**注释：**绝对定位元素会被从正常流中删除，并且能够交叠元素。
提示: 当使用 position 来对齐元素时, 通常 < body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素，设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：
举例：

body {
    margin: 0;
    padding: 0;
}
 
.container {
    position: relative;
    width: 100%;
}
 
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

Ⅴ、左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素:

举例：

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

当像这样对齐元素时，对 < body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。

可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:
举例：

.clearfix {
    overflow: auto;
}

当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明：

举例：

body {
    margin: 0;
    padding: 0;
}
 
.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}

Ⅵ、垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:
举例：

.center {
    padding: 70px 0;
    border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 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

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:
举例：

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

19、CSS 组合选择符

Ⅰ、CSS 组合选择符

组合选择符说明了两个选择器直接的关系。
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:

• 后代选择器(以空格 分隔)
• 子元素选择器(以大于 > 号分隔）
• 相邻兄弟选择器（以加号 + 分隔）
• 普通兄弟选择器（以波浪号 ～ 分隔）

Ⅱ、后代选择器

后代选择器用于选取某元素的后代元素。
以下实例选取所有

元素插入到

元素中:
举例：

div p{
  background-color:yellow;
}

Ⅲ、子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
以下实例选择了

元素中所有直接子元素

举例：

div>p{
  background-color:yellow;
}

Ⅳ、相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于 < div> 元素后的第一个 < p> 元素
举例：

div+p{
  background-color:yellow;
}

Ⅴ、后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 < div> 元素之后的所有相邻兄弟元素 < p>
举例：

div~p{
  background-color:yellow;
}

20、CSS 伪类

CSS伪类是用来添加一些选择器的特殊效果。

Ⅰ、语法

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

Ⅱ、anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
举例：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，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 伪类来选择父元素的第一个子元素。
注意：在IE8的之前版本必须声明<!DOCTYPE> ，这样 :first-child 才能生效。

Ⅴ、匹配第一个 < p> 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 < p> 元素
举例：

p:first-child{
    color:blue;
}

Ⅵ、匹配所有< p> 元素中的第一个 < i> 元素

在下面的例子中，选择相匹配的所有< p>元素的第一个 < i> 元素
举例：

p > i:first-child{
    color:blue;
}

Ⅶ、匹配所有作为第一个子元素的 < p> 元素中的所有 < i> 元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 < p> 元素中的所有 < i> 元素：
举例：

p:first-child i{
    color:blue;
}

Ⅷ、CSS - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则
注意：IE8必须声明<!DOCTYPE>才能支持;lang伪类。
在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：
举例：

q:lang(no) {quotes: "~" "~";}

Ⅸ、所有CSS伪类/元素

选择器	举例	举例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not§	选择所有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-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个< p> 元素的第一个字母
:first-line	p:first-line	选择每个< p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 < p> 元素
:before	p:before	在每个< p>元素之前插入内容
:after	p:after	在每个< p>元素之后插入内容
:lang(language)	p:lang(it)	为< p>元素的lang属性选择一个开始值

21、CSS 伪元素

CSS伪元素是用来添加一些选择器的特殊效果。

Ⅰ、语法

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

Ⅱ、:first-line 伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化
举例：

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>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

Ⅴ、多个伪元素

可以结合多个伪元素来使用。
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示：
举例：

p:first-letter{
    color:#ff0000;
    font-size:xx-large;
}
p:first-line {
    color:#0000ff;
    font-variant:small-caps;
}

Ⅵ、CSS - :before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 < h1>元素前面插入一幅图片：
举例：

h1:before {
    content:url(smiley.gif);
}

Ⅶ、CSS - :after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 < h1> 元素后面插入一幅图片：
举例：

h1:after{
    content:url(smiley.gif);
}

Ⅷ、所有CSS伪类/元素

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个< p> 元素的第一个字母
:first-line	p:first-line	选择每个< p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 < p> 元素
:before	p:before	在每个< p>元素之前插入内容
:after	p:after	在每个< p>元素之后插入内容
:lang(language)	p:lang(it)	为< p>元素的lang属性选择一个开始值

22、CSS 导航栏

导航栏分为水平和垂直两种。

Ⅰ、导航栏

熟练使用导航栏，对于任何网站都非常重要。
使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

Ⅱ、导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。
导航条基本上是一个链接列表，所以使用 < ul> 和 < li>元素非常有意义：
举例：

<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;
}

例子解析：

• list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
• 移除浏览器的默认设置将边距和填充设置为0

上面的例子中的代码是垂直和水平导航栏使用的标准代码。

Ⅲ、垂直导航栏

上面的代码，我们只需要 < a>元素的样式，建立一个垂直的导航栏。
举例：

a{
    display:block;
    width:60px;
}

示例说明：

• display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
• width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

注意： 请务必指定 < a>元素在垂直导航栏的的宽度。如果省略宽度，IE6可能产生意想不到的效果。

Ⅳ、垂直导航条实例

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色。
举例：

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” 类来标准哪个选项被选中：
举例：

li 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” 类来标准哪个选项被选中：
举例：

.active {
    background-color: #4CAF50;
}

链接右对齐
将导航条最右边的选项设置右对齐 (float:right;)：
举例：

<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;
}

23、CSS 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

Ⅰ、基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单。
举例：

<style>
	.dropdown {
	  position: relative;
	  display: inline-block;
	}
	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #f9f9f9;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  padding: 12px 16px;
	}
	.dropdown:hover .dropdown-content {
	  display: block;
	}
</style>
[mycode3]
[mycode3 type="html"]
<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>百度</p>
    <p>www.baidu.com</p>
  </div>
</div>

实例解析：
HTML 部分：
我们可以使用任何的 HTML 元素来打开下拉菜单，如：< span>, 或 a < button> 元素。
使用容器元素 (如： < div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。
使用 < div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

Ⅱ、下拉菜单

创建下拉菜单，并允许用户选取列表中的某一项。
这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式。
举例

<style>
	/* 下拉按钮样式 */
	.dropbtn {
	    background-color: #4CAF50;
	    color: white;
	    padding: 16px;
	    font-size: 16px;
	    border: none;
	    cursor: pointer;
	}
	
	/* 容器 <div> - 需要定位下拉内容 */
	.dropdown {
	    position: relative;
	    display: inline-block;
	}
	
	/* 下拉内容 (默认隐藏) */
	.dropdown-content {
	    display: none;
	    position: absolute;
	    background-color: #f9f9f9;
	    min-width: 160px;
	    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	}
	
	/* 下拉菜单的链接 */
	.dropdown-content a {
	    color: black;
	    padding: 12px 16px;
	    text-decoration: none;
	    display: block;
	}
	
	/* 鼠标移上去后修改下拉菜单链接颜色 */
	.dropdown-content a:hover {background-color: #f1f1f1}
	
	/* 在鼠标移上去后显示下拉菜单 */
	.dropdown:hover .dropdown-content {
	    display: block;
	}
	
	/* 当下拉内容显示后修改下拉按钮的背景颜色 */
	.dropdown:hover .dropbtn {
	    background-color: #3e8e41;
	}
</style>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
  </div>
</div>

Ⅲ、下拉内容对齐方式

float:left;左浮动下拉列表
float:right;右浮动下拉列表
如果你想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码 right: 0;
举例

.dropdown-content {
    right: 0;
}

总结：

      今天更新的还是CSS的实例，CSS实例的内容实在太多！讲很长时间可能都讲不完！因为还有后面的CSS3的引入，又加入了许多形形色色的功能！例如：2D、3D动画、渐变、过渡等等。以及Web响应式页面！何为响应式页面？简单来说就是根据客户端的不同，页面会缩放至客户端的分辨率的大小。例如：写了一个百度的页面，只写一套代码，在电脑上展示的是电脑分辨率大小的页面，在Ipad上展现的是平板的分辨率的大小，手机也是同理！再简单点就是写一套代码，会自动适应各种电子设备的使用。CSS的属性还是需要多了解一下！
      今天是父亲节，祝天下所有的父亲，父亲节快乐！ 随着我们慢慢长大，我们对父亲的称呼也渐渐的发生了改变！小时候我们叫的是：“爸爸”！长大了我们直接叫的是：“爸”！我们是随着时间的推移长大了，父亲们也随着时间的推移慢慢老去！父亲总是像一座大山挡在我们前面，在无形中挡住了一切！还记得曾经朱自清先生写的那篇《背影》吗？看着父亲拖着肥胖的身躯翻过月台去买橘子，然后又拎着橘子，将橘子放到月台上，又爬上月台。我记得我看到这的时候我真的有些莫名的心酸，眼前不禁有一些湿润！父亲从小陪我们长大，如今父亲慢慢变老，我们陪伴父亲到老！而不是只记得《背影》中的那句：“你就站在这里不要动！我去给你买几个橘子去”！父亲的爱是严厉的，在严厉中又包含对我们无微不至的关怀和爱！放下面子给自己的父亲说一声：“爸爸，父亲节快乐！”，没有什么不好意思的！让父亲也能感受到我们对父亲的爱！
      不知不觉又到凌晨2:15了，比昨天又晚睡一刻钟，博客再多我也没有放弃过，我也不知道会有多少小伙伴们会看，但是无论如何我都会继续写下去的！夜已经很深了，不再往下熬了，太伤身体了！小伙伴们也不要养成熬夜的习惯哦！
      今天的博客先更新到这里咯！有什么不对的地方或者有什么建议！欢迎小伙伴们在评论区留言哦！
      如果本篇博客对大家有帮助，希望大家能够点赞、关注！在此先谢过各位小伙伴了！
      最后，愿我们都能在各行各业中能够取得不同的成就，不负亲人、朋友、老师、长辈和国家的期望！能够用自身的所学知识为国家贡献出自己的一份力量！一起加油！
                                                                                                                       2021年6月20日夜