CSS(四)---【链接美化、浮动布局、三种定位】

零.前言

本篇主要讲解<a>标签链接美化、页面的浮动布局,以及“相对定位”、“绝对定位”、“固定定位”三种定位。

关于其它请查看作者其它文章:

CSS(一)---【CSS简介、导入方式、八种选择器、优先级】-CSDN博客

CSS(二)---【常见属性、复合属性使用】-CSDN博客

CSS(三)---【盒子模型、边框、外边距合并】-CSDN博客

一.CSS链接美化

链接可以使用:“colorfont-familybackground”等属性来设置样式。

一般而言我们更在意的是:“链接处于什么状态来设置不同的样式”。

为此我们可以使用:“伪类选择器”,通过对<a>标签的伪类选择,来实现不同状态的样式。

四种链接状态分别是:

  • a:link”:正常的,未访问的链接
  • a:visited”:用户访问过的链接
  • a:hover”:用户将鼠标悬停在链接上时
  • a:active”:链接被点击时

注意:

如果为多个链接状态设置不同样式时,需要遵循顺序规则:“a:hover必须在a:linka:visited之后。a:active必须在a:hover之后”。

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a:link{color: red;}a:visited{color:  green;}a:hover{color: hotpink;}a:active{color: blue;}</style>
</head>
<body><a href="#" target="_blank">测试链接</a>
</body>
</html>

效果:

点击前

鼠标移动到链接上时

点击时

点击后

有个小问题,就是当你之前点击过<a>标签的链接,并且在浏览器中保留着浏览记录,那么颜色将始终会是visited的样式(愁人)。

二.浮动布局

2.0简介

浮动属性用于创建浮动框,将其移动到一边,直到左边缘右边缘触及包含块或另一个浮动框的边缘,这样即可使得元素进行浮动。

语法

选择器{

        float:left/right/none;

}

使用场景:“当我们使用多个行内块元素摆放到一行时,彼此之间是会有空隙的,这时我们就可以使用浮动布局用来消除空隙”。

注意:

浮动是是相对于父元素浮动,只会在父元素内部移动

2.1浮动三大特性

  1. 脱标:脱离标准流
  2. 一行显示,顶部对齐
  3. 具备行内块元素特性

2.2浮动的使用

看下面一个例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{background-color: aquamarine;height: 100px;border: 3px solid brown;}.left{background-color: yellowgreen;width: 100px;height: 100px;float: left;}.right{background-color: blueviolet;width: 100px;height: 100px;float: right;}</style>
</head>
<body><div class="father"><div class="left">左浮动</div><div class="right">右浮动</div></div>
</body>
</html>

效果:

此时我们对左浮动右浮动复制创建多个,效果如下:

可以看到使用浮动布局后,元素之间是没有空隙的

2.3使用浮动造成的坍塌

当我们使用浮动布局时,若父元素没有指定高度,此时就会发生坍塌。

即:

        .father{background-color: aquamarine;/* height: 100px; */    注释掉高度border: 3px solid brown;}

效果:

可以看到父元素的边框没有包裹住子元素,这就是坍塌造成的后果。

若此时我们在父元素后面继续添加标签,例如我们添加:

    <p>这是一段话</p><p>这是一段话</p><p>这是一段话</p><p>这是一段话</p>

效果:

注意到有三个<p>标签的位置在左浮动右边,按常理来说,所有的<p>标签应该出现在父元素的下方

这便是坍塌造成的后果,解决方法很简单:

  1. 给父元素添加大于所有子元素的高度值
  2. 使用overflow属性消除浮动
  3. 使用父元素的伪元素after消除浮动

在这里,我们使用overflow属性来消除浮动:

        .father{background-color: aquamarine;/* height: 100px; */border: 3px solid brown;overflow: hidden;//使用overflow属性来消除浮动}

效果:

三.3种定位

3.0三种定位

定位方式:

  • 相对定位:相对于元素在文档流中的正常位置进行定位。
  • 绝对定位:相对于最近的已定位祖先元素进行定位,不占据文档流
  • 固定定位:相对于浏览器窗口进行定位。不占据文档流,固定在屏幕上的位置,不随滚动而滚动。

缺点:定位布局虽然可以精准定位,但缺乏灵活性

定位使用:“position”属性来定位

属性值有:

  • “relative”:相对定位
  • “absolute”:绝对定位
  • “fixed”:固定定位

3.1相对定位

使用相对定位,需要搭配:“top”、“right”、“bottom”、“left”四个属性使用。

top:相对于父元素向移动单位距离

right:相对于父元素向移动单位距离

bottom:相对于父元素向移动单位距离

left:相对于父元素向移动单位距离

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.allbox{height: 350px;background-color: aqua;}.box-normal{width: 100px;height: 100px;background-color: purple;}.box-relative{width: 100px;height: 100px;background-color: pink;position: relative;top: 20px;left: 100px;}</style>
</head>
<body><div class="allbox"><div class="box-normal"></div><div class="box-relative"></div><div class="box-normal"></div></div>
</body>
</html>

效果:

值得注意的是:使用相对定位的元素,其周边的元素并没有受到影响,这是因为“相对定位不会脱离文档流

3.2绝对定位

使用绝对定位,会使元素脱离正常文档流,这就说明如果下面还有标签,它就会因为该元素脱离正常文档流而上浮

即:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.allbox{height: 350px;background-color: yellow;}.box-normal{width: 100px;height: 100px;background-color: purple;}.box-absolute{width: 100px;height: 100px;background-color: pink;position: absolute;}</style>
</head>
<body><div class="allbox"><div class="box-normal"></div><div class="box-absolute"></div><div class="box-normal"></div></div>
</body>
</html>

效果:

如图,下面的紫色块上浮被覆盖了。

如果此时我们将粉色块移动,那么紫色块就显示出来了。

        .box-absolute{width: 100px;height: 100px;background-color: pink;position: absolute;left: 120px;    //向右移动120px,让紫色块显示}   

效果:

3.3绝对定位

使用绝对定位会让元素一直固定在页面某个位置,那怕用户拖动页面,元素仍固定。

通常用来作顶部导航栏等等。

即:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.allbox{height: 350px;background-color: yellow;margin-top: 500px;}.box-normal{width: 100px;height: 100px;background-color: purple;}.box-absolute{width: 100px;height: 100px;background-color: pink;position: absolute;left: 120px;}.box-fixed{width: 100px;height: 100px;background-color: brown;position: fixed;right: 0px;top: 100px;}</style>
</head>
<body><div class="allbox"><div class="box-normal"></div><div class="box-absolute"></div><div class="box-normal"></div></div><h1>固定定位</h1><div class="box-fixed">固定定位</div>
</body>
</html>

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/782901.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java常用Lambda表达式与Stream流应用

定义&#xff1a; Lambda表达式是一种在编程语言中表示匿名函数的方法。它可以在需要函数作为参数的地方使用&#xff0c;并且可以简洁地表示一个函数的定义。Lambda表达式最初由函数式编程语言引入&#xff0c;但现在已经成为许多编程语言中的常见特性。 基本语法&#xff1a;…

多路选择器选型参数,结构原理,工艺与注意问题总结

🏡《总目录》 目录 1,概述2,工作原理3,结构特点3.1,输入和输出端口3.2,控制端3.3,逻辑功能4,工艺流程4.1,设计阶段4.2,仿真验证4.3,制版4.4,制造4.5,测试与封装4.6,应用与测试

苹果设备下载海外app可能的方法

因为需要安装国外的APP&#xff0c;而且不是整天捣鼓这类东西&#xff0c;所以有点缩手缩脚&#xff0c;生怕引起严重后果&#xff0c;在此记录解决的方法和网上的一些分享。 在苹果电脑上的方法 在电脑上添加一个新的用户&#xff0c;然后给这个用户加一个海外Apple ID&…

【OceanBase实战之路】第3篇:多租户架构实现资源隔离

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 目录 一、什么是OceanBase的多租户二、兼容模式2.1 MySQL 模式2.2 Oracle 模式三、租户介绍3.1 系统租户3.2 用户租户3.3 Meta 租…

数据结构--合并区间

数据结构–合并区间 分析 首先需要对整个二维数组的每一个区间的第一列&#xff08;左端&#xff09;进行升序&#xff0c;然后因为合并之后的的区间个数不确定&#xff0c;所以使用ArrayList&#xff0c;然后创建一个临时变量为第一个区间&#xff0c;然后比较其第二列&…

Artplayer视频JSON解析播放器源码|支持弹幕|json数据模式

全开源Artplayer播放器视频解析源码&#xff0c;支持两种返回模式&#xff1a;网页播放模式、json数据模式&#xff0c;json数据模式支持限制ip每分钟访问次数UA限制key密钥&#xff0c;也可理解为防盗链 &#xff0c;本播放器带弹幕库。 运行环境 推荐使用PHP8.0 redis扩展…

2024世界技能大赛某省选拔赛“网络安全项目”B模块--应急响应解析

广东省第三届职业技能大赛“网络安全项目”B模块任务书 PS: 关注鱼影安全第一部分 网络安全事件响应任务 1:应急响应第二部分 数字取证调查第三部分 应用程序安全:需要环境可以私信博主~PS: 关注鱼影安全 模块 B 竞赛项目试题 本文件为:2024世界技能大赛某省选拔赛-模块 B …

您的计算机已被.360勒索病毒感染?恢复您的数据的方法在这里!

尊敬的读者&#xff1a; 在数字化浪潮中&#xff0c;网络安全问题如暗流涌动&#xff0c;其中.360勒索病毒凭借其独特的攻击方式和难以捉摸的传播路径&#xff0c;成为了网络安全领域的一股“暗黑势力”。本文将带您深入剖析.halo勒索病毒的神秘面纱&#xff0c;并分享一系列独…

【跟着GPT4学JAVA】异常篇

JAVA异常中的知识点 问&#xff1a; 介绍下JAVA中的异常有哪些知识点吧 答&#xff1a; Java中的异常处理是一个重要的知识点&#xff0c;主要包括以下内容: 异常体系&#xff1a;Java的异常类是Throwable类派生出来的&#xff0c;Throwable下有两个重要的子类&#xff1a;Err…

「Android高级工程师」BAT大厂面试基础题集合-下-Github标星6-5K

C、 com.android.provider.contact D、 com.android.provider.contacts 11.下面关于ContentProvider描述错误的是&#xff08;&#xff09;。 A、 ContentProvider可以暴露数据 B、 ContentProvider用于实现跨程序共享数据 C、 ContentProvider不是四大组件 D、 ContentP…

基于SSM大学生健康管理系统的设计与实现

基于SSM大学生健康管理系统的设计与实现 获取源码——》哔站搜&#xff1a;计算机专业毕设大全 获取源码——》哔站搜&#xff1a;计算机专业毕设大全 源码获取——》可以私信

Spring IoCDI(3)

DI详解 接下来学习一下依赖注入DI的细节. 依赖注入是一个过程, 是指IoC容器在创建Bean时, 去提供运行时所依赖的资源, 而资源指的就是对象. 在之前的案例中, 使用了Autowired这个注解, 完成了依赖注入这个操作. 简单来说, 就是把对象取出来放到某个类的属性中. 在一些文章中…

宠物领养(源码+文档)

宠物领养管理系统&#xff08;小程序、ios、安卓都可部署&#xff09; 文件包含内容程序简要说明含有功能项目截图客户端主页举报页注册页领养详细发布寻宠/送养领养页 管理端送养管理用户管理科普管理签到管理 文件包含内容 1、搭建视频 2、流程图 3、开题报告 4、数据库 5、…

CVPR 2024 | 风格迁移和人像生成汇总!扩散模型diffusion用于经典AIGC方向

风格迁移 1、DEADiff: An Efficient Stylization Diffusion Model with Disentangled Representations 基于文本到图像扩散模型在迁移参考风格方面具有巨大潜力。然而&#xff0c;当前基于编码器的方法在迁移风格时显著损害了文本到图像模型的文本可控性。本文提出DEADiff来解决…

【Java】HashMap的简单使用(含小部分源码,get报错问题)

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 一、HashMap的特点 二、HashMap的一些常用方法 ①.put(K key, V value) 将键&#xff08;key&#xff09;/值&#xff08;value&#xff09;映射存放到Map集合中&#xff08;HashMap的key值不可重复&#xff0c;如果已…

2024蓝旭春季第二次前端培训课

目录 CSS伪类与伪元素 伪类 伪元素 关系选择器 分类举例 后代选择器 子元素选择器 相邻兄弟选择器 通用兄弟选择器 作用使用场景 后代选择器&#xff08;空格&#xff09; 子元素选择器 (>) 相邻兄弟选择器 () 通用兄弟选择器 (~) 随机提问 CSS布局 基础布局…

[数据集][目标检测]道路行人车辆坑洞锥形桶检测数据集VOC+YOLO格式6275张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;6275 标注数量(xml文件个数)&#xff1a;6275 标注数量(txt文件个数)&#xff1a;6275 标注…

Python 基础:标准库 -- math (数学函数)

1. 官方文档 math --- 数学函数 — Python 3.12.2 文档 cmath --- 关于复数的数学函数 — Python 3.12.2 文档 Python 中&#xff0c;可以使用内置的数学运算符&#xff0c;例如加法 ()、减法 (-)、除法 (/) 和乘法 (*) 进行简单的数学运算。不过&#xff0c;更高级的运算&a…

SQLite版本3中的文件锁定和并发(七)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;自己编译SQLite或将SQLite移植到新的操作系统&#xff08;六&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 正文&#xff1a; 1.0 SQLite 版本 3 中的文件锁定和并发 SQLite 版本 3.0.0 引入了新的锁…

简单爬虫,爬取某东某商品评论前十页

商品链接地址&#xff1a;【博世四坑5系 6x100x160】博世&#xff08;BOSCH&#xff09;四坑5系&#xff08;1支装&#xff09;圆柄两坑两槽混凝土钻头 6x100x160mm【行情 报价 价格 评测】-京东 首先抓包&#xff0c;用搜索框搜索评论&#xff0c;看评论在哪个包中 为了好看筛…