html5新标签、CSS3新增选择器
优点
可以做和图片一样的事
其本质就是文字
可以随意的改变颜色、产生阴影、透明效果等
体积更小、携带的信息没有消减
主流浏览器都支持
字体图标使用流程
1.UI人员设计字体图标效果图
2.前端人员上传生成兼容性文字文件包
3.前端人员下载兼容字体文件包到本地
4.把字体文件包引入到HTML页面中
详细步骤
1.将以
.eot、.svg、.ttf、.woff结尾的文件放到fonts文件夹中注：
2.在样式中声明字体
@font-face { /*声明字体 引用字体*/ font-family: "icomoon"; /*我们自己起名字可以*/ src: url('fonts/icomoon.eot?7kkyc2'); /*确保fonts/icomoon.eot存在*/ src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-style: normal; /*倾斜字体正常*/ }
3.给盒子使用字体
span {
font-family: "icomoon";
}4.盒子里面添加结构
span::before {
content: "\e900";
}
或者
<span></span>
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @font-face { /*声明字体 引用字体*/ font-family: "icomoon"; /*我们自己起名字可以*/ src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-style: normal; /*倾斜字体正常*/ } span, em { font-family: "icomoon"; font-size: 100px; color: pink; font-style: normal; } .car { font-family: "icomoon"; } </style> </head> <body> <div>行高不带单位</div> <span></span> <em></em> <div class="car"></div> <button>123</button> </body> </html>
CSS验证工具
CssStats 是一个在线的 CSS 代码分析工具
http://www.cssstats.com/项目上线的话，可以通过此网址测试
统一验证工具
http://validator.w3.org/unicorn/
HTML5新标签
datalist
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body> <input type="text" value="请输入明星" list="star"/> <datalist id="star"> <option value="刘德华">刘德华</option> <option value="刘若英">刘若英</option> <option value="刘晓庆">刘晓庆</option> <option value="戚薇">戚薇</option> <option value="戚继光">戚继光</option> </datalist> </body> </html>
插入视屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <iframe height=498 width=510 src='http://player.youku.com/embed/XMzIzNTc0MTAwMA==' frameborder=0 'allowfullscreen'></iframe> </body> </html> 插入音频 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 声音 --> <audio controls loop> <source src="bgsound.mp3"/> <source src="music.ogg"/> 您的浏览器版本太低 </audio> <!-- 视屏 --> <video autoplay controls> <source src="movie04.ogg"/> <source src="mp4.mp4"/> </video> </body> </html>
CSS3新增选择器
结构伪类选择器
:first-child
选取属于父元素的首个子元素的指定选择器
:last-child
选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n)
匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n)
选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*a:hover 鼠标经过a链接的时候 */ /*ul li:first-child { } ul li:last-child { } li:nth-child(3) { 选择第3个 }*/ /*li:nth-child(even) { even 选择所有的偶数 } li:nth-child(odd) { odd 选择所有的奇数 }*/ /* li:nth-child(2n) { n = 0 1 2 3 4 5 2n 0 2 4 6 8 10...开始 2n 类似于even } */ /* li:nth-child(2n+1) { 奇数 odd } */ li:nth-child(4n) { /* 4.8.12 */ background-color: blue; } </style> </head> <body> <ul> <li>燕洵</li> <li>楚乔</li> <li>小乔</li> <li>亚瑟</li> <li>文字呢绒</li> <li>文字呢绒</li> <li>文字呢绒</li> <li>文字呢绒</li> <li>文字呢绒</li> </ul> </body> </html>
属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*div[class] { 选出所有 带有 class 属性的 background-color: pink; }*/ /*div[class=demo] { 选出 class = demo 的 background-color: pink; }*/ /* div[class^=test] { 选出test 开头的 标签 background-color: purple; }*/ div[class$=test] { /*选出test 开头的 标签 ^ $ */ background-color: purple; } </style> </head> <body> <div class="demo">王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div class="firsttest">王者荣耀</div> <div class="test">王者荣耀</div> <div class="test1">王者荣耀</div> <div class="test2">王者荣耀</div> <div class="test3">王者荣耀</div> </body> </html>
伪元素选择器
::first-letter: 选择第一个字
::first-line:第一行
::selection:选择文字时的状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*p::first-letter { 选择第一个字 font-size: 100px; }*/ /*p::first-line { 第一行 color: red; }*/ p::selection { /*选择文字时候的状态*/ background-color: pink; color: yellow; } </style> </head> <body> <p>中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!</p> </body> </html>
::before
::after
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div::before { /*必须带一个属性 content 伪元素 其实这个 before 是个盒子*/ /* 这个盒子是行内的盒子 可以转换*/ content: "我"; /*width: 200px; height: 200px; display: block;*/ } div::after { content: "18岁"; } </style> </head> <body> <div>今年</div> </body> </html>
box-sizing属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { box-sizing: border-box; } div { width: 300px; height: 300px; background-color: pink; padding: 30px; border-right: 20px solid red; box-sizing: border-box; /*内减模式*/ } </style> </head> <body> <div></div> </body> </html>
保存redis相关笔记
