1.<htmllang="zh-CN"> 防止en时访问提示翻译。
2.<metahttp-equiv="x-ua-compatible"content="ie=edge">强制使用最新的ie浏览器渲染界面,ie11这个模式已被弃用。
3.<metaname="viewport"content="width=dervice-width,initial-scale=1">
4.<!--[if lt/gt/lte/gte IE8]>.<![endif]-->
<!--[if lte IE8]><p>您所用的浏览器太老了,请[更新浏览器:]<![endif]-->(http://browsehappy.com)</p>.<![endif]-->
5.class命名,一般全部小写,中间用-间隔;ip命名:首字母小写的驼峰法。用class写样式,用id写js。
6.logo这样必不可少的图片,嵌入到页面中:'<nav><imgsrc="..."/></nav>'。。其他装饰性的(比如花边什么)可以写进class里当背景。用户禁用样式,或者用自己
7.http://necolas.github.io/normalize.css/使用 normalize.css来初始化html5标签
8.px 是绝对单位,是像素的个数
em,rem是相对单位
em: 1)相对于父级元素的font--size
2)具有继承性
3)当没有设置font-size时,浏览器会有一个默认的em设置:1em=16px;
rem是相对于根html ,其他与em一样
font-size:62.5%:1rem=10px
font-size:100%:1rem=16px
实际写页面的时候,margin,padding,font-size等等这些都可以用rem里做单位。width用%来定义,,尽量不要定义div的height,让内容撑起来。单行文本用line-height而不定义height。多行内容也不定义height,用padding和内容撑起来,,连button都不用height..
9.顶部导航的第一个li没有左边框,最后一个没有有边框 样式设置小技巧(ul li+li的意义):
<ul><li></li><li></li><li></li></ul>
ul li+li{border-left:1px solid red;margin-left:-3px"}//指的是从第二个开始到最后一个的所有li。。
ul li{display:inline-block;},导航这样的可以用display:inline-block;来浮动,没必要用float 再来清float。设置负margin来清除li之间的换行符。
10.媒体查询:
1)单位选择:分辨率不同,功能不同,用px;分辨率不同,只有样式不同,其他都相同,用相对em比较好。
2)级别比样式高,单位不是相对于HTML,而是相对浏览器,所以此时单位间关系:1rem=1em=16px
11.选择器
1)基本选择器:E>F F是E的直接子元素,不包括孙子元素曾孙子元素;E+F 同父的相邻兄弟元素;E~F同父相邻的后面的所以子元素
2)属性选择器
3)伪类和伪元素选择器
:nth-child() 从第一个子元素开始算,不管所有元素都相不相同;:nth-of-type()从相同的子元素中的第一个开始算起。()括号里的数字都从1开始。