手機頁面樣式小問題收集

標籤：style   blog   color   strong   ar   問題   div   line   

1. 偽類  :after

　　1. 清楚浮動

div:after{ overflow:hidden; }  

　　2. 製作三角形

div:after{ content:‘‘; display:block; width:0; border-top:8px solid #000; border-left:8px solid transparent; border-right:8px solid transparent; }

 

2. 設定表單標籤placeholder屬性的樣式

input[type="text"]::-webkit-input-placeholder{ color:red ; font-size:12px;}

 

3. css3防止動畫中網頁抖動

div{ -webkit-backface-visibility:hidden; }

 

4. 點擊狀態時無邊框，-webkit-tap-highlight-color 對<a>有效果，可以設定點擊時的背景顏色

a{ outline:0; -webkit-tap-highlight-color:rgba(0,0,0,0); }

 

5. 讓圖片在div中上下置中顯示

div{ display:table-cell; vertical-align:middle; width: 300px; height: 300px; text-align: center;}div img{ width: 100px; vertical-align: top;}

 

6. css3盒模型（可以用於手機頁面上的菜單）

/*父元素*/div{ display:-webkit-box;  -webkit-box-orient:vertical;  /*表示盒子項目在一條垂直線上從上到下編排它的子項目,不加這個屬性工作表示預設橫著排*/}/*子項目*/.m1,.m2{display:-webkit-box; -webkit-box-flex:1;   /*占的比例*/ -webkit-box-pack:center;   /*內容左右置中*/-webkit-box-align:center;   /*內容上下置中*/}