HTML--day04

HTML--day04,第1张

概述1.伪类 伪类实际上是元素的某种状态。 元素:hover:鼠标悬浮上去的状态 A:link:链接未点击时候的状态 A:visited:链接被浏览过的状态 A:active:链接被点击时候的状态 Input:focus  输入框聚焦时候的状态,即有光标的状态。 2.伪元素 伪元素即是假的元素,通过元素内部创造假的元素,可以创造2中假的元素,1个是在元素内部的最前面,一个是在内部的最后面 元素:bef

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所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1075795.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存