橫豎屏切換

豎屏不限定寬高、間距，保證橫屏看著正常。

• 寬：快速查看整個頁面，不會因?qū)挾瘸^屏幕范圍而可以左右拖動。

  頁面不會因頁面超出屏幕范圍而左右拖動。不會因圖片限制寬度而有空白區(qū)域。（使用合理的圖片對齊方式）

• 高：模塊不會因為限定的高度而又內(nèi)容超出模塊范圍。

• 間距：頁面中沒有太多因屏幕變寬而增加的無效空白區(qū)域 。

• 浮動：不能出現(xiàn)因浮動導致的錯版。

網(wǎng)站主題色

• 網(wǎng)站采用單色系配色，部分區(qū)域可根據(jù)pc站采用多色。

• 標題左側(cè)和列表單條信息左側(cè)，可用圓形點、方形點，其顏色與pc站上的設(shè)計保持一致。

• 不同內(nèi)容顏色要有區(qū)分度。如標題、內(nèi)容、時間、作者等

標題使用黑色(#000, #333)，內(nèi)容、時間采用灰色(#666, #999)，作者使用鏈接色(#00f)。

對齊方式

• 按模塊規(guī)律使用統(tǒng)一對齊方式，類似功能模塊的

• 橫豎屏切換，按鈕、圖片使用一致的對齊方式。

• 列表模塊一般居左，視情況在其右側(cè)添加“more”鏈接，標題和more鏈接分別使用有對比的顏色。

列表模塊下方more鏈接，一般居中。

• 垂直居中基于表格布局實現(xiàn)。

間距

• 各模塊間使用統(tǒng)一的間距，可采用10px、20px，達到視覺上的基本統(tǒng)一。

有時候line-height會產(chǎn)生一定的間距，如3px，應(yīng)該在模塊間中減掉。

• 頁面采用統(tǒng)一的左右間距，可采用5px、10px，不推薦使用8px(計算麻煩)。（圖片輪播、標題欄等視情況可頂頭）。

• 圖片列表采用5px~10px，將圖片和文字隔開，并將圖片和文字的上下側(cè)對齊。

間隔線

• 重復性或類似內(nèi)容中間區(qū)分度不高的使用間隔線條進行區(qū)分。常見形式：新聞列表、圖片混排列表

• 列表間隔線常用灰色，標題下側(cè)間隔下可用灰色或網(wǎng)站主題（多為青藍色）

清除浮動

• 使用浮動進行布局的時候，務(wù)必要清除浮動，不能用設(shè)置高度來代替。

• 使用overflow:hidden清除浮動時，在安卓、蘋果手機上檢查保證沒有被遮住的情況。

• 浮動換行，使用float做左邊固定右邊自適應(yīng)的效果時，保證在UC、QQ瀏覽器上不出現(xiàn)換行的情況。

列表畫廊

• 新聞標題、圖片畫廊多余6個的，都可以考慮隱藏。

• 列表類豎屏1列，橫屏可適當顯示2列

• 畫廊類豎屏2列，橫屏可適當顯示3~4列

文字截取

• 列表單條一般做單行截取，可根據(jù)pc站的顯示效果不做截取。

列表單條中鏈接與時間混排的，保證在UC、QQ瀏覽器上不遮擋、不錯版截取

• 標題描述列表時，標題可采用不截取或單行截取，描述可采用兩行或三行截取。

• 圖文混排時，標題可采用不截取或單行截取，描述可采用兩行或三行截取，要保證圖片下側(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上默認的樣式，如圓角（待確認） }

/* 保證安卓手機和蘋果手機樣式一致 */
.inputtext{

    display: block;  //變成塊元素消除默認的上下外邊距

    width: 100%; //特定的時候用

    height: 30px; //嚴格要求的時候用

    //需要設(shè)置  `邊距、邊框、背景、圓角、行高`

    padding: 0;

    background: #e1e1e1;

    border-radius: 5px 0 0 5px; //

    border: none;

    line-height: 30px; //與高度保持一致

 }