1、icon字体图标
iconfont.cn 字库 icomoon.io 字库
挑选 下载(把fonts复制到网页同一文件夹中) 引入html(放入style中)
(1)@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;
}
(2)span内粘贴字体图标网页(demo)中图标后面小方框
(3)span {font-family: "icomoom"} 图标出现
2、追加新图标
(1)点击import icons把压缩包里selection.json上传
(2)挑选需要的图标
(3)下载
3、css reset 初始化
引入normrlize.css head中间
4、ico图标
放在head中间
网站/favicon.ico 右键图片另存为 放在根目录
5、构建
css: bass.css(公共样式头部尾部) normalize.css(初始化) index.css(网站首页独有)
js
images
fonts
index.html
favicon.ico
6、h1后必须有网站名
隐藏字text-indent:-999em; overflow:hidden;
7、三大标签
8、W3C
www.cssstates.com
9、代码压缩
横向ctrl+shift+( 复原ctrl+shift+)
站长之家www.chinaz.com
10、html 5(ie9以上)
新标签 header(头部)nav(导航栏)footer(底部)article(定义文章)section(区域)aside(侧边栏)
datalist(定义标签列表与input同用)fieldset(表单内元素分组与legend同用)
input新属性 email tel url number search range(拖动滑块)time date datetime month week
新增属性 placeholder(占位符) autofocus(自动获取光标)multiple(多选)required(不能为空)accesskey(规定激活某个元素快捷键)
音频
视频
11、C3
结构伪类选择器 :first-child {}(其父首个子元素):last-child {}(其父最后一个元素)
:nth-child( even/2n(偶数)odd/2n+1(奇数)) {}(其父第n个子元素)
属性选择器 div[class](选出带有class属性)div[class=demo](选出class=demo) div[class^=test](选出以test开头的) div[class$=test](选出以test开头的) div[class*=test](选出包含test的)
伪元素选择器 p::first-letter(第一个字)::first-line(第一行)::selection(选择文字时候状态)
div::before{content:"";}(必须带content,在div内部前面加内容,为行内元素)
盒子模型 box-sizing: border-box;内减模式