css :after和:before
:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。
举例:
1.结合border写个对话框的样式。
<style>.test-div{position: relative; /*日常相对定位*/width:150px;height: 36px;border:black 1px solid;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 transparent solid;}.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>
2.作为内容的半透明背景层。
<style>body{background: url(ABUIABACGAAg6KijvAUo1PqcwwIwgA84uwU.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><!--这里容兽偷个懒,布局简单写写--><body><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>
转载于:https://www.cnblogs.com/pyyblogs/p/6017175.html
css :after和:before相关推荐
- ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题 思路 问题:首先,li 浮动后,添加边框,则 中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
- 【css】基础学习总结
填充部分: 1.css概念 2.如何用css控制页面样式(2种方式,写在页面内,链接CSS样式文件) 3.介绍了不同的选择器(3种) 4.选择器的声明:集体,嵌套 5.css继承:父子嵌套继承 6.C ...
- Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss
错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...
- CSS 选择器:BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
- CSS Modules
css-loader 提供了一种叫做 CSS Modules 的方案,可以帮我们自动生成唯一的类名,不会和其他模块的命名出现冲突 要使用 CSS Modules 有几个步骤,首先需要在 webpack ...
- css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是 类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑 它们 都 ...
- 前端之css基础学习(更正版)
css是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 简单的说css的引入就是为了使得HTML语言能够 ...
- div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
- CSS单位分析及CSS颜色表示法、颜色表(调色板)
CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相 ...
- 前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
最新文章
- c# 自然序号,在C#中的自然排序
- python 方向梯度直方图_手动绘制方向梯度直方图(HOG)
- Tensorflow在python3.7版本的运行并且在pycharm安装tensorflow(亲测)
- Node.js + Express + handlebars搭建个人网站(1)
- c++ std 方法 取两个数的较大_【数据结构C++】两数交换(4种方法)
- Eclipse-Mybatis-generatorConfig.xml
- java requirenonnull_Java null判断新方法:Objects.requireNonNull 你过用吗?
- Presto数组函数
- CentOS清除用户登录记录和命令历史方法
- Hash(MD5校验工具)
- 软件公司之间合作的保密协议范本
- python批量写入经纬度
- linux hdmi /dev/fb操作,HDMI接口学习笔记
- MySql领域经典之作,“不敢自诩为MySql专家,mybatis架构设计及源码分析系列
- 职称计算机word中文字处理,计算机职称考试Word 2007中文字处理考试大纲
- N个苹果分给M个人,有多少种分法
- 题材丰富 医药板块初露峥嵘
- java的位桶是什么,hashmap中的存储桶究竟是什么?
- python中mid_Python算法
- C++_OpenCV分离RGB通道