在搜索引擎优化中,对于代码的优化是一个非常重要的部分。 如果一个网页的代码非常的简捷,对于提升网站的排名那个是非常有好处的。 同样, 在CSS样式表中,合理有序的命名同样可以为整个CSS工作带来意想不到的简便。 为了更加符合搜索引擎的规范, 下面是一些常用的CSS代码命名标准。 这些标准虽然不是一个必须遵守的规范,但是,却被大多数SEOer所接受,并为整个网站的更新工作带来方便。

页头:header (CSS中通常写为: #header)
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendLink
页脚:footer
版权:copyRight

CSS中 ID 的命名规范
外 套:  wrap
主导航:  mainNav
子导航:  subnav
页 脚:  footer
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainNav(globalNav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsideBar
右导航:  rightsideBar
旗 志:  logo
标 语:  banner
菜单内容1: menu1Content
菜单容量: menuContainer
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadCrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   login
功能区:  shop(如购物车,收银台)
当前的   current

公司介绍 about

产品介绍 product

新闻中心 news

联系我们 contact

新闻中心 article

为了更加有效的使用CSS样式表, 大型的网站通常有许多个不同的样式表,按照不同的分类来调用不同的CSS样式表。这些样式表的命名也需要严格的规范。 严格的CSS文件名命名规则,同样可以为工作带来更多的便利。下面是一些常用的CSS文件名命名规则。

主要的 master.css
布局,版面 layout.css

专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

当然, 在实际的使用中, 网页制作人员经常会根据自己的喜好和习惯来命名CSS样式名称,和CSS文件的名称。 这样无形中会增加团队中沟通所需要的时间。 尤其是合作人员对于CSS样式不是很精通的时候,所花费的时间势必更多。 所以,如何制定一套扩展性较好的,严格的CSS命名规范在整个互联网行业内都是有必要继续研究的。

转载于:https://www.cnblogs.com/mr0513/p/3317433.html

SEO中的DIV CSS样式的命名规则相关推荐

  1. DIV+CSS样式表命名的规则方法

    DIV+CSS样式表命名不能随意而为,否则以后进行维护时困难很大.如同软件开发中对类名的仔细处理一样,DIV+CSS样式表命名也需要遵循规则. 如果要是就几行或几十行代码吧!就根据英文单词就行了.可是 ...

  2. html直线箭头,HTML中利用div+CSS实现简单的箭头图标的代码

    在网页设计中,我们经常得会用到一些箭头做为装饰来点缀我们的网页,虽然现在很多的网站的设计者们都喜欢以引用字体图标的形式来实现箭头的效果,但那样也会给网页的加载造成一些影响.今天飞鸟慕鱼小编就给大家说一 ...

  3. php控制 css样式,div css样式控制案例

    摘要:html> div -css样式控制案例 #box{width:100px; height: 100px; html> div -css样式控制案例 #box{width:100px ...

  4. html 中箭头的代码,HTML中利用div+CSS实现简单的箭头图标的代码

    /*箭头向上*/ .to_top { width: 0; height: 0; border-bottom: 10px solid #ccc; border-left: 10px solid tran ...

  5. 符合SEO标准的div+css页面参考

    下面的部分是著名设计师阿捷发表的div+css三行两列网页参考,星箭在此基础上做了小小的改动,以前乐思蜀也对阿捷的这个经典布局案例进行过修改,将左右代码互换,达到主体内容显示在前更方便搜索引擎抓取分析 ...

  6. webpack 打包html中css样式如果处理,webpack中单独打包css样式

    这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍 以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...

  7. 史上最全的HTML和CSS标签常用命名规则

    文件夹主要建立以下文件夹: 1.Images 存放一些网站常用的图片: 2.Css 存放一些CSS文件: 3.Flash 存放一些Flash文件: 4.PSD 存放一些PSD源文件: 5.Temp 存 ...

  8. Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定

    在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定 前言 一.表格数据 二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结 前言 大家一定使用过很多UI,UI都 ...

  9. 《Day02》DIV+CSS样式,还不会排版优化自己网页?不是吧!不是吧!一看就会的东西

    一.DIV+CSS简介 (一)DIV+CSS简介 1.DIV:DIV是层叠样式表中的'定位技术'',称DIVision,即为划分.有时可以称其为图层. DIV元素是用来为HTML(标准通用标记语言下的 ...

最新文章

  1. GitLab设置中文
  2. [20171225]查看并行执行计划注意的问题.txt
  3. PDF发明者逝世,曾因学生建议转行计算机,享年81岁
  4. 【转载】程序员技术练级攻略
  5. TRACE (VC)
  6. Flink SQL 功能解密系列 —— 流式 TopN 挑战与实现
  7. 电脑音箱常见故障排查技巧
  8. Angular4.X 介绍
  9. 如何在 Mac 上设置和使用快捷方式?
  10. Veeam backup job(3)
  11. 爬取链家房价信息存储并分析——mongodb存储和聚合查询
  12. #Android Studio# 模拟器开发者模式
  13. 计算机网络基础知识复习笔记
  14. 格林尼治时间与本地时间转换
  15. linux wifi6 笔记本网卡,老旧笔记本电脑也能用WIFI6?无线网卡更换实录
  16. 干货 | SQL 外部联接 Outer Join
  17. 话说无为原理——数据分析漫谈6
  18. 二、如何写好学术/学位论文
  19. ansys workbench中fluent划分网格出现如下错误:The mesh file exporter failed during translation.
  20. GAN ZOO - 第1节: 分析GAN的缺陷与改进方向,介绍典型的改进模型:CGAN、InfoGAN

热门文章

  1. sql plus特殊使用技巧
  2. LeetCode 206. 反转链表(Reverse Linked List) 16
  3. Spring Cloud微服务笔记(一)微服务与云概念
  4. Python分布式爬虫-elasticsearch搭建搜索引擎
  5. jsonp解决跨域问题
  6. js类数组转数组的方法(ArrayLike)
  7. git 代码托管使用方法
  8. Java Web编程的主要组件技术——MVC设计模式
  9. asp.net mvc3.0安装失败之终极解决方案
  10. 计算机语言翻译的情诗,聂鲁达情诗翻译