CSS HTML 命名规则（转发）

CSS命名规则

 

　　头：header

　　内容：content/containe

　　尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：column

　　页面外围控制整体布局宽度：wrapper

　　左右中：left right center

　　登录条：loginbar

　　标志：logo

　　广告：banner

　　页面主体：main

　　热点：hot

　　新闻：news

　　下载：download

　　子导航：subnav

　　菜单：menu

　　子菜单：submenu

　　搜索：search

　　友情链接：friendlink

　　页脚：footer

　　版权：copyright

　　滚动：scroll

　　标签页：tab

　　文章列表：list

　　提示信息：msg

　　小技巧：tips

　　栏目标题：title

　　加入：joinus

　　指南：guild

　　服务：service

　　注册：regsiter

　　状态：status

　　投票：vote

　　合作伙伴：partner

 

XHTML文件中id的命名

(1)页面结构

　　容器: container

　　页头：header

　　内容：content/container

　　页面主体：main

　　页尾：footer

　　导航：nav

　　侧栏：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

　　投票：vote

　　合作伙伴：partner

　　友情链接：link

　　版权：copyright

 

1.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

注释：　　　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 -->

3.样式文件命名

主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

 

如<area shape="rect" coords="703,3,750,26" href="#top"> 

HTML <area> 标签

 

定义和用法

 

定义图像地图中的某个区域。

 

HTML与XHTML之前的差异

 

在HTML中，<area>没有结束标签。

 

在XHTML中，<area>必须被正确地关闭。

 

提示和注释：

 

此元素永远被嵌套在<map>标签内部。

 

注释：<img>中的usemap属性可引用<map>中的id或name属性（由浏览器决定），所以我们需要同时向<map>添加id和name两个属性。

 

必需的属性

 

DTD指示此属性允许在哪种DTD中使用。S=Strict, T=Transitional, and F=Frameset. 属性 值 描述 DTD 

alt text 定义此区域的替换文本 STF 

 

 

可选的属性

 

属性 值 描述 DTD 

coords 如果shape="rect" 那么 coords="left,top,right,bottom" 

如果shape="circ" 那么 coords="centerx,centery,radius" 

如果shape="poly" 那么 coords="x1,y1,x2,y2,..,xn,yn" 

 Specifies the coordinates for the clickable area STF 

href URL 定义此区域的目标URL STF 

nohref true 

false 

 从图像地图排除某个区域 STF 

shape rect 

rectangle 

circ 

circle 

poly 

polygon 

 定义区域的形状 STF 

target  _blank 

_parent 

_self 

_top 

 

在何处打开目标URL. 

 

_blank - 目标URL会在新窗口打开 

_self - 当其被点击时，目标URL会在同一框架中打开 

_parent - 目标URL会在父框架中打开 

_top - 目标URL会在整个的窗口中打开 

 TF 

 

 

标准属性

 

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

 

如需完整的描述，请访问标准属性。

 

事件属性

 

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur 

 

如需完整的描述，请访问事件属性。

 

 

创建图像地图 

本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。 

 

我按照他上面的意思：如果shape="rect" 那么 coords="left,top,right,bottom" 就一位是距离她所在位置的左上右下四边的距离，结果试了半天也没搞出来，最后还是给弄明白了，他所指的这四个距离，比如左右两边，他是以一边为基准的，就好比我们有个大区域，而我们要在这个大区域里用到AREA，那么他要表示的左右两边距离是以大区域的左边为基准的，小区域的左边距大区域的左边距离有多少，就表示left，小区域的右边距大区域的左边距离有多少，就表示right，那么上下呢，就是以大区域的上边为基准，小区域的上边距大区域的上边距离有多少，就表示top，小区域的下边距大区域的上边距离有多少，就表示bottom。

 

 

 转发自 http://wenku.baidu.com/view/b3af252558fb770bf78a55e7.html?re=view