1.伪类
伪类实际上是元素的某种状态。
元素:hover:鼠标悬浮上去的状态
A:link:链接未点击时候的状态
A:visited:链接被浏览过的状态
A:active:链接被点击时候的状态
input:focus 输入框聚焦时候的状态,即有光标的状态。
2.伪元素
伪元素即是假的元素,通过元素内部创造假的元素,可以创造2中假的元素,1个是在元素内部的最前面,一个是在内部的最后面
元素:before,在元素内部的前面创建一个假的子元素
元素:after,在元素内部的后面创建一个假的子元素
案例1:
<!DOCTYPE HTML><HTML> <head> <Meta charset="UTF-8"> <Title></Title> <style type="text/CSS"> .d1:before{ content: "0"; display: block; wIDth: 100px; height: 100px; background: skyblue; } .d1:after{ content: "4"; display: block; wIDth: 100px; height: 100px; background: skyblue; } </style> </head> <body> <!--伪元素before--> <div class="d1"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div> </body></HTML>
聊天框案例:
<!DOCTYPE HTML><HTML> <head> <Meta charset="UTF-8"> <Title></Title> <style type="text/CSS"> .main{ wIDth: 800px; margin: 0 auto; } .ltk{ wIDth:600px ; height: 80px; background: skyblue; color:#fff; line-height: 80px; padding: 0 20px; margin: 10px auto; border-radius: 20px; position: relative; } .ltk:before{ /*content必须要写*/ content: ""; display: block; wIDth: 0; height: 0; border-top:10px solID transparent ; border-left:15px solID transparent ; border-right:15px solID skyblue ; border-bottom:10px solID transparent ; position: absolute; left: -30px; top: 20px; } </style> </head> <body> <div class="main"> <div class="ltk"> 今晚看电影? </div> <div class="ltk"> 记得带身份z? </div> </div> </body></HTML>总结
以上是内存溢出为你收集整理的HTML--day04全部内容,希望文章能够帮你解决HTML--day04所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)