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>