网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:

页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法

登录条:loginBar           标志:logo                    侧栏:sideBar        广告:banner             

导航:nav                    子导航:subNav         菜单:menu                 子菜单:subMenu      

搜索:search       滚动:scroll                  页面主体:main             内容:content

标签页:tab                  文章列表:list                提示信息:msg              小技巧:tips                

栏目标题:title              加入:joinus          指南:guild                   服务:service             

热点:hot             新闻:news                   下载:download            注册:regsiter

状态: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          

搜索:search       登陆:login             功能区:shop(如购物车,收银台)       当前:current

DIV+CSS命名小结:无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的重要的特殊的最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有:wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1h2h3h4标签使用) 、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。其它可根据自己需要选择性使用。

DIVCSS5建议:主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。

 

2.CSS样式文件命名如下

主要的 master.css 布局,版面 layout.css 专栏 columns.css 文字 font.css 打印样式 print.css 主题 themes.css.

也许你需要了解一下css引用到html方法.

以上为DIV+CSS的命名规则总结,相信通过规范的CSS命名给你以后网站网页的维护带来方便。

posted @ 2016-04-03 21:03  哟风  Views(103)  Comments(0)    收藏  举报