横竖屏切换

竖屏不限定宽高、间距，保证横屏看着正常。

• 宽：快速查看整个页面，不会因宽度超过屏幕范围而可以左右拖动。

  1. 页面不会因页面超出屏幕范围而左右拖动。

  2. 不会因图片限制宽度而有空白区域。（使用合理的图片对齐方式）

• 高：模块不会因为限定的高度而又内容超出模块范围。

• 间距：页面中没有太多因屏幕变宽而增加的无效空白区域 。

• 浮动：不能出现因浮动导致的错版。

网站主题色

• 网站采用单色系配色，部分区域可根据pc站采用多色。

• 标题左侧和列表单条信息左侧，可用圆形点、方形点，其颜色与pc站上的设计保持一致。

• 不同内容颜色要有区分度。如标题、内容、时间、作者等

标题使用黑色(#000, #333)，内容、时间采用灰色(#666, #999)，作者使用链接色(#00f)。

对齐方式

• 按模块规律使用统一对齐方式，类似功能模块的

• 横竖屏切换，按钮、图片使用一致的对齐方式。

• 列表模块一般居左，视情况在其右侧添加“more”链接，标题和more链接分别使用有对比的颜色。

列表模块下方more链接，一般居中。

• 垂直居中基于表格布局实现。

间距

• 各模块间使用统一的间距，可采用10px、20px，达到视觉上的基本统一。

有时候line-height会产生一定的间距，如3px，应该在模块间中减掉。

• 页面采用统一的左右间距，可采用5px、10px，不推荐使用8px(计算麻烦)。（图片轮播、标题栏等视情况可顶头）。

• 图片列表采用5px~10px，将图片和文字隔开，并将图片和文字的上下侧对齐。

间隔线

• 重复性或类似内容中间区分度不高的使用间隔线条进行区分。常见形式：新闻列表、图片混排列表

• 列表间隔线常用灰色，标题下侧间隔下可用灰色或网站主题（多为青蓝色）

清除浮动

• 使用浮动进行布局的时候，务必要清除浮动，不能用设置高度来代替。

• 使用overflow:hidden清除浮动时，在安卓、苹果手机上检查保证没有被遮住的情况。

• 浮动换行，使用float做左边固定右边自适应的效果时，保证在UC、QQ浏览器上不出现换行的情况。

列表画廊

• 新闻标题、图片画廊多余6个的，都可以考虑隐藏。

• 列表类竖屏1列，横屏可适当显示2列

• 画廊类竖屏2列，横屏可适当显示3~4列

文字截取

• 列表单条一般做单行截取，可根据pc站的显示效果不做截取。

列表单条中链接与时间混排的，保证在UC、QQ浏览器上不遮挡、不错版截取

• 标题描述列表时，标题可采用不截取或单行截取，描述可采用两行或三行截取。

• 图文混排时，标题可采用不截取或单行截取，描述可采用两行或三行截取，要保证图片下侧与描述下侧对齐。保证在UC、QQ浏览器上不出现遮挡的情况。

js交互

• 确保js交互方式正常。

• 确保可点击范围，保证32~44px的点击范围。

• 删除百度分享、“Bshare”等第三方模块。

表单区域

• 搜索区域内的输入框和搜索按钮需占满整个屏幕，即横竖屏切换时显示效果一致。

• 布局类的表单样式在苹果、安卓手机显示效果要一致。

• 搜索文本框需要有明显的文字提示，不出现大的空白。

• 注册登录区域的表单，需要有label性质的文字，若没有，就需要在文本输入框中加上placeholder的提示性文字。

弹出窗口

采用左右对齐、对齐的方式，

可用固定宽度，如300px；可用不固定宽，一般距离屏幕左右两侧10px、15px

在手机上保证进行文字输入，弹出窗口不受影响。

页码

可点击区域，间距

大项目可单独制作 上一页 1 / 32 下一页 经典的页面控件

边框

input { outline: none; //清除input外边框 -webkit-appearance: none; // 清除iPhone上默认的样式，如圆角（待确认） }

/* 保证安卓手机和苹果手机样式一致 */
.inputtext{

    display: block;  //变成块元素消除默认的上下外边距

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

    height: 30px; //严格要求的时候用

    //需要设置  `边距、边框、背景、圆角、行高`

    padding: 0;

    background: #e1e1e1;

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

    border: none;

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

 }