规范.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	论坛

 

---