我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法。
命名规则说明:
1)、所有的命名最好都小写
2)、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
3)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
4)、空元素要有结束的tag或于开始的tag后加上"/"
5)、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
6)、定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
7)、给每一个表格和表单加上一个唯一的、结构标记id
8)、给图片加上alt标签
9)、尽量使用英文命名原则
10)、尽量不缩写,除非一看就明白的单词
相对网页外层重要部分CSS样式命名:
外套wrap------------------用于最外层头部header----------------用于头部主要内容main------------用于主体内容(中部)左侧main-left-------------左侧布局右侧main-right-----------右侧布局导航条nav-----------------网页菜单导航条内容content---------------用于网页中部主体底部footer-----------------用于底部
DIV+CSS命名参考表:
以下为CSS样式命名与CSS文件命名参考表,DIV CSS命名集合:
网页公共命名
#wrapper
页面外围控制整体布局宽度
#container或#content
容器,用于最外层
#layout
布局
#head,#header
页头部分
#foot,#footer
页脚部分
#nav
主导航
#subnav
二级导航
#menu
菜单
#submenu
子菜单
#sideBar
侧栏
#sidebar_a,#sidebar_b
左边栏或右边栏
#main
页面主体
#tag
标签
#msg#message
提示信息
#tips
小技巧
#vote
投票
#friendlink
友情连接
#title
标题
#summary
摘要
#loginbar
登录条
#searchInput
搜索输入框
#hot
热门热点
#search
搜索
#search_output
搜索输出和搜索结果相似
#searchBar
搜索条
#search_results
搜索结果
#copyright
版权信息
#branding
商标
#logo
网站LOGO标志
#siteinfo
网站信息
#siteinfoLegal
法律声明
#siteinfoCredits
信誉
#joinus
加入我们
#partner
合作伙伴