在这里插入图片描述
前端学习路线小总结：

基础入门：
HTML CSS JavaScript
三大主流框架：
VUE REACT Angular
深入学习：
小程序 Node jQuery TypeScript 前端工程化

文章目录

一.CSS布局-对齐
- 1.水平对齐
- - 1.1元素居中对齐
  - 1.2文本居中对齐
  - 1.3图片居中对齐
  - 1.4使用定位方式实现左右对齐
  - 1.5使用浮动方式实现左右对齐
- 2.垂直对齐
二.CSS导航栏
- 1.HTML设置菜单项
- 2.垂直导航栏
- 3.水平导航栏
- - 3.1 内联列表项
  - 3.2 浮动列表项
  - 3.3 实例
  - 3.4 固定导航栏
三. CSS下拉菜单
- 1.基本下拉菜单
- 2.常用下拉菜单
四. CSS提示工具
- 1.基础提示框
- 2.定位提示工具
- 3.添加箭头
- 4.淡入效果
五. 总结

在这里插入图片描述

距离上次更新 CSS 文章已经是两个月之前了，最近一直在忙着写 Java 基础教程系列的文章，今天更新的是一文带你吃透 CSS 的完结篇，希望小伙伴们坚持打卡学习哦！后面会继续更新 JS 的基础学习系列教程。

新年新气象，新的一年祝大家学业有成，事业一帆风顺，身体健康，家庭和睦。 另外，我正在参加 2022 博客之星的评选，欢迎来投上您宝贵的一票：【文章很有用，投你一票】

一.CSS布局-对齐

1.水平对齐

1.1元素居中对齐

使用margin: auto;水平对齐一个元素，同时设置元素的宽度防止它溢出到容器的边缘！

示例：

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

在这里插入图片描述

元素通过指定宽度，将两边的空外边距平均分配，达到元素居中的效果！

1.2文本居中对齐

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

示例：

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

在这里插入图片描述

1.3图片居中对齐

要让图片居中对齐，首先要把它放在块级元素中，然后使用margin: auto;。

示例：

img {
    display: block;
    margin: auto;
}

在这里插入图片描述

1.4使用定位方式实现左右对齐

position: absolute; 属性可以用来对齐元素。

示例：

img {
    position: absolute;
    left: 20px;
    top: 20px;
}

在这里插入图片描述

当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。同时，为了解决浏览器带来的差异，当使用 position 属性时，需要始终设置 !DOCTYPE 声明。

1.5使用浮动方式实现左右对齐

同样也可以使用 flaot 属性来对齐元素。

示例：

img {
    float:left;
    margin:20px;

}

在这里插入图片描述

如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出！这个时候可以使用清除浮动来解决问题。

2.垂直对齐

可以通过设置内边距来实现垂直对齐！

.center {
    padding: 25px 0;
    border: 3px solid red;
}

在这里插入图片描述

二.CSS导航栏

1.HTML设置菜单项

使用CSS可以美化HTML的菜单！导航栏类似于链接列表，所以使用<ul>属性来创建，效果如下：

<ul>
<li><a href="#">新晋作者</a></li>
<li><a href="#">作者周榜</a></li>
<li><a href="#">作者总榜</a></li>
<li><a href="#">原力榜</a></li>
</ul>

在这里插入图片描述
对菜单进行美化，删除外边距和填充，同时去掉无序列表标记。示例：

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

在这里插入图片描述

2.垂直导航栏

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

示例：

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: 	rgb(240,240,240);
}
 
li a {
    display: block;
    color:black;
    padding: 8px 16px;
    text-decoration: none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: rgb(144,144,144);
    color: white;
}
</style>

请添加图片描述

使用说明：display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。

在点击了选项后，我们可以添加 “active” 类来表示哪个选项被选中。示例：

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

在这里插入图片描述

继续美化：

添加text-align:center 样式来让链接居中！
在<ul>或者<li>上添加 border 属性来让导航栏有边框！

示例：

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid black;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li {
    text-align: center;
    border-bottom: 1px solid black;
}

li:last-child {
    border-bottom: none;
}

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

li a:hover:not(.active) {
    background-color: rgb(144,144,144);
    color: white;
}
</style>

请添加图片描述

3.水平导航栏

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。如果要链接到具有相同的大小，则必须使用浮动的方法。

3.1 内联列表项

示例：

<style>
ul
{
	list-style-type:none;
	margin: 20px;
	padding:0;
}
li
{
display:inline;
}
</style>

在这里插入图片描述

3.2 浮动列表项

使用内联列表项时，链接有不同的宽度，如果要使用相同的宽度，则需要使用浮动列表项。

示例：

ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li
{
	float:left;
}
a
{
	display:block;
	width:60px;
	background-color:#dddddd;
}

在这里插入图片描述

overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出。

3.3 实例

创建一个水平导航条，在鼠标移动到选项后修改背景颜色。

示例：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(179, 176, 176);
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: rgb(64, 56, 56);
}

请添加图片描述

继续美化：在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中，并且添加分割线。示例：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(179, 176, 176);
}

li {
    float: left;
    border-right:1px solid black;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: rgb(64, 56, 56);
}

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

在这里插入图片描述

3.4 固定导航栏

可以设置页面的导航栏固定在头部或者底部。

示例：

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

请添加图片描述

三. CSS下拉菜单

1.基本下拉菜单

示例：

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

请添加图片描述

2.常用下拉菜单

示例：

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

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

请添加图片描述

四. CSS提示工具

提示工具在鼠标移动到指定元素后触发。

1.基础提示框

示例：

<style>
/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
 
/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* 定位 */
    position: absolute;
    z-index: 1;
}
 
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

请添加图片描述

2.定位提示工具

示例：

<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* 定位 */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

请添加图片描述

3.添加箭头

示例：

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* 提示工具底部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

请添加图片描述

4.淡入效果

我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:

.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}
 
.tooltip:hover .tooltiptext {
    opacity: 1;
}

请添加图片描述

五. 总结

时光短暂，CSS 基础教程系列的文章就更新完结了，我们一共分为了上中下三篇，详细的讲解了 CSS 的使用，接下来的一段时间就要更新 JavaScript 的内容了，希望小伙伴们持续关注！

【Web前端】一文带你吃透CSS(完结篇)

文章目录

一.CSS布局-对齐

1.水平对齐

1.1元素居中对齐

1.2文本居中对齐

1.3图片居中对齐

1.4使用定位方式实现左右对齐

1.5使用浮动方式实现左右对齐

2.垂直对齐

二.CSS导航栏

1.HTML设置菜单项

2.垂直导航栏

3.水平导航栏

3.1 内联列表项

3.2 浮动列表项

3.3 实例

3.4 固定导航栏

三. CSS下拉菜单

1.基本下拉菜单

2.常用下拉菜单

四. CSS提示工具

1.基础提示框

2.定位提示工具

3.添加箭头

4.淡入效果

五. 总结

相关文章