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

导读:本篇文章讲解 【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> 元素会设置 marginpadding 。 这样可以避免在不同的浏览器中出现可见的差异。同时,为了解决浏览器带来的差异,当使用 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)
小半的头像小半

相关推荐

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