投稿
  1. 极客之音首页
  2. 技术随笔

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

小半 • • 技术随笔 • 阅读 183

导读：本篇文章讲解 【Web前端】一文带你吃透CSS(完结篇)，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

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

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

文章目录

在这里插入图片描述

距离上次更新 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 的内容了，希望小伙伴们持续关注！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/82716.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！