html:响应式,伪类,伪元素

写移动端一定要有响应式

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

 

视窗viewport

1.

 

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

initial-scale=1 :后面4个最终决定不允许任何的缩放。

minimum-scale=1

maximum-scale=1

user-scalable=no

2.

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

响应式:

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

手机端:背景蓝色

手机的显示分辨率:一般小于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:"";

 

 

1

2

3

 

 

 

 

聊天框案例:

今晚看电影?

 

记得带身份证?

 

 

 

转载于:https://www.cnblogs.com/406070989senlin/p/10929125.html

你可能感兴趣的:(html:响应式,伪类,伪元素)