DIV+CSS命名规范文档格式.docx
- 文档编号:1477948
- 上传时间:2023-04-30
- 格式:DOCX
- 页数:12
- 大小:102.09KB
DIV+CSS命名规范文档格式.docx
《DIV+CSS命名规范文档格式.docx》由会员分享,可在线阅读,更多相关《DIV+CSS命名规范文档格式.docx(12页珍藏版)》请在冰点文库上搜索。
status按钮:
btn投票:
vote
合作伙伴:
partner友情链接:
friendLink页脚:
footer
版权:
copyRight
常用配合标签div、h1、h2、h3、h4、span、em、b、strong、font、u
1.CSS的ID的命名也许你需要了解class与Id区别
外 套:
wrap主导航:
mainNav子导航:
subnav
页 脚:
footer整个页面:
content页 眉:
header
版权:
copyRight商 标:
label标 题:
title
主导航:
mainNav(globalNav)顶导航:
topnav
边导航:
sidebar左导航:
leftsideBar右导航:
rightsideBar
旗 志:
logo标 语:
banner菜单内容1:
menu1Content
菜单容量:
menuContainer子菜单:
submenu
边导航图标:
sidebarIcon注释:
note
面包屑:
breadCrumb(即页面所处位置导航提示)
容器:
container内容:
content搜索:
登陆:
login功能区:
shop(如购物车,收银台)
当前:
current
DIV+CSS命名小结:
无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。
通常我们最常用主要命名有:
wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
、content(内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。
其它可根据自己需要选择性使用。
DIVCSS5建议:
主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。
css文件命名
1)如果是一个小型网站或一个企业网站,只要一个css文件,一般取名为:
style.css/main.css/layout.css
2)如果是个大型的门户网站,css一般分三个文件区分出来,用的最常用的css和公共部分的css放在common.css;
一些主要的其他css放在content.css;
字体放在font.css
主要的:
master.css
专栏:
columns.css
主题:
themes.css
全局样式:
global.css;
框架布局:
layout.css;
字体样式:
font.css;
链接样式:
link.css;
打印样式:
print.css;
模块module.css
基本共用base.css
表单forms.css
补丁mend.css
CSS命名规则
(1)页面结构
首页:
homepage
二级页面:
subpage
标签页:
tab
博客:
bolg
论坛:
forum/bbs
外套:
wrapper
container/box
内容:
content
页面头部:
header
页面主体:
main
页面中部:
mainBody
页面底部:
footer
侧栏:
sidebar
栏目:
column
左右中:
leftrightcenter
(2)导航
导航:
nav
主导航:
mainnav/globalnav
子导航:
顶导航:
(3)侧栏
侧边栏:
左侧栏:
leftsidebar
右侧栏:
rightsidebar
左右两栏sidebar_l/sidebar_r或者leftsidebar/rightsidebar
左/中/右三栏main_left/main_mid/main_right或者main_l/main_m/mian_r
(4)菜单
菜单:
menu
菜单内容:
menucontent
子菜单:
subMenu
子菜单内容:
subMenuContent
(5)栏目
列定义:
column_1of3(三列中的第一列)
column_2of3(三列中的第二列)
column_3of3(三列中的第三列)
(6)文章
文章列表:
list
标题:
title
时间:
time
日期:
data
摘要:
summary
内容:
(7)登录
登录条:
loginbar
登录:
login
(8)搜索
搜索:
热门搜索:
hotsearch
关键字:
keyword
搜索范围:
range
(9)产品
产品:
products/pro
缩略图:
screenshot
产品价格:
pro_prices
产品描述:
pro_description
产品评论:
pro_review
编辑评论:
editor_review
最新产品:
news_release/newspro
生产商:
publisher
(10)图标
图标:
icon
边导航图标:
sidebarIcon
(11)标签
标签文字:
tagTitle
标签内容:
tagContent
当前标签:
tagCurrent/currentTag
(12)页面底部
partner
友情链接:
friendlink
copyright
(13)功能
网站标志:
logo
广告:
banner
按钮:
button/btn
scroll
提示信息:
message/msg
服务:
service
guid
热点:
news
下载:
download
会员:
member
注册:
状态:
status
忘记密码:
foreget_password
投票:
注释:
note
面包屑:
breadCrumb(即页面所处位置导航提示)
功能区:
shop(如购物车,收银台)
当前的:
当前位置:
currentPath
小技巧:
tips
网站信息:
siteinfo
网站地图:
sitemap
加入我们:
关于我们:
aboutus
联系我们:
contantus
网站帮助:
sitehelp
常见问题:
faq
法律声明:
siteinfolegal
信誉:
siteinfocredits
箭头:
arrow/arr
工具条:
toolbar/tool
放大:
zoom
关于语义化的一些建议:
在开始之前,我想推荐两种简单的编写较好的CSS代码的指导方针:
为CSS类名定义的时候,尽量使用小写字母,如果有两个以上的单词,在每个单词之间使用”-”符或单词首字母大写(第一个单词除外)。
如:
”main-content”或”mainContent”。
优化CSS代码,仅创建关键主要的CSS类并重新为子元素使用符合HTML标准的标签(h1,h2,p,ul,li,blockquote,…),例如,不要使用这种哦你那个方式:
<
divclass=”main”>
divclass=”main-title”>
…<
/div>
divclass=”main-paragraph”>
而要这样写:
divclass=“main”>
h1>
/h1>
p>
/p>
WebUI设计命名规范
1.Container
“container“就是将页面中的所有元素包在一起的部分,这部分还可以命名为:
“wrapper“,“wrap“,
“page“.
2.Header
“header”是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。
这部分还可以命名为:
“page-header”(或pageHeader).
3.Navbar
“navbar“等同于横向的导航栏,是最典型的网页元素。
“nav”,“navigation”,
“nav-wrapper”.
4.Menu
“Menu”区域包含一般的链接和菜单,这部分还可以命名为:
“subNav“,“links“,“sidebar-main”.
5.Main
“Main”是网站的主要区域,如果是博客的话它将包含的日志。
“content“,“main-
content”(或“mainContent”)。
6.Sidebar
“Sidebar”部分可以包含网站的次要内容,比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还
可以命名为:
“subNav“,“side-panel“,“secondary-content“.
7.Footer
“Footer”包含网站的一些附加信息,这部分还可以命名为:
“copyright“.
二.需要注意的几点:
1.尽量考虑为元素命名其本身的作用或”用意”,达到语义化。
不要使用表面形式的命名.
red/left/big等。
2.组合命名规则:
[元素类型]-[元素作用/内容]
搜索按钮:
btn-search
登录表单:
form-login
新闻列表:
list-news
3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:
鼠标悬停:
:
hover点击:
click已浏览:
visited
btn-search、btn-search-hover、btn-search-visited
图层命名结构
四.常用命名汇总:
页头:
标志:
侧栏:
广告条:
banner
子导航:
菜单:
子菜单:
下拉菜单:
dropMenu
toolbar
表单:
form
栏目:
arrow
搜索:
btn-search
滚动条:
内容:
标签页:
文章列表:
小技巧:
栏目标题:
链接:
links
页脚:
服务:
热点:
新闻:
下载:
按钮:
btn
投票:
vote
合作伙伴:
版权:
sitemap
Photoshop图层结构规范:
Photoshop图层命名遵循树形结构,凡某元素组成的图层大于3层,即可形成组,所有图层尽量避免使用默认命名(图层+编号)。
第一级图层结构如下图:
第二级结构图例(医院网站):
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DIV CSS 命名 规范