网页元素文档规范

《网页元素文档规范》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、有帮网文档网站基本元素1、前言【说明】：1、图片仅为举例，不一定其色彩值、高度等与本规则描述一致，一律以文字描述的为准，同时尽量考虑到整体网站的页面，统一设置CSS，能重复使用的尽量一次性整好，所有页面统一调用。2、关于菜单、按钮的权限管理。页面菜单和按钮每一个有一个内部ID，字面文字和ID相对应，其权限设置指向ID，字面文字可在后台进行修改。其操作和存储统一由后台数据库操作，和用户权限相关联，页面上只需设计框架、样式及位置（相对位置），不需要进行详细功能设计。页面上功能性操作分:菜单(menu)、子菜单(submenu)、页面菜单（pageme

2、nu,如“最近更新”）、功能按钮（functionbutton，执行某个功能，如搜索、提问、确定及取消之类等）、操作按钮（执行某个操作，如关注、追问、赞成之类，operationbutton）。2、页面UI基本元素2.1基本要素2.1.1背景背景色：#f6f6f6，后面可又叠加背景图片。2.1.2页面元素页面宽度1000，页面标题行：行高50，文字18。Div之上如有标题，则标题行高为50，一般标题不加底色。DIV（内容元素）页面元素离页眉（上边距）20px，页面内容距左边距至少20px.14/14.前景色：#FFFFFF.高度，不作规定，一般6

3、00px为一屏。边线：#c0c0c0，1px.可设阴影（2个像素）元素内的内容标题距左边距至少20px（如果有标题在页眉和内容元素之间，则不再有边距）.14/1414/1414/1414/141.1.1线条强调型线条：#dae4f2=RGB（218，228，242），线条2PX；普通型线条：灰色#dbdcde，线高1px。1.1.2文字菜单、按钮：微软雅黑，字号16PX；标题：强调：#3e3d3d，微软雅黑，字号14PX；正文文字：宋体，#8a8a8b，14PX。文字色彩：强调：#3e3d3d（如“最近更新”，同时加粗）；次强调：898989（如

4、“我的关注”，同时加粗）；标题或标签：#505050（如“[消息]”）正文：#8a8a8b提示：#a0a0a0（如“8条短消息”）提示性文本，若有链接（如图片中示例），则色彩为29528b，同时加下划线。光标移入按钮时：字色：#0588c0。警示性文本色彩#f86100强调强调提示性提示性次强调，未加粗次强调，加粗1.1.3行距和行高行高：40，行内的元素居中，行内的输入框高3014/1414/14特别说明：不以图片中数字为准，以文字表述为准，本图片仅为举例。1.1.1页面头部（页眉）背景色：f5f5f5，头部高60px,最上边5px留白。LOG

5、O位置：居中，(25，10)。logo按源文件不缩放.分隔线位置：(60,0)，线宽2，色彩值：dbdcde。分隔线自动延伸。头部所有页面都统一。针对不同的页面，加上菜单。当页面内容下拉至页面菜单看不见时，出现如下的页面菜单栏，固定在页面顶部。此时logo变小，第一排右边菜单隐藏。1.1.2菜单(menu)注册引导页面的菜单登录菜单的位置：（760，45左右，距离底边线2PX）。进入个人主页的菜单示意如下：14/1414/14提示性圆点：小圆形，色彩#f86100，提示字体：Arial,字号11号，大于10，则显示为“9+”。一期只显示小圆点。(

6、1).第一行菜单第一行菜单，纵坐标10，靠右对齐（最后一个到页边距20），菜单之间间距15PX.菜单字体黑体，14号，不加粗，#3e3d3d（获得焦点时，#0588c0）子菜单，12号，不加粗，色彩值相同。第一排菜单：设置类菜单，用户头像+用户名、邀请、意见箱菜单字体微软雅黑，16号，加粗，#3e3d3d（光标移入时，#0588c0）子菜单，14号，不加粗，色彩值相同。第一个为个人设置，显示名称为头像（15*15px）+用户名，下拉菜单：设置、退出；我的消息、我的问答、我的活动、我的发布第二个菜单“邀请”；最后一个菜单“意见箱"。(2).第二行菜

7、单第二行菜单，距离底边线2PX，从横坐标550开始。菜单字体黑体，14号，加粗，#3e3d3d（获得焦点时，#0588c0）子菜单，12号，不加粗，色彩值相同。一期，第二行菜单有主页、消息、问答及活动。1.1.2子菜单(submenu)子菜单，在点击菜单时下拉弹出。子菜单，14号，不加粗，#3e3d3d（获得焦点时，#0588c0）1.1.3页面菜单（pagemenu,Pbutton）14/1414/14,如“最近更新”）。页面菜单行基本规定：起始坐标：(20,160),宽600，高40，行底色#f1f5f9，底边线1px,#dbdcde.菜单之

8、间间距10PX.，菜单字体微软雅黑，14号，加粗？，#3e3d3d(被选中时)，#898989（未被选中时），被选中时菜单底色#c3e9