html：响应式，伪类，伪元素
写移动端一定要有响应式
移动端：手机/平板/智能电视/智能手表/VR设备/AR设置
视窗viewport
|
1.<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
width=device-width ：width等于设备的系统显示宽度
initial-scale=1 ：后面4个最终决定不允许任何的缩放。
minimum-scale=1
maximum-scale=1
user-scalable=no
2. <div style="width: 375px;height: 375px;background: skyblue;">
一套设计稿解决手机端的屏幕大小不一致问题
响应式：
不同的屏幕的大小，显示不一样的内容。
手机端：背景蓝色
手机的显示分辨率：一般小于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> <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"> 记得带身份证？ </div> </div> </body> </html>
|
|
<meta name="viewport" content="width=750,user-scalable=no" /> |
