页头: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命名给你以后网站网页的维护带来方便。

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

  1. 普通企业的规划类项目中,OptaPlanner更适合作为APS的规划优化引擎

    在企业的规划.优化场景中,均需要开发规划类的项目,实现从从种可能方案中找出相对最优方案.如排班.生产计划(包括高层次的供应链优化,到细粒度的车间甚至机台作业指令).车辆调度等.因为这类场景需要解决的问 ...

  2. 学习网页制作中如何在正确选取和使用 CSS 单位

    在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...

  3. 《SEO在网页制作中的应用》视频笔记

    学习了慕课网<SEO在网页制作中的应用>视频,今天将里面的知识整理一下. 一.SEO介绍 1.  搜索引擎工作原理 搜索引擎现在主流有百度.谷歌.360,他们都有庞大的搜索引擎数据库,每个 ...

  4. web网页前端制作中的SEO方法

    在SEO盛行的今天到处都在谈优化,对于网站前端制作人员来说,有几点是跟SEO相关 的,也就是SEO站内优化中的一部分,下面总结几点: 1.title,.页面的标题,不用多说,这个必须有! 2.keyw ...

  5. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

  6. 网页设计中11 款最好CSS框架

    网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计.网页编码一定要合适.精确,才能保证不发生 ...

  7. 四、优化及调试--网站优化--SEO在网页制作中的应用

    SEO分类:白帽SEO.黑帽SEO 白帽SEO: 内容上的SEO: 网站标题.关键字.描述 网站内容优化 Robot.txt文件 网站地图 增加外链引用 前端SEO: 网站结构布局优化 扁平化结构(一 ...

  8. 在网页布局中合理使用inline formating context(IFC)

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  9. A4纸网页打印中对应像素的设定和换算

    最近开发项目时遇到了网页打印的问题,这是问题之二,打印宽度设置 在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot PerInch)指标.  经过我仔细的测试,发现了网页打印中,默认采用 ...

随机推荐

  1. Openlayers离线载入天地图

    概述: 经过一个春节的休整,今天最终開始了! 任何时候.都不要忘记学习.学习是一辈子的事情!今天,我来说说怎样实现天地图的离线以及Openlayers载入离线数据实现天地图数据的展示. 实现: 1.获 ...

  2. halcon模板匹配

    在机器视觉应用中,经常需要对图像进行仿射变换.1.在基于参考的视觉检测中,由于待检图像与参考图像或多或少都会存在几何变化(平移.旋转.缩放等),所以在做比较之前一般都要对待检图像进行仿射变换以对齐图像 ...

  3. Why you should use async tasks in .NET 4.5 and Entity Framework 6

    Improve response times and handle more users with parallel processing Building a web application usi ...

  4. 关于Unity的两种调试方法

    Unity的两种调试方法 1.Debug.Log()输出语句调试,平时经常用这个 2.把MonoDevelop和Unity进行连接后断点调试 先把编辑器选择为MonoDevelop,Edit----& ...

  5. JVM学习(3)——总结Java内存模型---转载自http://www.cnblogs.com/kubixuesheng/p/5202556.html

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及到的知识点总结如下: 为什么学习Java的内存模式 缓存一致性问题 什么是内存模型 JMM(Java Memory Model)简 ...

  6. “failed to excute script xxx” PyInstaller 打包python程序为exe文件过程错误

    在使用PyInstaller打包python程序,打包命令为: pyinstaller -F -w -i manage.ico yourpyfile.py 顺便说一下几个参数的作用 -F:是直接生成单 ...

  7. 追踪go语言(golang)的新版本新特性【摘抄】

    Go 2.0 新特性展望:详细 go2.0 会有什么新特性呢?下图是一个老外的调侃,他不希望发生这样的事情(please don't make it happen).我倒是希望其中一些实现,比如泛型和 ...

  8. VS2017 配置freeglut3.0.0

    配置freeglut: 1. 先下载cmake和freeglut3.0.0文件,并使用cmake编译freeglut,再使用vs2017生成解决方案,详细步骤见https://blog.csdn.ne ...

  9. 【Spring】Spring中用到的设计模式

    1.简单工厂 又叫静态工厂方法模式,不属于23种设计模式之一. 简单工厂模式的实质是由一个工厂类根据传入的参数,动态决定应该创建哪一个产品类. Spring中的BeanFactory就是简单工厂模式的 ...

  10. [原]Jenkins(十一)---jenkins使用管理员admin创建用户和分配权限

    /** * lihaibo * 文章内容都是根据自己工作情况实践得出. * 版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/533 ...