【CSS 技能提升】 :before和:after的使用

前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多,主要是针对:before和:after写一些内容,还有几个小样式略微带过的介绍下。

什么是:before和:after? 该如何使用他们?

:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。

下面我们先跑个简单的代码测试下效果:

<style>p:before{content: "H"  /*:before和:after必带技能,重要性为满5颗星*/}p:after{content: "d"  /*:before和:after必带技能,重要性为满5颗星*/}</style><p>ello Worl</p>

以上的代码将会在页面中展现的是"Hello World"。我们通过浏览器的"审查元素"看到的内容是:

p标签内部的内容的前面会被插入一个:before伪元素,该伪元素内包含的内容是"H";而在p标签内的内容后面会被插入一个:after伪元素,该元素包含的内容是"d"。作为一只合格的程序猴子,捍卫"Hello World"的完整存在是必要的。
既然笔记主要针对是:before和:after,那么肯定不会只是仅仅有以上的简单介绍就完事。下面我们看看平常该怎么使用他们。

1.结合border写个对话框的样式

我们将上面这句话拆成2部分:结合border,写个对话框的样式。
既然是结合border,那么我们先转个小话题,简单由浅入深的介绍下怎么用border画三角形样式(这个三角形在写对话框样式的时候需要):

<style>.triangle{width: 0;height: 0;border-left:50px solid red;border-bottom:50px solid green;border-top:50px solid black;border-right:50px solid pink;}</style><div class="triangle"></div>

我们会得到下面的图形

我们对上面的样式做些修改:

.triangle{width: 0;height: 0;border:50px solid transparent; /*这里我们将元素的边框宽度设置为50px,transparent表示边框颜色是透明的,solid表示边框是实线的*/border-top-color: black;  /*这里我们仅将上边框的颜色设置为黑色,众所周知,css后面的样式代码会覆盖之前的相同的样式代码,至于其他三边的还是透明色*//*border-bottom-color: black; //这里设置底部边框色为黑色border-left-color: black;   //这里设置左边边框色为黑色border-right-color:black    //这里设置右边边框色为黑色*/}

然后这时我们就会看到一个在顶部的方向向下的三角形。解释已详细的写在css样式的注释里。

接下来我们加上:before:

<style>.test-div{position: relative;  /*日常相对定位*/width:150px;height:36px;border-radius:5px;border:black 1px solid;background: rgba(245,245,245,1)}.test-div:before{content: "";  /*:before和:after必带技能,重要性为满5颗星*/display: block;position: absolute;  /*日常绝对定位*/top:8px;width: 0;height: 0;border:6px solid transparent;left:-12px;border-right-color: rgba(245,245,245,1);}</style><div class="test-div"></div>

通过以上代码,我们将会看见一个类似微信/QQ的对话框样式,但是美中不足的是,在对话框的四周的边框不是完整的,而是在对话框的突出三角形上是木有边框的T_T瞬间冷场有木有,该怎么办呢?召唤:after穿着棉大衣来救场吧~

完整代码:

  <style>.test-div{position: relative;  /*日常相对定位*/width:150px;height: 36px;border:1px solid black;border-radius:5px;background: rgba(245,245,245,1)}.test-div:before,.test-div:after{content: "";  /*:before和:after必带技能,重要性为满5颗星*/display: block;position: absolute;  /*日常绝对定位*/top:8px;width: 0;height: 0;border:6px solid transparent;}.test-div:before{left:-11px;border-right-color: rgba(245,245,245,1);z-index:1}.test-div:after{left:-12px;border-right-color: rgba(0,0,0,1);z-index: 0}</style><div class="test-div"></div>

好了,完整的一个对话框样式呈现在眼前了,至于对话框的小三角形的方向,相信大家看了上上段对于border介绍的代码也都知道该怎么做了吧,没错,就是改下position的位置,改下border显示颜色的方位~

2.作为内容的半透明背景层。

比如我们的需求是做一个半透明的登录框吧(这里也是在代码中通过注释来解释):

<style>body{background: url(https://dn-mhke0kuv.qbox.me/8fc983c2f5c2e2f2d2ce.jpg) no-repeat left top /*这里加了个图片背景,用以区分背景的半透明及内容的完全不透明*/}.test-div{position: relative;  /*日常相对定位(重要,下面内容也会介绍)*/width:300px;height: 120px;padding: 20px 10px;font-weight: bold;}.test-div:before{position: absolute;  /*日常绝对定位(重要,下面内容也会略带介绍)*/content: "";  /*:before和:after必带技能,重要性为满5颗星*/top:0;left: 0;width: 100%;  /*和内容一样的宽度*/height: 100%;  /*和内容一样的高度*/background: rgba(255,255,255,.5); /*给定背景白色,透明度50%*/z-index:-1 /*日常元素堆叠顺序(重要,下面内容也会略带介绍)*/}</style>
<div class="test-div"><table><tr><td>Name</td><td><input placeholder="your name" /></td></tr> <tr><td>Password</td><td><input placeholder="your password" /></td></tr> <tr><td></td><td><input type="button" value="login" /></td></tr></table></div>

当然,:bofore和:after也还有其他更多的巧妙用法,这里也不一一列出来了,这里放上一个用这两个伪元素加上css3动画实现一些比较好看及实用的动态效果的链接:HoverEffectIdeas

查看更多 请访问我的独立博客 https://www.aaz5.com/

 

转载于:https://www.cnblogs.com/zhouyangla/p/6683815.html

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

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

相关文章

成功试验基于C#/.NET的Android开发

今天最开心事情莫过于摸索验证了一个事情&#xff0c;C#也能进行Android和IOS开发&#xff0c;白天安装了开发环境&#xff0c;晚上进行测试&#xff0c;直到此时此刻&#xff0c;已经成功的导出一款基于C#/.NET的安卓APK&#xff0c;并且能够成功的导入到安卓手机运行&#xf…

深入理解了MySQL,你才能说熟悉数据库

先抛出几个问题 1.为什么不建议使用订单号作为主键?2.为什么要在需要排序的字段上加索引?3.for update 的记录不存在会导致锁住全表?4.redolog 和 binlog 有什么区别?5.MySQL 如何回滚一条 sql ?6.char(50) 和 varchar(50) 效果是一样的么?索引知识回顾 对于 MySQL 数据库…

网站QQ全屏PHP代码,QQ技术导航升级版 超级导航美化版带后台版 PHP源码

QQ技术导航升级版 超级导航美化版带后台版改进F2样式&#xff0c;主针对QQ教程网、卡盟、博客、提供更好收录的位置。改进QQ技术导航背景&#xff0c;增加整体美观效果。去掉死链页面&#xff0c;站长操作使用更加有扩大空间。优化后台登陆界面&#xff0c;去掉织梦后台携带的广…

MySQL基础操作(一)

MySQL操作 一、创建数据库 # utf-8 CREATE DATABASE 数据库名称 DEFAULT CHARSET utf8 COLLATE utf8_general_ci;# gbk CREATE DATABASE 数据库名称 DEFAULT CHARACTER SET gbk COLLATE gbk_chinese_ci; 二、用户管理 创建用户create user 用户名IP地址 identified by 密码; 删…

集合框架05

一、HashSet集合 1 public class Demo01 {2 /*3 * Set接口&#xff0c;特点不重复元素&#xff0c;没索引4 * Set接口的实现类&#xff0c;HashSet(哈希表)5 * 特点&#xff1a;无序集合&#xff0c;存储和取出的顺序不同&#xff0c;没有索引&#xff0c;不…

HIVE-分桶表的详解和创建实例

我们学习一下分桶表&#xff0c;其实分区和分桶这两个概念对于初学者来说是比较难理解的。但对于理解了的人来说&#xff0c;发现又是如此简单。 我们先建立一个分桶表&#xff0c;并尝试直接上传一个数据 create table student4(sno int,sname string,sex string,sage int, sd…

51nod1270(dp)

题目链接&#xff1a;http://www.51nod.com/onlineJudge/questionCode.html#!problemId1270 题意&#xff1a;中文题诶&#xff5e; 思路&#xff1a;dp sabs(a1-a0)abs(a2-a1).... 要使s尽量大&#xff0c;需要让abs(ai-ai-1)尽量大&#xff0c;那么可以让其中一个尽量小&…

Windows IIS 日志分析研究(Log Parser Log Parser Lizard Log Parser Studio) update...

Windows主要有以下三类日志记录系统事件&#xff1a;应用程序日志、系统日志和安全日志。 存放目录&#xff1a;X:\Windows\System32\winevt\Logs\ System.evtx 系统日志 Application.evtx 应用程序日志 Security.evtx 安全日志 审核策略与事件查看器 # 管理工具 → 本地安全…

Linux邮件系统整合windows 2008 R2 AD域认证更新

1. 安装只要执行install.sh即可。&#xff08;安装包约40几M&#xff09; 2.文档更新功能 &#xff08;原v1.0文档链接&#xff1a;http://godoha.blog.51cto.com/108180/691376&#xff09; 本文转自 godoha 51CTO博客&#xff0c;原文链接&#xff1a;http://blog.51cto.com/…

HTTP 协议 -- 浏览器缓存机制

浏览器缓存机制浏览器缓存机制主要是 HTTP 协议定义的缓存机制。HTTP 协议中有关缓存的缓存信息头的关键字有 Cache-Control&#xff0c;Pragma&#xff0c;Expires&#xff0c;Last-Modified/ETag 等。浏览器请求流程浏览器第一请求流程&#xff1a;浏览器再次请求流程&#x…

CAP理论的理解

CAP理论作为分布式系统的基础理论,它描述的是一个分布式系统在以下三个特性中&#xff1a; 一致性&#xff08;Consistency&#xff09;可用性&#xff08;Availability&#xff09;分区容错性&#xff08;Partition tolerance&#xff09;最多满足其中的两个特性。也就是下图所…

开启真我新格调 期待绚丽的未知

我们每天都在朝幸福努力着&#xff0c;而眼光看的太远&#xff0c;往往会忘记自己究竟要的是什么。人想要幸福&#xff0c;就得活出真我&#xff0c;当人不能放心大胆地活出自己时&#xff0c;内心会有不安和痛苦。为何要隐藏真正的自己?外界的评判真的那么重要?真我新格调&a…

Linux-RHEL5-初学者配置vsftpd注意事项

我安装的是RHEL5.4&#xff0c;初学&#xff0c;不在意版本。为了学习方便&#xff0c;安装操作系统时能选的选项都选全了。事实证明这个决策是正确滴&#xff0c;要不还得花时间学习怎么安装vsftp。 网上关于如何配置vsftpd的资料挺多的。 我花了小半天的时间&#xff0c;除了…

最小值的最优化问题

无约束极小值的最优化条件&#xff1a; 关于多元函数极小值点的必要条件&#xff1a; 满足的点称之为f(x)的驻点或稳定点&#xff0c;但是反过来&#xff0c;满足梯度条件的点不一定是f(x)的局部极小值。因此&#xff0c;定理转化为求解下面的方程组问题&#xff1a; 对于上面…

第2课 - 搭建Lua开发环境

第2课 - 搭建Lua开发环境 1. Lua 的优点 &#xff08;1&#xff09;Lua 使用标准的 ANSI C 进行开发&#xff0c;可以无缝集成到宿主程序&#xff0c;且几乎支持所有平台。 &#xff08;2&#xff09;Lua 是开源且免费的软件&#xff0c;以源码的方式直接发布。开源软件的发布方…

(私人收藏)python学习(游戏、爬虫、排序、练习题、错误总结)

python学习(游戏、爬虫、排序、练习题、错误总结) https://pan.baidu.com/s/1dPzSoZdULHElKvb57kuKSgl7bz python100经典练习题python-错误和异常小结python-大作业之五子棋游戏&#xff08;附代码&#xff09;python-网络爬虫几种排序方法python实现新手常见的python运行时错误…

MySQL性能指标及计算方法

MySQL性能指标及计算方法 绝大多数MySQL性能指标可以通过以下两种方式获取&#xff1a; &#xff08;1&#xff09;mysqladmin 使用mysqladmin extended-status命令获得的MySQL的性能指标&#xff0c;默认为累计值。如果想了解当前状态&#xff0c;需要进行差值计算&#xff1b…

php可变变量讲解,PHP可变变量实例详解

什么是可变变量&#xff1f;在PHP中有一个其他类型的变量&#xff0c;“可变变量”。可变变量是一种PHP独特的变量&#xff0c;他允许动态改变一个变量的名称。可变变量的工作原理这个特性的工作原理是用一个变量的值作为另一个变量的名称。例如&#xff0c;我们可以设置$str的…

Python自动化运维:Django之View视图和Template

views详解 http请求中产生两个核心对象&#xff1a; http请求&#xff1a;HttpRequest对象 http响应&#xff1a;HttpResponse对象 &#xff08;1&#xff09; HttpRequest对象 当请求一个页面时&#xff0c;Django 创建一个 HttpRequest对象包含原数据的请求。然后 Django 加载…

java重入锁,再探JAVA重入锁

之前的文章中简单的为大家介绍了重入锁JAVA并发之多线程基础(2)。这里面也是简单的为大家介绍了重入锁的几种性质&#xff0c;这里我们就去探索下里面是如何实现的。我们知道在使用的时候&#xff0c;必须锁先有定义&#xff0c;然后我们再拿着当前的锁进行加锁操作&#xff0c…