HTML：応答、擬似要素

エンド・モバイル：モバイル / タブレット/ スマートテレビ/ スマートウォッチ/ VRのデバイス/ ARの設定

Windowsビューポート

<メタ名=「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1、最小スケール= 1、最大スケール= 1、ユーザスケーラブル= NO」/>

デバイス幅=幅：幅表示装置システムの幅に等しいです

スケール= 1-初期。：後で。4 番目の最終決定は、任意のスケーリングを許可していません。

最小スケール= 1

最大スケール= 1

ユーザースケーラブル=なし

設定した設計案の解決の不整合が問題の電話側の大きさを選別します

疑似クラス

疑似クラスは、実際の要素の特定の状態です。

要素：ホバー：サスペンションのマウスアップ状態

A：リンク：ステートリンクはクリックしません

：訪問：リンクが訪問している状態

A：アクティブ：リンクがクリックされた状態

入力：フォーカスフォーカス入力ボックス、カーソル、すなわち状態状態。

擬似要素

即ち、擬似要素は、内部素子を介して偽の要素を作成するために偽の要素を作成することができている 2 偽要素に1 一方は、上部要素の内側に内側の最後一つであります

要素：前に、要素内の子要素の前に偽を作成

要素：の後に、後ろの要素内に偽の子要素を作成します

<！DOCTYPE HTML>

<HTML>

<ヘッド>

<メタ文字セット= "UTF-8">

<タイトル> </ TITLE>

<スタイルタイプ= "テキスト/ cssの">

.D1：{の前に

内容： "0";

表示ブロック;

幅：100ピクセル;

高さ：100pxに。

背景：スカイブルー。

}

.D1：後{

内容：「4」。

表示ブロック;

幅：100ピクセル;

高さ：100pxに。

背景：スカイブルー。

}

</スタイル>

</ head>の

<身体>

<！ - 擬似要素の前に- >

</ div>

</ BODY>

</ HTML>

チャットボックスケース：

<！DOCTYPE HTML>

<HTML>

<ヘッド>

<メタ文字セット= "UTF-8">

<タイトル> </ TITLE>

<スタイルタイプ= "テキスト/ cssの">

。メイン{

幅：800ピクセル;

マージン：0自動;

}

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

响应式：

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

手机端：背景蓝色

手机的显示分辨率：一般小于640px

平板：深蓝色

平板的分辨率：一般是大于640px，小于960px

Pc：黑色

疑似クラス

擬似要素

おすすめ