Advertisement

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

阅读量：

这篇文章总结了CSS学习中的关键知识点：
布局-对齐：

  • 水平对齐：包括元素居中、文本居中、图片居中及定位或浮动方式。
  • 垂直对齐：使用内边距或position属性实现居中效果。
    导航栏：
  • HTML设置菜单项：通过
      +
    • +a结构创建静态导航。
    • 垂直与水平导航：使用position: fixed或浮动属性实现不同风格的导航条。
    • 固定式与隐藏式导航：适合不同场景的应用场景适配。
      下拉菜单：
    • 基本结构：通过position: relative创建静态下拉菜单。
    • 常用样式：添加背景色、悬停效果及分割线等增强功能。
      提示工具：
    • 鼠标悬停触发显示：使用position: relative与z-index控制提示框显示。
    • 添加箭头与淡入效果：通过后置元素及transition属性增强用户体验。
      文章总结了这些核心知识点，并展望了后续将更新JavaScript相关内容的学习计划。
在这里插入图片描述

前端学习路线小总结 ：

  • 初级阶段：
  • 前端开发基础：包含HTML语言、CSS样式表和JavaScript脚本技术
  • 掌握主流前端框架的技术要点：包括Vue.js、React.js和Angular框架
  • 深入学习：
  • 小程序开发与Node.js应用结合：掌握jQuery前端库的使用技巧以及TypeScript语言特性
  • 熟悉前端工程化实践方法：从代码规范到团队协作的最佳实践

文章目录

  • 一.CSS布局-横向对齐

      • 1.横向对齐

        • 1.1实现元素横向居中排列
        • 1.2文本内容居中显示
        • 1.3图片或图标居左或居右展示
        • 1.4借助固定定位实现左右两端的对齐效果
        • 1.5通过父容器浮动定位实现左右边界的精确控制

      • 2.垂直对齐

  • CSS布局设计

    • 在HTML元素中配置菜单条目

      • 垂直方向布局的导航条
      • 水平方向布局的导航条
        • 3.1 嵌入式列表项设置
          • 3.2 浮动式列表条目配置
          • 3.3 示例说明
          • 3.4 固定式布局设置

    • 三. CSS下拉菜单

      • 1.基本下拉菜单
      • 2.常用下拉菜单

    • 四. CSS提示工具

      • 1.基础提示框
      • 2.定位提示工具
      • 3.添加箭头
      • 4.淡入效果

    • 五. 总结

在这里插入图片描述

距离上次更新CSS文章已有两个多月时间。这段时间以来一直忙于撰写一系列Java基础教程。今天发布的是一文让你彻底掌握CSS的最后一期教程。期待大家持续参与学习！后续也会陆续推出JS基础知识系列文章。

文章很有用，投你一票

文章很有用 投你一票

文章很有用 投你一票

新的一年充满了希望和变化，在新的一年里愿大家都能够取得学业上的丰收。希望在事业上一帆风顺和谐的家庭关系也会随之而来。

您的支持与鼓励对我的创作很重要！快快投票吧！

一.CSS布局-对齐

1.水平对齐

1.1元素居中对齐

配置一个元素实现横向居中，并结合宽度设置防止其溢出容器边缘。

示例：

复制代码 
    .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属性解决问题时, 请确保始终包含声明.

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>
请添加图片描述

说明内容：
显示为块元素的链接会使得整个区域成为可点击链接的位置。
不仅限于文本内容，
从而让我们能够指定宽度。

在点击了选项后，我们可以添加 “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.水平导航栏

创建横向导航栏主要采用两种方法：内联或浮动（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);
    }
请添加图片描述

进一步优化：在您点击某个选项之后，请您通过添加活性类，并加入分隔线来确定哪些具体选项被选中。

复制代码 
    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相关知识,期待大家持续关注与参与！

全部评论 (0)

还没有任何评论哟~

相关文章推荐

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

前端学习路线小总结： 基础入门： HTMLCSSJavaScript 三大主流框架： VUEREACTAngular 深入学习： 小程序NodejQueryTypeScript前端工程化 文章目录 一...

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

前端学习路线小总结： 基础入门： HTMLCSSJavaScript 三大主流框架： VUEREACTAngular 深入学习： 小程序NodejQueryTypeScript前端工程化 一起学习CS...

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

前端学习路线小总结： 基础入门： HTMLCSSJavaScript 三大主流框架： VUEREACTAngular 深入学习： 小程序NodejQueryTypeScript前端工程化 继续学习CS...

【Web前端】一文带你吃透HTML(完整篇)

前端学习路线小总结： 基础入门： HTMLCSSJavaScript 三大主流框架： VUEREACTAngular 深入学习： 小程序NodejQueryTypeScript前端工程化 📝开始前端...

【Web前端】一文带你吃透HTML(上篇)

前端学习路线小总结： 基础入门： HTMLCSSJavaScript 三大主流框架： VUEREACTAngular 深入学习： 小程序NodejQueryTypeScript前端工程化 🍁开始前端...

【Web前端】一文带你吃透HTML(下篇)

前端学习路线小总结： 基础入门： HTMLCSSJavaScript 三大主流框架： VUEREACTAngular 深入学习： 小程序NodejQueryTypeScript前端工程化 一起学习HT...

一篇文章带你吃透Spring Cloud Alibaba

​SpringCloudAlibaba为什么会出现？ SpringCloudNetflix项目进入维护模式，SpringCloudNetflix将不再开发新的组件，我们知道SpringCloud版本迭...

一篇文章带你吃透VUE响应式原理

本篇响应式原理介绍比较长，全文大概1w+字。虽然内容繁杂，但阅读过后，绝对会让你对vue的响应式有更加深刻的理解。 分块阅读，效果更佳。（建议读者有一定vue使用经验和基础再食用） 首先上图，下面这张...

【C++】一文带你吃透C++多态

🍎博客主页：🌙@披星戴月的贾维斯 🍎欢迎关注：👍点赞🍃收藏🔥留言 🍇系列专栏：🌙C/C++专栏 🌙那些看似波澜不惊的日复一日，一定会在某一天让你看见坚持的意义！算法导论🌙 🍉一起...

带你吃透RTMP

本文首发于个人博客之带你吃透RTMP,之后会陆续将博客转移至个人博客，期待与各位的交流 RTMP协议是RealTimeMessageProtocol实时信息传输协议的缩写，它是由Adobe公司提出的一...