CSS基础知识，必须掌握！！！

文章列表

CSS基础知识，必须掌握！！！

CSS基础知识

Background（背景）
CSS文本格式
- 文本颜色
- 文本对齐格式
- 文本修饰
- 文本缩进
CSS中的字体
- 字体样式
- 字体大小
CSS链接（link）
CSS列表
- 不同列表标项
- CSS列表项用图片作为标记
- CSS列表标记项位置
CSS中表格（table）
表格边框
- 折叠边框
- 设置表格的宽度和高度
- 表格文字对齐方式
- 表格填充与表格颜色
CSS盒子模型
- 元素的宽度和高度
CSS边框
- 边框样式
- 边框宽度和颜色
- 边框单独设置各边
CSS轮廓（outline）属性
CSS块级元素、行内元素、行内快元素
CSS中的position定位
CSS中 overflow的用法
CSS浮动（Float）
CSS中的对齐&垂直居中对齐
- 元素居中对齐
- 文本居中对齐
- 图片居中对齐
- 垂直居中对齐（使用padding）
CSS中的选择器
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
- 普通兄弟选择器
css导航栏（重要）
- 水平导航栏
- 垂直导航栏
完结

Background（背景）

CSS背景属性用于定义HTML元素的背景
CSS属性定义背景效果：

background-color -> 定义背景颜色
background-image -> 定义背景图片
background-repeat -> 是否平铺，水平平铺（repeat-x）、垂直平铺（repeat-y）、不平铺（no-repeat）
background-attachment -> 是否固定背景图片，不随滚动而发生位置改变
background-position -> 背景图片位置（top、left、right）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景元素</title><style>body {background-image: url(image/lisa.jpeg);background-color: pink;background-repeat: no-repeat;background-position: center;background-attachment: fixed;}</style>
</head>
<body><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p>
</body>
</html>

注意： 段落多的用意是为了显示图片固定的效果

CSS文本格式

文本颜色

颜色属性可以用来设置文字的颜色。
CSS中的颜色经常的指定

十六进制值如：#FFFFFF
一个RGB值如： RGB(255,0，0)
颜色的名称如： red、pink、blue

style {h1 {color:red;}h2 {color:#ff00ff;}p {color:RGB(255,0,0);	}
}

文本对齐格式

文本排列属性是用来设置文本的水平对齐格式
文本可居中或者左对齐及右对齐

用法：

text-align:center -> 居中对齐
text-align:left -> 左对齐
text-align -> 右对齐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本对齐</title><style>p {text-align:center;color: red;}</style>
</head>
<body><p>真的很有意思</p>
</body>
</html>

文本修饰

text-decoration属性用来设置或删除文本的装饰
注意： 主要用来删除超链接的下划线

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本装饰</title><style>p a {text-decoration: none;}</style>
</head>
<body><p>这是一个超链接:<a href="#">去往有点意思的地方</a></p>
</body>
</html>

文本缩进

特点：文本缩进是用来指定文本第一行的缩进
演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本缩进</title><style>#one {/* text-indent: 2em; */text-indent: 50px;}</style>
</head>
<body><p id="one">还是有点意思啊</p><p>这就没意思了啊</p><p>这就没意思了啊</p><p>这就没意思了啊</p><p>这就没意思了啊</p>
</body>
</html>

注意： 如果要使用首行缩进两个字，可以使用2em,每个em都会自己计算每个文字缩进的大小。

CSS中的字体

CSS中字体属性定义字体、加粗、大小、文字样式
字体系列：可以设置为宋体、微软雅黑等等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体样式</title><style>h1 {font-family:"Times New Roman",Times,serif;}</style>
</head>
<body><h1>有点意思</h1>
</body>
</html>

字体样式

用途： 主要用来指定斜体文字的字体样式属性
主要有三个值：

正常-正常显示文字 {font-style:normal;}
斜体-以斜体来显示文字 {font-style:italic;}
倾斜的文字-文字向一般倾斜 {font-style:oblique;}

CSS链接（link）

链接的样式可以用CSS属性来设置，如颜色、字体、大小等
常见的链接伪类选择器：

a:link -> 未被访问的链接
a:visited -> 已经被访问过的链接
a:hover -> 鼠标移动到链接上时显示的效果
a:active -> 链接被点击的那一时刻，鼠标未松开

注意： 若设置若干链接样式，也有一些顺序规则

a:hover 必须跟在a:link 和 a:visited 的后面
a:active 必须跟在a:hover 的后面

演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>链接伪类</title><style>a:link {color: yellow;text-decoration: none;}a:visited {color: red;}a:hover {color: orange;}a:active {color: pink;}</style>
</head>
<body><a href="#" target="_blank">有点意思</a>
</body>
</html>

CSS列表

在HTML中设置列表有两种类型：

无序列表ul，在CSS中可以设置列表标记项（如：小黑点、小方框等）
有序列表ol，列表项可以是数字也可以是字母

在CSS中可以进一步给出样式，并可以用图像作为列表标记项

不同列表标项

CSS中list-style-type 可以指定列表标记项类型
实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表标记项</title><style>.a {list-style: circle;}.b {list-style: square;}.c {list-style: lower-roman;}.d {list-style: upper-latin;}</style>
</head>
<body><ul class="a"><li>有点意思</li><li>真有意思</li><li>太有意思</li></ul><ul class="b"><li>有点意思</li><li>真有意思</li><li>太有意思</li></ul><ol class="c"><li>有点意思</li><li>真有意思</li><li>太有意思</li></ol><ol class="d"><li>有点意思</li><li>真有意思</li><li>太有意思</li></ol>
</body>
</html>

CSS列表项用图片作为标记

用法： 使用list-style-image： 可以设置图像列表标记项
示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图像列表标记项</title><style>.a {list-style-image:url(image/lisa.jpeg);}</style>
</head>
<body><ul class="a"><li>有点意思</li><li>真有意思</li><li>太有意思</li></ul>
</body>
</html>

CSS列表标记项位置

这CSS中可以使用list-style-position设置列表标记项位置
一般有三个属性：

inside -> 列表项标记放在文本内，环绕文本根据标记对齐
outside -> 默认值。保持标记文本的左侧
inherit -> 表示从父亲元素继承list-style-position的值

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图像列表标记项</title><style>.a {list-style-image:url(image/lisa.jpeg);}</style>
</head>
<body><ul class="a"><li>有点意思</li><li>真有意思</li><li>太有意思</li></ul>
</body>
</html>

CSS中表格（table）

表格边框

用法： 指定表格边框，使用boarder属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格边框</title><style>table,th,td {border: 1px solid pink;}</style>
</head>
<body><table><tr><th>数据类型</th><th>大小</th></tr><tr><td>byte</td><td>1字节</td></tr><tr><td>short</td><td>2字节</td></tr><tr><td>int</td><td>4字节</td></tr></table>
</body>
</html>

折叠边框

用法： 使用boarder-callopse设置表格边框是否折叠为单个边框或者分开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格边框</title><style>table,th,td {border: 1px solid pink;}table {/* 指定折叠边框 */border-collapse: collapse;}</style>
</head>
<body><table><tr><th>数据类型</th><th>大小</th></tr><tr><td>byte</td><td>1字节</td></tr><tr><td>short</td><td>2字节</td></tr><tr><td>int</td><td>4字节</td></tr></table>
</body>
</html>

设置表格的宽度和高度

用法： 使用height和width属性分别设置表格的宽度和高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格边框</title><style>table,th,td {border: 1px solid pink;}table {/* 设置表格宽度和高度 */width: 400px;height: 50px;}</style>
</head>
<body><table><tr><th>数据类型</th><th>大小</th></tr><tr><td>byte</td><td>1字节</td></tr><tr><td>short</td><td>2字节</td></tr><tr><td>int</td><td>4字节</td></tr></table>
</body>
</html>

表格文字对齐方式

用法： 使用text-align属性一般设置center（居中对齐）、left（居左对齐）、right（居右对齐）；使用vertical-align可以实现垂直方向对齐，top（顶部对齐）、bottom（底部对齐）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格边框</title><style>table,th,td {border: 1px solid pink;}td {/* 设置表格文字对齐方式 */text-align: center;}td {/* 设置垂直对齐 */height: 50px;vertical-align: top;}</style>
</head>
<body><table><tr><th>数据类型</th><th>大小</th></tr><tr><td>byte</td><td>1字节</td></tr><tr><td>short</td><td>2字节</td></tr><tr><td>int</td><td>4字节</td></tr></table>
</body>
</html>

表格填充与表格颜色

表格填充： 如需设置表格中的内容与边框的距离可以使用pidding属性设置相应的像素值
表格颜色： 可以使用background-color 设置表个背景颜色，color直接可以设置表格中的字体颜色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格边框</title><style>table,th,td {border: 1px solid pink;}td {/* 控制表格内容与边框的距离 */padding: 20px;}th {background-color: orange;color: white;}</style>
</head>
<body><table><tr><th>数据类型</th><th>大小</th></tr><tr><td>byte</td><td>1字节</td></tr><tr><td>short</td><td>2字节</td></tr><tr><td>int</td><td>4字节</td></tr></table>
</body>
</html>

CSS盒子模型

说明： 所有HTML元素都可以看作为一个盒子模型，CSS盒子模型本质上就是一个盒子，它包括：边距、边框、填充、内容。
CSS基础知识，必须掌握！！！

Margin（外边距） -> 清除边框外的区域，外边距是透明的。
Borader（边框） -> 围绕在内边距和内容外的边框。
Padding （内边距）-> 内容周围区域，内边距也是透明的
Content （内容） -> 盒子中的内容，显示图像和文字

元素的宽度和高度

注意： 一般指定一个CSS元素的宽度和高度属性时，你只是设置内容上的宽度和高度。完整的大小元素，你还需要添加内边距、边框、外边距

下面看一个例子理解：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>div {background-color: pink;width: 600px;height: 400px;/* 边框大小30像素、实线、橙色 */border: 30px solid orange;padding: 40px;margin: 30px;}</style>
</head>
<body><div>看看我吧，真的有点意思</div>
</body>
</html>

CSS基础知识，必须掌握！！！

CSS边框

在CSS中允许设置一个元素边框的样式和颜色，比如有四条边的边框和不是方形的边框也是可以设置的。

边框样式

用法： 一般通过boarder-style属性来定义边框的样式

值	说明
none	默认无边框
dotted	定义一个点线边框
solid	定义实线边框
double	定义两个边框，两个边框宽度相同
groove	定义3D沟槽边框，效果取决于边框颜色值
ridge	定义3D脊边框，效果取决于边框颜色值
inset	定义3D嵌入边框，效果取决于颜色值
outset	定义3D突出边框，效果取决于颜色值

边框宽度和颜色

通过borader-color可以设置边框的颜色，颜色三种写法
通过borader-width可以设置边框的宽度，给定响应的像素值

边框单独设置各边

说明： 在CSS中可以指定不同侧边不同的边框

通过boarder-top-style设置上边框的样式
通过boarder-right-style设置右边框的样式
通过boarder-bottom-style设置下边框的样式
通过boarder-left-style设置左边框的样式

CSS轮廓（outline）属性

说明： 轮廓位于边框边缘的外围，可起到突出元素的作用。
使用： outline属性规定元素轮廓的样式、颜色、宽度。
属性值：

outline-color -> 设置轮廓的颜色
outline-style -> 设置轮廓的样式
outline-width -> 设置轮廓的宽度

属性	值
outline-color	颜色的三种表达方式
outline-style	none、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit
outline-width	thin、medium、thick、length、inherit

CSS块级元素、行内元素、行内快元素

块级元素： 块级元素占用了全部的宽度（页面一整行），收尾都是换行符。
行内元素： 行内元素只需要必要的宽度，不强制换行
行内块元素： 行内快元素既有块级元素的特点也有行内元素的特点，主要特点就是它可以指明宽度和高度。

块级元素举例：

行内元素举例：

行内快元素： 行内块元素可以从块级元素和行内元素转换而来，同时，块级元素可以转换为行内元素，行内元素也可以转换为块级元素。
转换方式：

display:inline-block -> 转换为行内块元素
dispaly:inline -> 转换为行内元素
display:block -> 转换为块级元素

例子： 这是一个块级元素转换为行内块元素的例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>块级元素</title><style>div.a {display: inline-block;width: 200px;height:100px;background-color: pink;font-size: 20px;}div.b {display: inline-block;width: 200px;height:100px;background-color: red;font-size: 20px;}</style>
</head>
<body><div class="a">有点意思</div><div class="b">我也有点意思</div>
</body>
</html>

CSS中的position定位

说明： position属性指定了元素的定位类型
属性值：

static -> 无特殊定位
relative -> 相对定位元素移动
fixed -> 相对于浏览器位置是固定的，不随滚轮滑动而改变位置
absolute -> 相对于已经定位的父元素，如果元素没有已经定位的父元素，这个父元素就是
stiky -> 粘贴定位依赖与滚轮来定位，滚轮往下滚的时候效果才能显示出来

例子： 这是一个粘贴定位的例子
注意： 指定属性后一定要制定粘贴定位的位置，否则不起效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素定位</title><style>p.sticky {position: -webkit-sticky;position: sticky;top: 10px;border: 5px solid pink;background-color: orange;}</style>
</head>
<body><p class="sticky">有点意思</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p><p>滑动滚轮</p>
</body>
</html>

CSS中 overflow的用法

说明：

值	说明
inherit	从父元素继承overflow的值
visible	默认值，内容不会被修剪，呈现在元素框之外
hidden	内容会被修剪，其余内容不会呈现
scroll	内容会被修剪，但是浏览器显示滚动条呈现
auto	如果内容被修剪，浏览器显示滚动条查看其余内容

例子： 演示scroll效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>overflow的使用</title><style>div {width: 200px;height:50px;border: 5px solid pink;overflow: scroll;}</style>
</head>
<body><div><p>有点意思</p><p>有点意思</p><p>有点意思</p><p>有点意思</p></div>
</body>
</html>

CSS浮动（Float）

作用： 一般这个属性会用于一段文字中的图片浮动，可以图片浮动在文字的左边，也可以浮动在文字的右边。

用法： 在图片标签使用属性float

float:left -> 浮动在文字左边
float:right -> 浮动在文字右边
float:inline-start -> 浮动在文字的开头
float:inline-end -> 浮动在文字的结尾

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>float的使用</title><style>p img{float: inline-start;}</style>
</head>
<body><p> <img src="image/lisa.jpeg" width="200px">--有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思--</p>
</body>
</html>

CSS中的对齐&垂直居中对齐

说明： CSS中的对齐无非就两种，一种是使用特点的属性使元素居中对齐，还有一种就是通过指定的宽度将两边的边距平均分配。

元素div对齐，可以使用margin：auto
表格中的文本居中对齐可以只用padding设置左右边距一样可以实现居中对齐

元素居中对齐

例子： div元素居中对齐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对齐&垂直居中对齐</title><style>div {background-color: pink;border: 3px solid orange;margin: auto;/*如果没有设置则起不到效果*/width: 60%;}</style>
</head>
<body><div>有点意思</div>
</body>
</html>

文本居中对齐

说明： 最常用text-align:center就能实现

图片居中对齐

说明： 可以是图片元素包裹到块级元素中，让块级元素居中对齐，例如吧img元素包裹到p标签中，让p标签中的内容居中对齐；还可以图片（行内元素）转换为块级元素，按照块级元素的方式居中对齐。

例子：包裹在块级元素中对齐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片居中对齐</title><style>p {text-align: center;}</style>
</head>
<body><p><img src="image/pyy.jpeg" width="300"></p>
</body>
</html>

垂直居中对齐（使用padding）

说明：使元素的头部和底部都设置同样的边距来呈现垂直居中的效果

padding参数介绍：

参数个数	效果
1	上、右、下、左会依次受设置的参数影响
2	上下、左右依次会受设置的参数影响
3	上、左右、下会依次受设置的参数影响
4	上、下、左、右会依次受设置边的影响

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>padding参数使用</title>
</head>
<style>div {/* 设置成行内块元素就可以指定宽高 */display: inline-block;background-color: pink;/* padding效果在盒子宽高不够的情况下会把盒子给顶开 */padding: 30px 80px;}
</style>
<body><div>有点意思</div>
</body>
</html>

CSS中的选择器

说明： 选择器就是选择对应的元素添加相应的样式，重点突出在选择方面
CSS中包含四种选择器：

后代选择器（使用空格分隔）
子元素选择器（使用>分隔）
相邻元素选择器（使用+分隔）
普通兄弟选择器（以~分隔）

后代选择器

例子： 选择div中所有的p标签添加样式

<style>div p {text-align: center;}
</style>

子元素选择器

说明： 与后代选择器相比，子元素选择器只能选择嵌套的一级子元素
例子：

<style>div>p {text-align: center;}
</style>

相邻兄弟选择器

说明： 相邻选择器在同一级中选择，或者拥有同一父元素
例子：

<style>div+p {text-align: center;}
</style>

普通兄弟选择器

说明： 选取指定元素之后的相邻兄弟元素
例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>div~p {background-color: pink;}</style>
</head>
<body><div><p>没有意思</p><p>没有意思</p><p>没有意思</p></div><span><p>真有点意思哦</p></span><p>有点意思</p><p>有点意思</p>
</body>
</html>

css导航栏（重要）

说明： 导航栏主要分为垂直导航栏和水平导航栏，熟练掌握导航栏对于开发来说非常重要，导航栏同时也搭配链接来使用

水平导航栏

下面主要通过例子来介绍导航栏

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平导航栏</title><style>a {display: inline-block;width: 230px;height: 40px;background-color: gray;text-decoration: none;line-height: 40px;text-indent: 3em;color: white;}#a {margin-left: -10px;}#s {margin-top: 200px;margin-left: 180px;}a:hover {background-color: orange;color: black;}</style>
</head><body><a href="#" id="s">主页</a><a href="#" id="a">国产</a><a href="#" id="a">日韩</a><a href="#" id="a">欧美</a><a href="#" id="a">联系我们</a>
</body></html>

效果：
CSS基础知识，必须掌握！！！

垂直导航栏

例子： 这里尝试做一下小米侧边栏
效果图：
CSS基础知识，必须掌握！！！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米侧边栏</title><style>a {display: block;text-decoration: none;background-color: gray;font-size: 18px;text-indent: 3em;height: 40px;width: 230px;line-height: 40px;color: white;}a:hover {background-color: rgb(255, 103, 0);}</style>
</head>
<body><a href="#">手机</a><a href="#">电视</a><a href="#">家电</a><a href="#">笔记本 平板</a><a href="#">出行 穿搭</a>    <a href="#">健康 儿童</a>    <a href="#">耳机 音响</a>    <a href="#">生活 箱包</a>    <a href="#">智能 路由器</a>    <a href="#">电源 配件</a>    
</body>
</html>

完结

这是CSS中很基础的内容，是一定要掌握的，博主撰写目的也是CSS的初学者，都是涵盖学习过来的经历，希望这篇文章能真正帮助到你。

CSS基础知识，必须掌握！！！

CSS基础知识

Background（背景）

CSS文本格式

文本颜色

文本对齐格式

文本修饰

文本缩进

CSS中的字体

字体样式

字体大小

CSS链接（link）

CSS列表

不同列表标项

CSS列表项用图片作为标记

CSS列表标记项位置

CSS中表格（table）

表格边框

折叠边框

设置表格的宽度和高度

表格文字对齐方式

表格填充与表格颜色

CSS盒子模型

元素的宽度和高度

CSS边框

边框样式

边框宽度和颜色

边框单独设置各边

CSS轮廓（outline）属性

CSS块级元素、行内元素、行内快元素

CSS中的position定位

CSS中 overflow的用法

CSS浮动（Float）

CSS中的对齐&垂直居中对齐

元素居中对齐

文本居中对齐

图片居中对齐

垂直居中对齐（使用padding）

CSS中的选择器

后代选择器

子元素选择器

相邻兄弟选择器

普通兄弟选择器

css导航栏（重要）

水平导航栏

垂直导航栏

完结

相关问题

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签