网站改域名备案,php网站开发工程师笔试,淘宝网站建设,wordpress前端个人中心在“探秘盒子浮动#xff0c;破解高度塌陷与文字环绕难题#xff0c;清除浮动成关键#xff01;”中#xff0c;我们讲到如果父盒由于各种原因未设置高度#xff0c; 子盒的浮动会导致父盒的高度塌陷。为了解决高度塌陷的问题#xff0c;我们可以添加伪元素。
一、伪元素…在“探秘盒子浮动破解高度塌陷与文字环绕难题清除浮动成关键”中我们讲到如果父盒由于各种原因未设置高度 子盒的浮动会导致父盒的高度塌陷。为了解决高度塌陷的问题我们可以添加伪元素。
一、伪元素创造虚拟元素
1、概念
伪元素可以创建一些不在文档树中的元素并为其添加样式。其中::before 和::after 伪元素是最为常用的。
2、属性
::before 伪元素可以在元素内容的前面插入额外的内容。比如我们可以为一个标题添加一个装饰性的图标通过::before 伪元素来实现。
::after 伪元素则在元素内容的后面插入内容。例如为一个段落添加下划线效果或者在列表项后面添加一个特殊的符号。
代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title伪元素/title
/head
stylesection{border: 4px solid #000;background-color: bisque;}#div1{width: 15%;height: 100px;background-color: aqua;border: 5px solid #000;margin-bottom: 5px;float: left;}#div3{width: 10%;height: 100px;background-color: pink;border: 5px solid #000;margin-bottom: 5px;float: left;}section{border: 4px solid #000;}footer{width: 100%;height: 100px;background-color:orange;border: 5px solid #000;}/* 伪类选择器 */.clear_ele::after{content: ; /* 这是必须配置的属性代表这个盒子的存在 */display: block;clear: both;}/style
bodysection classclear_ele!-- ::before --div iddiv1/divdiv iddiv3/div!-- ::after --/sectionfooter网页页脚/footer
/body
/html
运行结果如下 这与之前的 “div styleclear: both; iddiv5/div”相似都可以解决网页因为浮层而产生高度塌陷的问题添加伪元素可以不破坏网页代码的骨架所以比较推荐大家使用。
二、伪类元素
1、伪类选择器的运用
主要运用于导航栏或者超链接的样式设计
在默认的浏览器方式下,超链接统一为蓝色并且带有下画线。访问过的超链接则为紫色并且也有下画线。 这种最基本的超链接样式已经无法滿足设计人员的要求。通过 css可以设置超链接的各种属性,而且通过伪类还可以制作出许多动态效果。
2、属性
link:访问前的样式active点击时的样式 visited 访问后的样式hover鼠标悬停在上面的样式
需要说明的是这 4 种状态的顺序不能颠倒。否则可能会导致伪类样式不能实现。这4种状态并不是每次都要用到,一般情况下只需要定义链按标签的样式以及hover 伪类样式即可。
运行代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title伪类选择器/title
/head
style.clear_ele a{text-decoration: none;}/* 访问前的样式 */.clear_ele a:link{color: black; } /* 访问后的样式 */.clear_ele a:visited{color: blue; }.clear_ele a:hover{/* 鼠标悬停在上面文字的颜色 */color: red;}/style
bodysection classclear_elea href#百度一下你就知道/a/section
/body
/html
运行结果如下
点击链接前的效果 鼠标悬停在链接上的效果 点击链接后的效果
