HTML5+CSS3的学习(五)
2018版李立超html+css基础 103集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1sW411T78k?spm_id_from=333.999.0.0
2019版李立超前端html5+css3 148集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from=333.999.0.0
八、表单的基本设置
1.表单
• 现实生活中的表单是用来提交信息的，比如：找工作填写的简历、入学时填写的个人信息表。这些都是表单的一种
• 网页中的表单是用来向服务器提交信息的，我们最常用到的表单就是baidu的搜索框
在搜索框填入关键字后，点击搜索按钮，关键字会提交到baidu的服务器，服务器根据用户输入的关键字进行检索，返回相应信息
• 表单可以将用户填写的信息提交的服务器
• 例子：
2.表单项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单</title>
</head>
<body>
<!--
表单：
- 在现实生活中表单用于提交数据
- 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
- 使用form标签来创建一个表单
-->
<!--
form的属性
action 表单要提交的服务器的地址
method 提交表单的方法
get 方式，默认提交方式，会将参数拼接在连接后面，有大小限制，4k
post 方式，会将参数封装在请求体中，理论上来说大小没有限制
-->
<form action="target.html">
<!--
文本框
注意：数据要提交到服务器中，必须要为元素指定一个name属性值
-->
文本框 <input type="text" name="username">
<br><br>
<!--
密码框
-->
密码框 <input type="password" name="password">
<br><br>
<!--
单选按钮
- 像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中，可以写为checked="任意值"，但一般只写checked
-->
单选按钮 <input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br><br>
<!--
多选框
-->
多选框 <input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<br><br>
<!-- 下拉列表 selected把某个选项设置为默认 -->
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<br><br>
<!--
提交按钮
-->
<input type="submit" value="注册">
<!--
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
input type=file 是文件上传域
input type=hidden 是隐藏域，主要用来存放页面上的一些id信息
当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
-->
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="target.html">
<!--
autocomplete="off" 关闭自动补全（即下方输入历史不会显示）
readonly 将表单项设置为只读，不能修改 ，数据会提交
disabled 将表单项设置为禁用，不能点击，数据不会提交
autofocus 设置表单项自动获取焦点（即下方第二个input会自动获取焦点，不点击）
-->
<input type="text" name="username" value="hello" readonly>
<br><br>
<input type="text" name="username" autofocus>
<br><br>
<input type="text" name="b">
<br><br>
<!-- <input type="color">可以给用户选择颜色 -->
<br><br>
<!-- <input type="email"> email不正确会提示-->
<br><br>
<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通的按钮，用的多，通过js给它添加各种功能 -->
<input type="button" value="按钮">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
3.input
•input是我们使用的最多的表单项，它可以根据不同的type属性呈现不同的状态。
• type属性可选值：
text：文本框password：密码框submit：提交按钮radio：单选按钮checkbox：多选框reset：重置按钮file：上传文件hidden：隐藏域button：普通按钮
placeholder：指定默认的提示信息
name：在表单提交 的时候，用作参数的名称，要写
id： 给输入项取一个名字，以便后期操作它
4.select、option、optgroup
• select用于创建一个下拉列表。
• option表示下拉列表中的列表项。
• optgroup用于为列表项分组。
5.textarea
• textarea用来创建一个文本域，实际效果和文本框类似，只是可以输入多行数据。
• 可用属性：
– cols：文本域的列数
– rows：文本域的行数
6.fieldset、legend、label
• fieldset用来为表单项进行分组。
• legend用于指定每组的名字。
• label标签用来为表单项定义描述文字。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表单的作用就是用来将用户信息提交给服务器的
比如：百度的搜索框 注册 登录这些操作都需要填写表单
-->
<!--
使用form标签创建一个表单
form标签中必须指定一个action属性，该属性指向的是一个服务器的地址
当我们提交表单时将会提交到action属性对应的地址
-->
<form action="target.html">
<!--
使用form创建的仅仅是一个空白的表单，
我们还需要向form中添加不同的表单项
-->
<!--
在表单中可以使用fieldset来为表单项进行分组，
可以将表单项中的同一组放到一个fieldset中
-->
<fieldset>
<!-- 在fieldset可以使用legend子标签，来指定组名 -->
<legend>用户信息</legend>
<!--
使用input来创建一个文本框，它的type属性是text
如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
name表示提交内容的名字
用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
url地址?查询字符串
格式：
属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
-->
<!--
在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的
label标签
该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
-->
<label for="um">用户名</label>
<input id="um" type="text" name="username" /> <br /><br />
<!--
密码框
- 使用input创建一个密码框，它的type属性值是password
-->
<label for="pwd">密码 </label>
<input id="pwd" type="password" name="password" /> <br /><br />
</fieldset>
<fieldset >
<legend>用户爱好</legend>
<!--
单选按钮
- 使用input来创建一个单选按钮，它的type属性使用radio
- 单选按钮通过name属性进行分组，name属性相同是一组按钮
- 像这种需要用户选择但是不需要用户直接填写内容的表单项，
还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
如果希望在单选按钮或者是多选框中指定默认选中的选项，
则可以在希望选中的项中添加checked="checked"属性
-->
性别 <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label>
<br /><br />
<!--
多选框
- 使用input创建一个多选框，它的type属性使用checkbox
-->
爱好 <input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
<br /><br />
</fieldset>
<!--
下拉列表
- 使用select来创建一个下拉列表
下拉列表的name属性需要指定给select，而value属性需要指定给option
可以通过在option中添加selected="selected"来将选项设置为默认选中
当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表
-->
你喜欢的明星
<select name="star">
<!--
在select中可以使用optgroup对选项进行分组
同一个optgroup中的选项是一组
可以通过label属性来指定分组的名字
-->
<optgroup label="女明星">
<!-- 在下拉列表中使用option标签来创建一个一个列表项 -->
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">赵薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">赵本山</option>
<option value="ldh">刘德华</option>
<option value="pcj">潘长江</option>
</optgroup>
</select>
<br /><br />
<!--
使用textarea创建一个文本域
-->
自我介绍 <textarea name="info"></textarea>
<br /><br />
<!--
提交按钮可以将表单中的信息提交给服务器
使用input创建一个提交按钮,它的type属性值是submit
在提交按钮中可以通过value属性来指定按钮上的文字
-->
<input type="submit" value="注册" />
<!--
<input type="reset" />可以创建一个重置按钮，
点击重置按钮以后表单中内容将会恢复为默认值
-->
<input type="reset" />
<!--
使用input type=button可以用来创建一个单纯的按钮，
这个按钮没有任何功能，只能被点击
-->
<input type="button" value="按钮" />
<!--
除了使用input，也可以使用button标签来创建按钮
这种方式和使用input类似，只不过由于它是成对出现的标签
使用起来更加的灵活
-->
<br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
7.框架集
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，
框架集可以同时引入多个页面，而内联框架只能引入一个，
在h5标准中，推荐使用框架集，而不使用内联框架
使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中
所以要使用框架集，页面中就不可以使用body标签
属性：
rows，指定框架集中的所有的框架，一行一行的排列
cols， 指定框架集中的所有的页面，一列一列的排列
这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小
frameset中也可以再嵌套frameset
frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，
所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的
使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面
浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
如果非得用建议使用frameset而不使用iframe
-->
<frameset cols="30% , * , 30%">
<!-- 在frameset中使用frame子标签来指定要引入的页面
引入几个页面就写几个frame
-->
<frame src="01.表格.html" />
<frame src="02.表格.html" />
<!-- 嵌套一个frameset -->
<frameset rows="30%,50%,*">
<frame src="04.表格的布局.html" />
<frame src="05.完善clearfix.html" />
<frame src="06.表单.html" />
</frameset>
</frameset>
</html>
8.图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-image: url(img/3.png);
background-repeat: no-repeat;
}
.box2{
width: 200px;
height: 200px;
background-image: url(img/4.png);
background-repeat: no-repeat;
}
</style>
</head>
<body style="background-color: #bfa;">
<!--
在IE6中对图片格式png24支持度不高，
如果使用的图片格式是png24，则会导致透明效果无法正常显示
解决方法：
1.可以使用png8来代替png24，即可解决问题，
但是使用png8代替png24以后，图片的清晰图会有所下降
2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件
然后在写一下简单的JS代码，来处理该问题
-->
<div class="box1"></div>
<div class="box2"></div>
<img src="img/3.png"/>
<!-- 在body标签的最后引入外部的JS文件 -->
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<!--再创建一个新的script标签，并且编写一些js代码 -->
<script type="text/javascript">
DD_belatedPNG.fix("*");
</script>
</body>
</html>
9.实践
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>POLO360练习</title>
<!-- 引入reset.css用来清除浏览器的默认样式 -->
<link rel="stylesheet" type="text/css" href="css/reset-min.css"/>
<!-- 引入page-index -->
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
</head>
<body>
<!--
id class和文件的命名规范
- 命名时尽量使用英文，如果不会可以使用拼音
但是不要英文和拼音混用
- 命名格式
- 驼峰命名法
- 首字母小写，每个单词的开头字母大写
例子：aaaBbbCcc helloWorld
- 也可以所有的字母都小写，单词之间使用_或-链接
aaa_bbb_ccc aaa-bbb-ccc
-->
<!--创建头部div header-->
<!--header开始-->
<div class="header w">
<!-- 创建一个导航条 -->
<ul class="nav">
<li>
<a href="#">HOME</a>
<p>Back to home</p>
</li>
<li>
<a href="#">PRODUCTS</a>
<p>What we have for you</p>
</li>
<li>
<a href="#">SERVICES</a>
<p>Things we do</p>
</li>
<li>
<a href="#">BLOG</a>
<p>Follow our updates</p>
</li>
<li>
<a href="#">CONTACT</a>
<p>Ways to reach us</p>
</li>
</ul>
<!-- 在div中设置logo -->
<div class="logo">
<a href="#" title="一个非常非常好的网站">
<img src="img/logo.png" alt="网站的logo" />
</a>
</div>
</div>
<!--header结束-->
<!--banner开始-->
<div class="banner w">
<img src="img/banner/banner01.png" alt="这是一个图片" />
<!-- 创建一个div，用于放置导航按钮 -->
<div class="pointerDiv">
<a href="#"></a>
<a class="active" href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<!--banner结束-->
<!--content开始-->
<div class="content w clearfix">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<!-- 放置内容的三个div -->
<div class="pl">
<h2>Perfect Logic</h2>
<p class="p1">All you want your website to do.</p>
<!-- 创建图片的div -->
<div class="imgDiv">
<img src="img/pic/pic1.jpg" alt="小男孩" />
</div>
<p class="p2">
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt
</p>
<a class="lm" href="#">Learn More</a>
</div>
<div class="cs">
<h2>Complete Solution</h2>
<p class="p1">A tool anything and everything you can think</p>
<!-- 创建图片的div -->
<div class="imgDiv">
<img src="img/pic/pic2.jpg" alt="小女孩" />
</div>
<p class="p2">
Nemo enim ipsam voluptatem quia voluptas sit aspernatur
aut odit aut fugit, sed quia consequuntur magni dolores
eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.
</p>
<a class="lm" href="#">Learn More</a>
</div>
<div class="uc">
<h2>Uber Culture</h2>
<p class="p1">Fresh. Modern and ready for future</p>
<!-- 创建图片的div -->
<div class="imgDiv">
<img src="img/pic/pic3.jpg" alt="大绿球" />
</div>
<p class="p2">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<a class="lm" href="#">Learn More</a>
</div>
</div>
<!--content结束-->
<!--contact开始-->
<div class="contact w clearfix">
<!-- 创建三栏div -->
<div class="sc">
<h2>Social Connection</h2>
<!-- 设置段落 -->
<p class="p1">At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium</p>
<!-- 设置小图标的div -->
<div class="icon">
<a href="#"><img src="img/rss.png" /></a>
<a href="#"><img src="img/fb.png" /></a>
<a href="#"><img src="img/in.png" /></a>
<a href="#"><img src="img/yt.png" /></a>
<a href="#"><img src="img/tw.png" /></a>
</div>
<h2 class="nl">Newsletter</h2>
<p class="p1">At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium</p>
<!-- 创建一个表单 -->
<form action="#">
<input class="txt" type="text" placeholder="your email address" />
<button class="btn">Subscribe</button>
</form>
</div>
<!-- 联系栏中间 -->
<div class="co">
<!-- 创建一个标题 -->
<h2>Contact</h2>
<!-- 创建一个表单 -->
<form action="#">
<!--
在文本框和文本域中可以通过placeholder来指定提示文字（水印）
这个属性在IE8及以下的浏览器中不支持，如果要兼容IE8需要使用JS
-->
<input class="txt" type="text" placeholder="your name" />
<input class="txt" type="text" placeholder="your email address" />
<textarea class="tarea" placeholder="message"></textarea>
<button class="btn">Send it</button>
</form>
</div>
<div class="nu">
<h2>News Updates</h2>
<p>
<img src="img/pic/1.gif"/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
<img src="img/pic/2.gif"/>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam.
</p>
<p class="no-margin">
<img src="img/pic/3.gif"/>
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium.
</p>
<button class="btn">Visit our Blog</button>
</div>
</div>
<!--contact结束-->
<!--footer开始-->
<div class="footer">
<div class="w">
<p class="copy">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
<p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p>
<p><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Products</a> | <a href="#">Services</a> | <a href="#">Contact</a></p>
<p><a href="#">Privacy Policy</a> | <a href="#">Terms of use</a></p>
</div>
</div>
<!--footer结束-->
<!-- 处理ie6的png问题 -->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">DD_belatedPNG.fix("div,img,a,h1");</script>
<![endif]-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*
* IE6的双倍边距bug
* 在IE6中，当为一个向左浮动的元素设置左外边距
* 或者为一个向右浮动的元素设置右外边距时
* 这个外边距将会是设置的值的2倍
*/
.box1{
width: 100px;
height: 100px;
float: left;
/*
* 添加一个样式来解决ie6的双倍边距问题
* 对于一个浮动元素来说设置display:inline没有任何意义
* 但是该属性可以解决IE6的双倍边距问题
*/
display: inline;
background-color: red;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
九、动画(animation)
1.过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px;
height: 100px;
margin-bottom: 100px;
margin-left: 0;
}
.box2{
background-color: #bfa;
/* margin-left: auto; */
/* transition:height 2s;指定高的过渡为2s，width不变 */
/* transition:all 2s;指定所有的属性过渡为2s */
/*
过渡（transition）
- 通过过渡可以指定一个属性发生变化时的切换方式
- 通过过渡可以创建一些非常好的效果，提升用户的体验
*/
/*
1.transition-property: 指定要执行过渡的属性
多个属性间使用,隔开
如果所有属性都需要过渡，则使用all关键字
大部分属性都支持过渡效果（能计算的值注意auto不是一个有效数值，不能过渡），
注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
*/
/*
可以分别为宽、高分别指定过渡的时间
transition-property: height , width; */
/* transition-property: all; */
/*
2.transition-duration: 指定过渡效果的持续时间
时间单位：s 和 ms 1s = 1000ms
*/
/* transition-duration: 100ms, 2s; */
/* transition-duration: 2s; */
/*
3.transition-timing-function: 过渡的时序函数
指定过渡的执行的方式
可选值：
ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速 后减速
cubic-bezier() 来指定时序函数
https://cubic-bezier.com
steps() 分步执行过渡效果（指定几步执行完成）
可以设置一个第二个值：
end ， 在时间结束时执行过渡(默认值)
start ， 在时间开始时执行过渡
*/
/* transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); */
/* transition-timing-function: steps(2, start); */
/*
4.transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡
*/
/* transition-delay: 2s; */
/* 5.transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，
则两个时间中第一个是持续时间，第二个是延迟 */
transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);
}
.box3{
background-color: orange;
transition-property: all;
transition-duration: 2s;
}
.box1:hover div{
/* width: 200px;
height: 200px; */
/* background-color: orange; */
margin-left: 700px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
2.动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px;
height: 100px;
margin-bottom: 100px;
margin-left: 10px;
}
.box2{
background-color: #bfa;
/* 1.设置box2的动画 */
/* animation-name: 要对当前元素生效的关键帧的名字，test为下方的设置 */
/* animation-name: test; */
/* 2.animation-duration: 动画的执行时间 */
/* animation-duration: 4s; */
/* 3.动画的延时 */
/* animation-delay: 2s; */
/* animation-timing-function: ease-in-out; */
/*
4.animation-iteration-count 动画执行的次数
可选值：
次数
infinite 无限执行
*/
/* animation-iteration-count: 1; */
/*
5.animation-direction
指定动画运行的方向
可选值：
normal 默认值 从 from 向 to运行 每次都是这样
reverse 从 to 向 from 运行（反向） 每次都是这样
alternate 从 from 向 to运行（执行完from到to后又从to到from） 重复执行动画时反向执行
alternate-reverse 从 to 向 from运行（to到from后又从from到to） 重复执行动画时反向执行
*/
/* animation-direction: alternate-reverse; */
/*
6.animation-play-state: 设置动画的执行状态（停止或进行）
可选值：
running 默认值 动画执行
paused 动画暂停
*/
/* animation-play-state: paused; */
/*
7.animation-fill-mode: 动画的填充模式
可选值：
none 默认值 动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards 和 backwards
*/
/* animation-fill-mode: both; */
animation: test 2s 2 1s alternate;
}
.box1:hover div{
animation-play-state: paused;
}
/*
动画
动画和过渡类似，都是可以实现一些动态的效果，
不同的是过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
*/
@keyframes test {
/* from表示动画的开始位置 也可以使用 0% （即from可以改为0%）*/
from{
margin-left: 0;
background-color: orange;
}
/* to动画的结束位置 也可以使用100%（即to可以改为100%）*/
to{
background-color: red;
margin-left: 700px;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- <div class="box3"></div> -->
</div>
</body>
</html>
3.关键帧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outer{
height: 500px;
border-bottom: 10px black solid;
margin: 50px auto;
overflow: hidden;
}
.outer div{
float: left;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #bfa;
animation: ball .5s forwards linear infinite alternate;
}
div.box2{
background-color: orange;
animation-delay: .1s;
}
div.box3{
background-color: yellow;
animation-delay: .2s;
}
div.box4{
background-color: yellowgreen;
animation-delay: .3s;
}
div.box5{
background-color: blue;
animation-delay: .4s;
}
div.box6{
background-color: pink;
animation-delay: .5s;
}
div.box7{
background-color: tomato;
animation-delay: .6s;
}
div.box8{
background-color: skyblue;
animation-delay: .7s;
}
div.box9{
background-color: chocolate;
animation-delay: .8s;
}
/* 创建小球下落到结束位置后停止 animation: ball 1s forwards */
/* 创建小球下落后弹起的动画 */
@keyframes ball {
from{
margin-top: 0;
}
to{
margin-top: 400px;
}
/* 2 to{
margin-top: 400px;
animation-timing-function: ease-in;
}
40%{
margin-top: 100px;
}
80%{
margin-top: 200px;
} */
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</div>
</body>
</html>
4.变形平移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background-color: rgb(236, 236, 236);
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 0 auto;
margin-top: 200px;
/*
变形就是指通过CSS来改变元素的形状或位置（不会脱离文档流）
- 变形不会影响到页面的布局
- transform 用来设置元素的变形效果
- 平移：
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
- 平移元素，百分比是相对于自身计算的
*/
/* transform: translateY(-100px); */
transform: translateX(100%);
}
/* .box2{
width: 200px;
height: 200px;
background-color: orange;
margin: 0 auto;
} */
.box3{
background-color: orange;
position: absolute;
/*
这种居中方式，只适用于元素的大小（宽、高）确定
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto; */
/*transform的居中，中间空格隔开*/
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.box4, .box5{
width: 220px;
height: 300px;
background-color: #fff;
float: left;
margin: 0 10px;
transition:all .3s;
}
.box4:hover,.box5:hover{
transform: translateY(-4px);
box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<!-- <div class="box3">
aaaa
</div> -->
<div class="box4">
</div>
<div class="box5">
</div>
</body>
</html>
5.z轴平移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
/* 设置当前网页的视距为800px，人眼距离网页的距离 */
perspective: 800px;
}
body{
border: 1px red solid;
background-color: rgb(241, 241, 241);
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto;
/*
z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，
距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
必须要设置网页的视距 perspective
*/
transition:2s;
}
body:hover .box1{
transform: translateZ(800px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
6.旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
perspective: 800px;
}
body{
border: 1px red solid;
background-color: rgb(241, 241, 241);
}
.box1{
width: 320px;
height: 320px;
background-color: #bfa;
margin: 200px auto;
transition:2s;
}
body:hover .box1{
/*
通过旋转可以使元素沿着x y 或 z旋转指定的角度（要使用视距 perspective）
rotateX()
rotateY()
rotateZ()
*/
/* transform: rotateZ(.25turn);1turn为1圈（360度）*/
/* transform: rotateY(180deg) translateZ(400px); */
/* transform: translateZ(400px) rotateY(180deg) ; deg为度*/
transform: rotateY(180deg);
/* 是否显示元素的背面，hidden为隐藏 */
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="box1">
<img src="an.jpg" alt="">
</div>
</body>
</html>
7.缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
perspective:800px;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
transition:2s;
margin: 100px auto;
/* 变形的原点（从哪开始变形） 默认值 center*/
/* transform-origin:20px 20px; */
}
.box1:hover{
/*
对元素进行缩放的函数：
scaleX() 水平方向缩放，小于1为缩放，大于1为放大，下同
scaleY() 垂直方向缩放
scale() 双方向的缩放
*/
transform:scale(2)
}
.img-wrapper{
width: 200px;
height: 200px;
border: 1px red solid;
overflow: hidden;
}
img{
/*0.2s*/
transition: .2s;
}
.img-wrapper:hover img{
transform:scale(1.2);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="img-wrapper">
<img src="an.jpg" width="100%">
</div>
</body>
</html>
十、less
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
/* css原生也支持变量的设置,但兼容性不是很好，ie12都不支持 */
--color:#ff0;
--length:200px;
}
.box1{
/* calc()计算函数 */
width: calc(200px*2);
height: var(--length);
background-color: var(--color);
}
.box2{
width: var(--length);
height: var(--length);
color: var(--color);
}
.box3{
width: var(--length);
height: var(--length);
border: 10px solid var(--color);
}
</style>
</head>
<body>
<!--
less是一门css的预处理语言
- less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
- 在less中添加了许多的新特性：像对变量的支持、对mixin的支持... ...
- less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，
所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行
div{
width:100px;
}
div
width 100px
-->
<div class="box1">aaaa</div>
<div class="box2">aaaa</div>
<div class="box3">aaaa</div>
</body>
</html>
1.less的语法
// less中的单行注释，注释中的内容不会被解析到css中
/*
css中的注释，内容会被解析到css文件中
*/
.box1{
background-color: #bfa;
.box2{
background-color: #ff0;
.box4{
color: red;
}
}
.box3{
background-color: orange;
}
}
//变量，在变量中可以存储一个任意的值
// 并且我们可以在需要时，任意的修改变量中的值
// 变量的语法： @变量名
@a:200px;
@b:#bfa;
@c:box6;
.box5{
//使用变量是，如果是直接使用则以 @变量名 的形式使用即可
width: @a;
color:@b;
}
//作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c}{
width: @a;
background-image: url("@{c}/1.png");
}
@d:200px;
@d:300px;
div{
// 变量发生重名时，会优先使用比较近的变量
@d:115px;
width: @d;
height: @e;
}
//可以在变量声明前就使用变量
@e:335px;
div{
width: 300px;
// 新版的语法，即用$对上面的width引用
// height: $width;
}
.box1{
.box2{
color: red;
}
>.box3{
color: red;
&:hover{
color: blue;
}
}
//为box1设置一个hover
//& 就表示外层的父元素
&:hover{
color: orange;
}
/*即相当于div box1*/
div &{
width: 100px;
}
}
.p1{
width: 100px;
height: 200px;
}
/*:extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.box1 > .box3){
color: red;
}
*/
.p2:extend(.p1){
color: red;
}
.p3{
//直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
//mixin 混合
.p1();
}
// 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins（混合函数）
//表示p4专门用来给其他的用
.p4(){
width: 100px;
height: 100px;
}
//下方的.p4的括号可以省略不写
.p5{
.p4();
}
//混合函数 在混合函数中可以直接设置变量
/*.test(@w,@h,@bg-color){
width: @w;
height: @h;
border: 1px solid @bg-color;
}*/
//分别为所设的变量设置默认值，那就可以后面不用写值，用默认值了
.test(@w:100px,@h:200px,@bg-color:red){
width: @w;
height: @h;
border: 1px solid @bg-color;
}
div{
//调用混合函数，按顺序传递参数
// .test(200px,300px,#bfa);
//更改width的默认值
.test(300px);
// .test(@bg-color:red, @h:100px, @w:300px);也可以直接按名字来传
}
span{//去两个颜色的中间值
color: average(red,blue);
}
html{
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background-color: #bfa;
}
body:hover{
//移动上去时给颜色加深50%
background-color: darken(#bfa,50%);
}
//import用来将其他的less引入到当前的less
//可以通过import来将其他的less引入到当前的less中
@import "syntax2.less";
.box1{
// 在less中所有的数值都可以直接进行运算
// + - * /
width: 100px + 100px;
height: 100px/2;
background-color: #bfa;
}
十一、flex
flex的学习推荐通过我的其他博客进行学习，点击前往
1.弹性盒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border: 10px red solid;
/* 将ul设置为弹性容器，设置之后默认横向排列 */
display: flex;
/*
1.flex-direction 指定容器中弹性元素的排列方式
可选值：
row 默认值，弹性元素在容器中水平排列（左向右）
- 主轴 自左向右
row-reverse 弹性元素在容器中反向水平排列（右向左）
- 主轴 自右向左
column 弹性元素纵向排列（自上向下）
column-reverse 弹性元素方向纵向排列（自下向上）
主轴：
弹性元素的排列方向称为主轴
侧轴：
与主轴垂直方向的称为侧轴
*/
flex-direction: row;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
2.弹性元素的属性：
flex-grow 指定弹性元素的伸展的系数，默认值为0
- 当父元素有多余空间的时，子元素如何伸展
- 父元素的剩余空间，会按照比例进行分配
- 为子元素设置的值越大，分配越多越多
flex-shrink 指定弹性元素的收缩系数，默认值为1，
- 当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩
- 如果设置为0将不会自动进行收缩
- 为子元素设置的值越大，收缩越多
*/
/* 当设置flex-grow: 1;后子元素平均把父元素撑满，也可以分别为子元素设置 */
/*
*/
flex-shrink: 0;
}
li:nth-child(1){
flex-grow: 0;
flex-shrink: 1;
}
li:nth-child(2){
background-color: pink;
/* flex-grow: 2; */
flex-shrink: 2;
}
li:nth-child(3){
background-color: orange;
/* flex-grow: 3; */
flex-shrink: 3;
}
</style>
</head>
<body>
<!--
flex(弹性盒、伸缩盒)
- 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
- flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
- 弹性容器
- 要使用弹性盒，必须先将一个元素设置为弹性容器
- 我们通过 display 来设置弹性容器
display:flex 设置为块级弹性容器（一般用这个）
display:inline-flex 设置为行内的弹性容器
- 弹性元素
- 弹性容器的子元素是弹性元素（弹性项）重点例如ul的子元素li
- 弹性元素可以同时是弹性容器
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
2.弹性容器的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 600px;
height: 800px;
border: 10px red solid;
/* 设置ul为弹性容器 */
display: flex;
/* flex-direction: column; */
/* flex-wrap:
设置弹性元素是否在弹性容器中自动换行
可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行
*/
/* flex-wrap: wrap-reverse; */
/* flex-flow: wrap 和 direction 的简写属性 */
flex-flow: row wrap;
/*
justify-content
- 如何分配主轴上的空白空间（主轴上的元素如何排列）
- 可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧（平均分配到每个元素的两侧，中间的是两侧的两倍）
space-between 空白均匀分布到元素间（两侧没有空白，平均分配到每个元素的两侧）
space-evenly 空白分布到元素的单侧（平均分配到每个元素的两侧，大小都一样）
*/
/* justify-content: center; */
/*
align-items:
- 元素在辅轴上如何对齐
- 元素间的关系
- 可选值：
stretch 默认值，将元素的长度设置为相同的值（行与行的高度）
flex-start 元素不会拉伸，沿着辅轴起边对齐（即所处的顶部）
flex-end 沿着辅轴的终边对齐
center 居中对齐
baseline 基线对齐，即文字的基线（文字的底部）
*/
/* justify-content: center; */
align-items: flex-start;
/*
弹性容器的水平居中对齐：
justify-content: center;
align-items: center
*/
/* align-content: 辅轴空白空间的分布，与align-items是一样的 */
align-content: space-between;
}
li{
width: 200px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
li:nth-child(1){
/* align-self: 用来覆盖当前弹性元素上的align-items */
align-self: stretch;
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
li:nth-child(4){
background-color: yellow;
}
li:nth-child(5){
background-color: chocolate;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>
2
<div>2</div>
</li>
<li>
3
<div>3</div>
<div>3</div>
</li>
<li>1</li>
<li>
2
<div>2</div>
</li>
</ul>
</body>
</html>
3.弹性元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 900px;
border: 10px red solid;
/* 设置弹性盒 */
display: flex;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
弹性的增长系数，它们子元素的比例都是一样的
*/
/* flex-grow: 1; */
/*
弹性元素的缩减系数
- 缩减系数的计算方式比较复杂
- 缩减多少是根据 缩减系数 和 元素大小来计算
*/
/* flex-shrink: 1; */
/*
元素基础长度
flex-basis 指定的是元素在主轴上的基础长度
如果主轴是 横向的 则 该值指定的就是元素的宽度
如果主轴是 纵向的 则 该值指定的是就是元素的高度
- 默认值是 auto，表示参考元素自身的高度或宽度(即上方为li设置的宽高)
- 如果传递了一个具体的数值，则以该值为准（即上方为li设定的宽高无效，flex-basis：100px;）
*/
/* flex-basis: auto; */
/*
flex 可以设置弹性元素所有的三个样式
flex 增长 缩减 基础;
flex: 1 1 auto;
initial为默认值即为 "flex: 0 1 auto".
auto "flex: 1（可增） 1（可减） auto"
none "flex: 0 0 auto" 弹性元素没有弹性（不会缩不会减）
*/
flex: initial;
}
li:nth-child(1){
/* order 决定弹性元素的排列顺序 order: 2;即元素排在第二的位置*/
order: 2;
}
li:nth-child(2){
background-color: pink;
/* flex-grow: 2; */
order: 3;
}
li:nth-child(3){
background-color: orange;
/* flex-grow: 3; */
order: 1;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
4.像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<!--
像素：
- 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
- 分辨率：1920 x 1080 说的就是屏幕中小点的数量
- 在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素
- 物理像素，上述所说的小点点就属于物理像素
- CSS像素，编写网页时，我们所用像素都是CSS像素
- 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
- 一个css像素最终由几个物理像素显示，由浏览器决定：
默认情况下在pc端，一个css像素 = 一个物理像素
视口（viewport）（即查看html的宽度）
- 视口就是屏幕中用来显示网页的区域
- 可以通过查看视口的大小，来观察CSS像素和物理像素的比值
- 默认情况下：
视口宽度 1920px（CSS像素）
1920px（物理像素）
- 此时，css像素和物理像素的比是 1:1
- 放大两倍的情况（即把1个css像素放大成了2个css像素）：
视口宽度 960px（CSS像素）
1920px（物理像素）
- 此时，css像素和物理像素的比是1:2
- 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值
-->
</body>
</html>
5.移动端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 900px;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<!--
在不通的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
24寸 1920x1080
i6 4.7寸 750 x 1334
智能手机的像素点 远远小于 计算机的像素点
问题：一个宽度为900px的网页在iphone6中要如何显示呢？
重点： 默认情况下，移动端的网页都会将视口设置为980像素（css像素）
以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，
移动端的浏览器会自动对网页缩放以完整显示网页
https://material.io/resources/devices/
所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，
为了解决这个问题，大部分网站都会专门为移动端设计网页
-->
<div class="box1"></div>
</body>
</html>
6.移动端页面(完美视口)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--width=device-width, initial-scale=1.0这两句都是一样的意思，都写上是为了更好的适配-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 重点：设置视口大小 device-width表示设备的宽度（完美视口），也可以自己指定宽-->
<!-- <meta name="viewport" content="width=device-width"> -->
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!--
移动端默认的视口大小是980px(css像素)，
默认情况下，移动端的像素比就是 980/移动端宽度 （980/750）
如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，
导致网页中的内容非常非常的小
编写移动页面时，必须要确保有一个比较合理的像素比：
1css像素 对应 2个物理像素
1css像素 对应 3个物理像素
- 可以通过meta标签来设置视口大小
- 每一款移动设备设计时，都会有一个最佳的像素比，
一般我们只需要将像素比设置为该值即可得到一个最佳效果
将像素比设置为最佳像素比的视口大小我们称其为完美视口
将网页的视口设置为完美视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
结论：以后再写移动端的页面，就把上边这个玩意先写上
-->
<div class="box1"></div>
</body>
</html>
7.视口(vw单位)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 6.4vw;
height: 4.667vw;
background-color: #bfa;
}
</style>
</head>
<body>
<!--
不同的设备完美视口的大小是不一样的
iphone6 -- 375
iphone6plus -- 414
由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，
比如在iphone6中 375就是全屏，而到了plus中375就会缺一块
所以在移动端开发时，就不能再使用px来进行布局了
vw 表示的是视口的宽度（viewport width）
- 100vw = 一个视口的宽度
- 1vw = 1%视口宽度
vw这个单位永远相当于视口宽度进行计算
设计图的宽度
750px 1125px
设计图
750px
使用vw作为单位
100vw
创建一个 48px x 35px 大小的元素
100vw = 750px(设计图的像素)100/750 0.1333333333333333vw = 1px
6.4vw = 48px(设计图像素)
4.667vw = 35px
-->
<div class="box1">
</div>
</body>
</html>
8.vw适配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
/*
网页中字体大小最小是12px，不能设置一个比12像素还小的字体
如果我们设置了一个小于12px的字体，则字体自动设置为12
0.1333333vw = 1px
5.3333vw = 40px
*/
font-size: 5.3333vw;
}
.box1{
/*
rem
- 1 rem = 1 html的字体大小
- 1 rem = 40 px(设计图)
*/
width: 18.75rem;
height: 0.875rem;
background-color: #bfa;
}
</style>
</head>
<body>
<!--
48 x 35
-->
<div class="box1"></div>
</body>
</html>
9.响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
使用媒体查询
语法： @media 查询规则{}
媒体类型：
all 所有设备
print 打印设备（只有打印机打印的时候才会显示）
screen 带屏幕的设备（有屏幕的设备）
speech 屏幕阅读器
- 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系
可以在媒体类型前添加一个only，表示只有。
only的使用主要是为了兼容一些老版本浏览器
也可以加not，表示非，表示除了他们之外（具体查看文档）
*/
/* @media print,screen{
body{
background-color: #bfa;
}
} */
@media only screen {
body{
background-color: #bfa;
}
}
</style>
</head>
<body>
<!--
响应式布局
- 网页可以根据不通的设备或窗口大小呈现出不同的效果
- 使用响应式布局，可以使一个网页适用于所有设备
- 响应布局的关键就是 媒体查询
- 通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式
-->
</body>
</html>
10.媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
媒体特性：
width 视口的宽度
height 视口的高度
min-width 视口的最小宽度（视口大于指定宽度时生效）
min-width:500px; 大于500px的时候生效
max-width 视口的最大宽度（视口小于指定宽度时生效）
max-width:500px; 小于500px的时候生效
*/
/*视口宽度是500px的时候就生效，大或小了都不显示，一般只写宽度，高度一般不考虑*/
/* @media (max-width: 500px){
body{
background-color: #bfa;
}
} */
/*
样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化
一般比较常用的断点
小于768 超小屏幕 max-width=768px
大于768 小屏幕 min-width=768px
大于992 中型屏幕 min-width=992px
大于1200 大屏幕 min-width=1200px
@media only screen and (min-width: 500px),(max-width:700px)之间的,表示或的意思
and表示且的意思
*/
@media only screen and (min-width: 500px) and (max-width:700px){
body{
background-color: #bfa;
}
}
</style>
</head>
<body>
</body>
</html>
源码获取
至此，我们的HTML5+CSS3的学习(五)就讲解完成了。下篇我们将介绍案例实战，源码素材可以通过关注我的微信公众号 我爱学习呀嘻嘻 ，回复关键字HTML5+CSS3源码素材进行获取哦。
HTML5+CSS3的学习(一)：HTML、CSS、CSS选择器
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
