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