讀書筆記之一些可能會有用的東西

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;
}