读书笔记之一些可能会有用的东西

1.details 一个简单的收起/展开

<details>
      <summary>Notes</summary>
      <ul>
          <li>111</li>
          <li>222</li>
          <li>3333</li>
      </ul>
  </details>

2.消除表单校验时代默认样式（FF4会用本身的样式）

：invalid { box-shadow : none ;}

3.若旧版浏览器不支持html5表单校验里面的required

input:required,input[required]{
  //.....
}

4.可提示的input框（datalist）

<label for="favcolor">Favorite Color</label>
   <input type="text" list="colors" id="favcolor" name="favcolor">
   <datalist id="colors">
       <option value="Blue"></option>
       <option value="Green"></option>
       <option value="Black"></option>
       <option value="Yellow"></option>
   </datalist>

5.防止旧版浏览器不认识某些元素是块级仍是行级

article,aside,figure,footer,header,hgroup,nav,section{
    display:block;
}

6.关系选择器

//后代选择器   E F
//子选择器   E>F
//相邻兄弟选择器  E+F
//通常兄弟选择器  E~F

7.背景的透明度

body{
    background:rgba(0,0,0,0.3);
}
//最后一个表明透明度alpha，0-1，0为彻底透明，1为彻底不透明

8.表示颜色的方式：

.first{background-color: #800000;}
.second{background-color: maroon;}
.third{background-color: rgb(128,0,0);}
.fourth{background-color: rgba(128,0,0,1.0);}
.fifth{background-color: hsl(0,100%,13%);}
.sixth{background-color: hsla(0,100%,13%,1.0);}

9.圆角

/*圆角border-radius*/
 -moz-border-radius: 25px;
           /*每一个角能够设置圆角（旧版FF）*/
           /*-moz-border-radius-topleft: 5px;*/
           /*-moz-border-radius-topright: 5px;*/
           /*-moz-border-radius-bottomleftleft: 5px;*/
           /*-moz-border-radius-bottomrightleft: 5px;*/
 border-radius: 25px;
           /*每一个角能够设置圆角*/
           /*borer-top-left-radius:5px;*/
           /*borer-top-right-radius:5px;*/
           /*borer-bottom-left-radius:5px;*/
           /*borer-bottom-right-radius:5px;*/

10.投影

/*投影*/
/*box-shadow: a b c d rgba(x,x,x,x);
  a:水平偏移，正值向右，负值向左；b：垂直偏移，正值向下，负值向上；c:阴影模糊距离；d:阴影扩张距离*/
-webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
-moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
box-shadow: 2px 5px 0 0 rgba(72,72,72,1);

11.页面上有<HTML5>&{CSS3}

<a href="">&lt;HTML5&gt;&amp;{CSS3}</a>

12.平移，鼠标放上面使元素平移

<div id="ad3">
     <h1>Put your <span>Dukes</span>     up sire</h1>
</div>

#ad3 h1:hover span{
    color: #484848;
    -webkit-transform: translateX(40px);
    -moz-transform:translateX(40px);
    -ms-transform: translateX(40px);
    -o-transform:translateX(40px);
    transform:translateX(40px);
}
#ad3 h1 span{
    font-size: 30px;
    color:#999999;
    display: inline-block;
}