橫豎屏切換
豎屏不限定寬高、間距，保證橫屏看著正常。
-
寬：快速查看整個頁面，不會因?qū)挾瘸^屏幕范圍而可以左右拖動。
頁面不會因頁面超出屏幕范圍而左右拖動。不會因圖片限制寬度而有空白區(qū)域。（使用合理的圖片對齊方式） -
高：模塊不會因為限定的高度而又內(nèi)容超出模塊范圍。
-
間距：頁面中沒有太多因屏幕變寬而增加的無效空白區(qū)域 。
-
浮動：不能出現(xiàn)因浮動導(dǎo)致的錯版。
網(wǎng)站主題色
-
網(wǎng)站采用單色系配色，部分區(qū)域可根據(jù)pc站采用多色。
-
標(biāo)題左側(cè)和列表單條信息左側(cè)，可用圓形點、方形點，其顏色與pc站上的設(shè)計保持一致。
-
不同內(nèi)容顏色要有區(qū)分度。如標(biāo)題、內(nèi)容、時間、作者等
標(biāo)題使用黑色(#000, #333)，內(nèi)容、時間采用灰色(#666, #999)，作者使用鏈接色(#00f)。
對齊方式
-
按模塊規(guī)律使用統(tǒng)一對齊方式，類似功能模塊的
-
橫豎屏切換，按鈕、圖片使用一致的對齊方式。
-
列表模塊一般居左，視情況在其右側(cè)添加“more”鏈接，標(biāo)題和more鏈接分別使用有對比的顏色。
列表模塊下方more鏈接，一般居中。
- 垂直居中基于表格布局實現(xiàn)。
間距
- 各模塊間使用統(tǒng)一的間距，可采用10px、20px，達到視覺上的基本統(tǒng)一。
有時候line-height會產(chǎn)生一定的間距，如3px，應(yīng)該在模塊間中減掉。
-
頁面采用統(tǒng)一的左右間距，可采用5px、10px，不推薦使用8px(計算麻煩)。（圖片輪播、標(biāo)題欄等視情況可頂頭）。
-
圖片列表采用5px~10px，將圖片和文字隔開，并將圖片和文字的上下側(cè)對齊。
間隔線
-
重復(fù)性或類似內(nèi)容中間區(qū)分度不高的使用間隔線條進行區(qū)分。常見形式：新聞列表、圖片混排列表
-
列表間隔線常用灰色，標(biāo)題下側(cè)間隔下可用灰色或網(wǎng)站主題（多為青藍色）
清除浮動
-
使用浮動進行布局的時候，務(wù)必要清除浮動，不能用設(shè)置高度來代替。
-
使用overflow:hidden清除浮動時，在安卓、蘋果手機上檢查保證沒有被遮住的情況。
-
浮動換行，使用float做左邊固定右邊自適應(yīng)的效果時，保證在UC、QQ瀏覽器上不出現(xiàn)換行的情況。
列表畫廊
-
新聞標(biāo)題、圖片畫廊多余6個的，都可以考慮隱藏。
-
列表類豎屏1列，橫屏可適當(dāng)顯示2列
-
畫廊類豎屏2列，橫屏可適當(dāng)顯示3~4列
文字截取
- 列表單條一般做單行截取，可根據(jù)pc站的顯示效果不做截取。
列表單條中鏈接與時間混排的，保證在UC、QQ瀏覽器上不遮擋、不錯版截取
-
標(biāo)題描述列表時，標(biāo)題可采用不截取或單行截取，描述可采用兩行或三行截取。
-
圖文混排時，標(biāo)題可采用不截取或單行截取，描述可采用兩行或三行截取，要保證圖片下側(cè)與描述下側(cè)對齊。保證在UC、QQ瀏覽器上不出現(xiàn)遮擋的情況。
js交互
-
確保js交互方式正常。
-
確保可點擊范圍，保證32~44px的點擊范圍。
-
刪除百度分享、“Bshare”等第三方模塊。
表單區(qū)域
-
搜索區(qū)域內(nèi)的輸入框和搜索按鈕需占滿整個屏幕，即橫豎屏切換時顯示效果一致。
-
布局類的表單樣式在蘋果、安卓手機顯示效果要一致。
-
搜索文本框需要有明顯的文字提示，不出現(xiàn)大的空白。
-
注冊登錄區(qū)域的表單，需要有l(wèi)abel性質(zhì)的文字，若沒有，就需要在文本輸入框中加上placeholder的提示性文字。
彈出窗口
采用左右對齊、對齊的方式，
可用固定寬度，如300px；可用不固定寬，一般距離屏幕左右兩側(cè)10px、15px
在手機上保證進行文字輸入，彈出窗口不受影響。
頁碼
可點擊區(qū)域，間距
大項目可單獨制作 上一頁 1 / 32 下一頁 經(jīng)典的頁面控件
邊框
input { outline: none; //清除input外邊框 -webkit-appearance: none; // 清除iPhone上默認(rèn)的樣式，如圓角（待確認(rèn)） }
/* 保證安卓手機和蘋果手機樣式一致 */
.inputtext{
display: block; //變成塊元素消除默認(rèn)的上下外邊距
width: 100%; //特定的時候用
height: 30px; //嚴(yán)格要求的時候用
//需要設(shè)置 `邊距、邊框、背景、圓角、行高`
padding: 0;
background: #e1e1e1;
border-radius: 5px 0 0 5px; //
border: none;
line-height: 30px; //與高度保持一致
}
