杂乱

1、外部的的js和css写在前面引入，可以想成是目录结构更靠外的写在前面。

2、需要在页面展示竖线的时候使用border:1px solid #ccc;另一种实现方式，使用背景图：

background: url("../img/loginpanel-left-line.png") no-repeat scroll 12px 14px rgba(0, 0, 0, 0);

3、尽量不要设置外层容器的宽和高，让其被内部的内容撑开;

4、实现右边的箭头的时候，箭头不需要单独弄一个标签，可以以真个元素的背景图形式展示

CSS选择器

5、相邻选择符 p+p{color:red;} //会选择到紧挨着的两个p元素，并将第二个p字体设置为红

6、兄弟选择符p~p{color:red;}//会选择到同一辈分的所有p，可以是不相邻的，并且把p2，p3改红（除去p1）

7、p[class~="external"]{color:red;}//匹配到class中有external的，类似 class="aa external bb"

8、p[class^="a"]//匹配到以a开头的p，如 class="abc"

9、p[class$="a"]//匹配到以a结尾的p，如 class="bca"

10、p[class*="a"]//匹配到有a的p，如 class="bca"

11、p[class|="a"]//匹配到"a-"开头的p，如 class="a-bcd"，另外，也会匹配到class="a"

12、想要选中第一个li；li:first-child{color:red}//注意不是ul:first:child{}

<ul>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
</ul>

！！！！另外，如下，在前面加上一个另外的标签，就匹配不到第一个li了

<ul>
    <a></a>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
</ul>

13、last-child如上相同

14、li:first-of-type //会匹配到li的第一个，不管li前是否有其他元素

随记

15、display:none\9; //这样的写法正常看来是错误的，但是在IE7,8,9都是正确的写法（这条css会起效果），而在chrome和firefox中是没有效果的，所以可以利用这特性；例如：

IE6-8版本是不支持opacity（透明度）的，但是我需要使用opacity: 0;来隐藏元素（实现动画效果），这时就只能放弃IE6-8的动画效果了，使其直接消失就行。

opacity: 0;

display:none/9;

16、<meta name="viewport" content="width=device-width, initial-scale=0.2857142857142857, maximum-scale=1"> 

width=device-width ：自适应屏幕大小

initial-scale=0.2857142857142857 初始缩放比例 ，缩小0.28

maximum-scale=1 最大缩放