网页设计过程中一般命名规则
2019独角兽企业重金招聘Python工程师标准>>>
由--学无止境--整理
www.nmgzlt.com/blog
id的命名:
(1)页面结构
容器: container 页头:header 内容:content/container
页面主体:main 页尾:footer 导航:nav
侧栏:sidebar 栏目:column 左右中:left right center
页面外围控制整体布局宽度:wrapper
(2)导航
导航:nav 主导航:mainbav 子导航:subnav
顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu
标题: title 摘要: summary
(3)功能
标志:logo 广告:banner 登陆:login 登录条:loginbar
注册:regsiter 搜索:search 功能区:shop 标题:title
加入:joinus 状态:status 按钮:btn 滚动:scroll
标签页:tab 文章列表:list 提示信息:msg 当前的: current
小技巧:tips 图标: icon 注释:note 指南:guild
服务:service 热点:hot 新闻:news 下载:download
投票:vote 合作伙伴:partner 友情链接:link 版权:copyright
(四)class 的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2) 字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项:()
1.一律小写;
2.尽量用英文;
3.统一用中“-”;
4.尽量不缩写,除非一看就明白的单词.
主要的master.css 模块 module.css 基本共用 base.css
主 题 themes.css 专栏 columns.css 打印 print.css
文 字 font.css 表单 forms.css 补丁 mend.css
布局,版面 layout.css
CSS命名规则
头:header 尾:footer 导航:nav
内容:content/containe侧栏:sidebar 栏目:column
页面外围控制整体布局宽度:wrapper 左右中:left right center
登录条:loginbar 标志:logo 广告:banner
页面主体:main 热点:hot 新闻:news
下载:download 子导航:subnav 菜单:menu
子菜单:submenu 搜索:search 友情链接:friendlink页脚:footer 版权:copyright 滚动:scroll
内容:content 标签页:tab 文章列表:list
提示信息:msg 小技巧:tips 栏目标题:title
加入:joinus 指南:guild 服务:service
注册:regsiter 状态:status 投票:vote
合作伙伴:partner
XHTML文件中id的命名
(1)页面结构
容器: container 页头:header 内容:content/container
页面主体:main 页尾:footer 侧栏:sidebar
栏目:column 页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav 主导航:mainbav 子导航:subnav
顶导航:topnav 边导航:sidebar 左导航:leftsidebar
右导航:rightsidebar菜单:menu 子菜单:submenu
标题: title 摘要: summary
(3)功能
标志:logo 广告:banner 登陆:login
登录条:loginbar 注册:regsiter 搜索:search
功能区:shop 标题:title 加入:joinus
状态:status 按钮:btn 滚动:scroll
标签页:tab 文章列表:list 提示信息:msg
当前的: current 小技巧:tips 图标: icon
注释:note 指南:guild 服务:service
热点:hot 新闻:news 下载:download
投票:votet 合作伙伴:partner 友情链接:link
版权:copyright
做网页时,常会因为不会命名和命名重复而造成好多不不必要的麻烦,正确的命名的确很重要,我这里也收集了一些命名规则,发上来大家共享下。
.CSS ID 的命名
外 套:wrap 主导航:mainnav 子导航:subnav 页 脚:footet 整个页面:content 页 眉:header 页 脚:footer 商 标:label 标 题:title
主导航:nav(mainnav/globalnav) 顶导航:topnav
边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar当前位置:loc 旗 志:logo 标 语:banner菜单内容1: menu1 content 菜单容量:menu container
子菜单:submenu 边导航图标:sidebarIcon 许可证:licence
注释:note 面包屑:breadcrumb(即页面所处位置导航提示)
容器:container 内容:content 搜索:search
登陆:Login 功能区:shop(如购物车,收银台)当前的current
网站公用相关
Container div #container 容器
Header or banner div #header 页头部分
Main or global navigation div #main-nav 主导航
Menu #menu 菜单
Sub Menu #submenu 子菜单
Left or right side columns #sidebar-a, #sidebar-b 左边栏或右边栏
Main div #main 页面主体
Content div #content 内容部分
The main content area #content-main 主要内容区域
Footer div #footer 页脚部分
Tag #tag 标签
Message #msg #message 提示信息
Tips #tips 小技巧
Vote #vote 投票
Friend Link #friendlink 友情连接
Title #title 标题
Summary #summary 摘要
Sub-navigation list #sub-nav 二级导航
Search input #search-input 搜索输入框
Search output #search-output 搜索输出和搜索结果相似
Search #search 搜索
Search results #search-results 搜索结果
Copyright information #copyright 版权信息
brand #branding 商标
branding-logo #branding-logo LOGO
Site information #siteinfo 网站信息
Copyright information etc. #siteinfo-legal 法律声明
Designer or other credits #siteinfo-credits 信誉
Join us #joinus 加入我们
Partnership opportunities #partner 合作伙伴
Services #service 服务
Regsiter #regsiter 注册
Status #status 状态
电子贸易相关
Products .products 产品
Products prices .products-prices 产品价格
Products description .products-description 产品描述
Products review .products-review 产品评论
Editor's review .editor-review 编辑评论
New release .news-release 最新产品
Publisher .publisher 生产商
Screen shot .screenshot 缩略图
FAQ .faqs 常见问题
Keyword .keyword 关键词
Blog .blog 博客
Forum .forum 论坛
2.另外在编辑样式表时可用的注释可这样写:
<-- Footer -->
内容区
<-- End Footer -->
转载于:https://my.oschina.net/parchments/blog/836705
网页设计过程中一般命名规则相关推荐
- 界面设计过程中的常用字体规范
好长时间没发帖,净想过年了,过年哈,倒腾工作总结和年货是大事. 这几天有人问我说:"最近看了好多教程,都老高大上了,但是老弟我做不到呀,想学点直接能拿来用的,这个要求过分吗--" ...
- 网页设计排版中哪些元素最重要?
有一些网页设计新手会认为,在设计网页的时候最重要的应该是如何添加一些具有吸引力的内容,所以他们只把大量的精力放在内容的设计上.在我看来,内容质量的好坏确实是能够决定你浏览量多少的关键因素,但事实上,页 ...
- 网页设计排版中哪些元素比较重要?
有一些网页设计新手会认为,在设计网页的时候重要的应该是如何添加一些具有吸引力的内容,所以他们只把大量的精力放在内容的设计上.在合肥学码思小编看来,内容质量的好坏确实是能够决定你浏览量多少的关键因素,但 ...
- 产品设计过程中,如何理解用户任务
我们做产品时有时候会陷入一个困境,我们以为用户需要的是功能,从功能入手设计感觉就像是雾里看花,不知道什么样的东西是用户想要的. 本文分享一种站在用户角度去思考"用户任务"的方法,希 ...
- 网页设计流程中常见问题分析及建议
从和客户沟通了解客户需求到画出草图进行构思和创意,直至打开Photoshop完成整个的设计,每一个网页设计师都在每一个新的设计项目中不断重复这个过程.整个看上去规范而流程化的工作方式似乎按部就班就能够 ...
- SAS中变量命名规则
一般SAS中变量命名规则:下划线跟英文字母开头,英文字母.数字.下划线组成,且总长度不超过32个英文字符长度. 那么可以使用中文作为变量名么?答案是肯定的. SAS中有个专门的系统选项用来设置(大小写 ...
- Gnuradio中的命名规则和数据类型
一.GNU Radio中的命名规则 1.标识符中的所有单词都用下划线分隔,例如gr_vector_int 2. GNU Radio包中的所有类型都以gr为前缀,例如gr_float 3.所有类变量都以 ...
- 网页制作过程中隐藏的文件后缀名怎么显现?
1.在win7里面,首先打开"我的电脑"(计算机) 2.然后打开左上角的"组织" 3.接着就出现了一个下拉菜单,点击"文件夹和搜索选项" 4 ...
- 计算机在现代设计技术中应用,现代设计过程中应用计算机艺术的研究
计算机已经深深的影响着我们生活的方方面面,当然也包括艺术领域.计算机艺术是数字化时代新兴的艺术形式.计算机对艺术的影响不仅表现在它能更有效率地创作,也给艺术与设计带来了新的风格和形式,丰富了艺术的表现 ...
最新文章
- 软件测试之功能测试详细过程
- 阿里云 redis 公网连接
- VTK:绘图之CompareRandomGeneratorsCxx
- php多进程有什么用,有关php多进程的用法举例
- How AET fields are retrieved from backend
- 类型的值怎么用es查询_腾讯游戏信用分怎么查询在哪看 有什么用怎么提升介绍...
- webrtc 判断是否支持_5G时代-WebRTC音视频高级开发
- 低压抽屉柜常见故障处理方法_传真机常见故障如何处理 传真机常见故障处理方法【详解】...
- matlab 数组范围内,MATLAB索引超出数组范围
- 阿里内部平台VS火山引擎后端开发,拿头比?
- c++ 编程规范技巧
- 【珍藏级】商业杂志图表的经典用色
- 中望CAD工具栏消失不见的解决方案
- CentOS 5.5安装 bluefish
- 综述(十)北京在安全测试示范区上的政策与成果数据分析
- 自然语言处理是什么,我们为什么需要处理自然语言?
- FAF世链区块链大会|赤兔云算CTO 杨钧淏:共建区块链生态,创造新财富时代
- 实用技巧 雷电模拟器导出apk
- PVE7更新AQC107网卡驱动,解决奇葩问题。
- HadoopSpark
热门文章
- python读csv-python读写csv文件
- python软件是免费的吗-python软件都是免费的吗
- conda创建虚拟环境 和 用conda创建GPU的cuda、cudnn使用环境
- 微信小程序浮动按钮_操作按钮悬浮固定在微信小程序底部的实现代码
- UVa1491 - Compress the String(dfs)
- MS12-042 用户态调度机制特权提升漏洞
- WSO2 API Manager安装部署配置
- HTML5之Canvas基础
- 基于Vue的WebApp项目开发(四)
- 排球计分程序(八)——验证编辑方法(Edit method)和编辑视图(Edit view)