规范.DIV+CSS命名规范

 

DIV+CSS 命名规范

外　套：　　wrap

主导航：　　mainnav

子导航：　　subnav

页　脚：　　footet

整个页面：　content

页　眉：　　header

页　脚：　　footer

商　标：　　label

标　题：　　title

主导航：　　mainbav（globalnav）

顶导航：　　topnav

边导航：　　sidebar

左导航：　　leftsidebar

右导航：　　rightsidebar

旗　志：　　logo

标　语：　　banner

菜单内容1： menu1 content

菜单容量：　menu container

子菜单：　　submenu

边导航图标：sidebarIcon

注释：　　　note

面包屑：　　breadcrumb(即页面所处位置导航提示）

容器：　　　container

内容：　　　content

搜索：　　　search

登陆：　　　Login

功能区：　　shop(如购物车，收银台)

当前的　　　current

 

2.另外在编辑样式表时可用的注释可这样写：

<-- Footer -->

内容区

<-- End Footer -->

 

3.样式文件命名

主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

提交:submit

文本框:textbox

统计:count

 

div：主要用于布局，分割页面的结构

ul/ol：用于无序/有序列表

span：没有特殊的意义，可以用作排版的辅助，例如

Example Source Code [www.YourHomePage.com.cn]

<li><span>(4.23)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>

然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果

 

h1-h6：标题

h1-h6 根据重要性依次递减

h1位最重要的标题

 

label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，例如：

Example Source Code [www.YourHomePage.com.cn]

<label for="user-password">密　码</label>

<input type="password" name="password" id="user-password" />

 

fieldset & legend：fildset套在表单外，legend用于描述表单内容。例如：

Example Source Code [www.YourHomePage.com.cn]

<form>

<fieldset>

<legend>title</legend>

<label for="user-password">密　码</label>

<input type="password" name="password" id="user-password" />

</fieldset>

</form>

 

dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，例如

Example Source Code [www.YourHomePage.com.cn]

<dl>

<dt>什么是CSS?</dt>

<dd>CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。<dd>

<dt>什么是XHTML？</dt>

<dd>XHTML是一个基于XML的置标语言，看起来与HTML有些想像，只有一些小的但重要的区别。可以这样看，XHTML就是一个扮演着类似HTML的角色的XML。本质上说，XHTML是一个桥接（过渡）技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。</dd>

</dl>

Example Source Code [www.YourHomePage.com.cn]

C #content

 

S #subcol

 

M #maincol

 

X #xcol

这是纵向布局的XHTML结构，c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

 

其中在三纵栏的布局需要分为两层第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

 

自定义命名：

根据w3c网站上给出的,最好是用意义命名

比如：是重要的新闻高亮显示（像红色）

有两种

Example Source Code [www.YourHomePage.com.cn]

.red{color:red}

.important-news{color:red}

 

网站公用相关
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	论坛

 

---