【Web前端】一文带你吃透CSS(完结篇)
前端学习路线小总结：
- 基础入门：
- 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 来对齐元素时, 通常 元素会设置 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>
<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样式来让链接居中！ - 在
上添加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.基础提示框
示例：
2.定位提示工具
示例：
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 的内容了，希望小伙伴们持续关注！