html：响应式，伪类，伪元素

时间 2019-11-20

标签 html 响应元素栏目 HTML 繁體版

原文原文链接

写移动端必定要有响应式css

移动端：手机/平板/智能电视/智能手表/VR设备/AR设置html

视窗viewport网站

1.<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />spa

width=device-width ：width等于设备的系统显示宽度scala

initial-scale=1 ：后面4个最终决定不容许任何的缩放。设计

minimum-scale=1code

maximum-scale=1htm

user-scalable=noblog

2. <div style="width: 375px;height: 375px;background: skyblue;">utf-8

一套设计稿解决手机端的屏幕大小不一致问题

响应式：

不一样的屏幕的大小，显示不同的内容。

手机端：背景蓝色

手机的显示分辨率：通常小于640px

平板：深蓝色

平板的分辨率：通常是大于640px，小于960px

Pc：黑色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            .d1{
                width: 600px;
                height: 400px;
                background: orange;
            }
            
            
            /*媒体查询*/
            /*小于等于640px的分辨率*/
            
            @media only screen and (max-width:640px ) {
                .d1{
                    background: skyblue;
                }
            }
            
            
            /*范围在640px-960px之间*/
            @media only screen and (min-width: 640px) and (max-width: 960px) {
                .d1{
                    background: purple;
                }
            }
            
            /*大于1400px*/
            @media only screen and (min-width:1400px ) {
                .d1{
                    background: black;
                }
            }
        </style>
    </head>
    <body>
        <div class="d1">
            
        </div>
    </body>
</html>

伪类

伪类其实是元素的某种状态。

元素：hover:鼠标悬浮上去的状态

A:link:连接未点击时候的状态

A:visited：连接被浏览过的状态

A:active：连接被点击时候的状态

Input:focus 输入框聚焦时候的状态，即有光标的状态。

伪类

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        
        
        
            input{
                background: skyblue;
            }
            /*输入框聚焦时候的状态*/
            input:focus{
                background: pink;
            }
            
            /*网站连接的3种状态所表现的不一样颜色：点击时 点击过 。。*/
            a:link{
                background: yellow;
            }
            
            a:visited{
                background: orangered;
            }
            
            a:active{
                background: darkblue;
            }
        </style>
    </head>
    <body>
        <input type="text" />
        
        
        <a href="http://www.taobao.com">淘宝</a>
    </body>
</html>

伪元素

伪元素便是假的元素，经过元素内部创造假的元素，能够创造2中假的元素，1个是在元素内部的最前面，一个是在内部的最后面

元素：before,在元素内部的前面建立一个假的子元素

元素：after，在元素内部的后面建立一个假的子元素

再用伪元素时必定要初始化：content:"";

<!DOCTYPE html>

<html>

<head>

.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>

</div>

</body>

</html>

聊天框案例：

<!DOCTYPE html>

<html>

<head>

.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>

记得带身份证？

</div>

</body>

</html>