HTML5+CSS3的学习(五)
2024-04-09 06:30:14
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 方式，默认提交方式，会将参数拼接在连接后面，有大小限制，4kpost 方式，会将参数封装在请求体中，理论上来说大小没有限制--><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中也可以再嵌套framesetframeset和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.comsteps() 分步执行过渡效果（指定几步执行完成）可以设置一个第二个值：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;}divwidth 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寸 1920x1080i6 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 -- 375iphone6plus -- 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 = 1px6.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的字体，则字体自动设置为120.1333333vw = 1px5.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的学习(六)：案例实战
HTML5+CSS3的学习(一)：HTML、CSS、CSS选择器
HTML5+CSS3的学习(二)：文本标签及样式
HTML5+CSS3的学习(三)：CSS盒子模型
HTML5+CSS3的学习(四)：背景、表格
HTML5+CSS3的学习(五)相关推荐
- HTML5+CSS3的学习(一)
HTML5+CSS3的学习(一) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
- HTML5+CSS3的学习(四)
HTML5+CSS3的学习(中) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
- HTML5+CSS3的学习(六)
HTML5+CSS3的学习(六) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
- HTML5+CSS3的学习(二)
HTML5+CSS3的学习(二) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
- h5(html5),css3入门学习笔记
萌新入门,做听课笔记,学的是黑马程序员pink老师的视频,可以去b站搜 目录 HTML 一.语法规范 二.基本结构标签(骨架标签) 三.vscode工具生成骨架标签新增代码(一定要写): 四.常用标签 ...
- html5+css3动画学习总结
HTML5最让人新奇的要属动画这一块了,因为这里的好多样式都是非常的炫酷:让你真正见识到前端的魅力所在,做出的效果往往都是让人:哇!!哇!!赞不绝口的.不信你接着往下看: CSS3动画效果共3大部分: ...
- HTML5+CSS3基础学习day3盒模型
文章目录 前言 一.盒模型 盒模型图例 盒子水平布局 盒子垂直布局 外边距的重叠 行内元素的盒模型 盒子的尺寸 轮廓和圆角 二.练习 练习1(图片的列表) 练习2(导航条) 练习3(列表) 总结 前言 ...
- 1.html5+css3基础学习笔记(上)
1 HTML简介 1.1 W3C标准 伯纳斯李1994年建立万维网联盟( W3C ),W3C的出现为了制订网页开发的标准,以使同一个网页在不同的浏览器中有相同的效果.所以,我们需要制订我们编写的网页都 ...
- HTML5+CSS3基础学习笔记：2
文档的使用 <!-- 文档的声明,声明当前网页的版本 --> <!DOCTYPE html> <!-- html的跟标签(元素),网页的所有内容都是写跟元素的里边 --& ...
最新文章
- sql随机实现,sql GUID
- Service 和 doGet 和 doPost 方法的区别
- morphologyEx函数
- 学习笔记Spark（七）—— Spark SQL应用（2）—— Spark DataFrame基础操作
- git与github区别与简介
- 【网工必备】网络端口号大全......
- java中什么是守护线程_什么是Java的守护线程？
- chrome禁止三方cookie，网站登录不了怎么办
- 计算机网络，IP地址概念及IP地址详细分类介绍、及子网掩码详细介绍MAC地址介绍、网络位，主机位、网络地址、广播地址。
- labeme批量转换json文件_Python实现markdown文件批量转换为word
- JavaScript学习（六十九）—正则表达式实训题
- 太原理工大学ICPC队介绍（2021版）
- bzoj 3404: [Usaco2009 Open]Cow Digit Game又见数字游戏（SG函数）
- C# string byte[] 转换
- 如何判断一个网页是否更新
- Linux串口通信编程
- cv2.cvtColor() 的使用
- 2018蚂蚁金服Java开发实习生一面面经
- java-工作时突发的一个天马行空的想法
- 关于linux的最新问题合集