DIV+CSS命名规范全记录

  我们开发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命名集合:

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


合作伙伴


#service


服务


#regsiter


注册


arr/arrow


箭头


#guild


指南


#sitemap


网站地图


#list


列表


#homepage


首页


#subpage


二级页面子页面


#tool,#toolbar


工具条


#drop


下拉


#dorpmenu


下拉菜单


#status


状态


#scroll


滚动


.tab


标签页


.left.right.center


居左、中、右


.news


新闻


.download


下载


.banner


广告条(顶部广告条)


电子贸易相关


.products


产品


.products_prices


产品价格


.products_description


产品描述


.products_review


产品评论


.editor_review


编辑评论


.news_release


最新产品


.publisher


生产商


.screenshot


缩略图


.faqs


常见问题


.keyword


关键词


.blog


博客


.forum


论坛

CSS文件命名

说明


master.css,style.css


主要的


module.css


模块


base.css


基本共用


layout.css


布局,版面


themes.css


主题


columns.css


专栏


font.css


文字、字体


forms.css


表单


mend.css


补丁


print.css


打印

时间: 2024-08-22 14:28:42

DIV+CSS命名规范全记录的相关文章

前端DIV+CSS命名规范大全

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明:   -   TOP 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="div

CSS命名规范和CSS书写规范

CSS命名规范 一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/ID命名规范 页 眉:header内 容:content容 器:container页 脚:footer版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu标 志:logo标 语:banner标 题:title侧边栏:sidebar图 标:Icon注 释:note搜

CSS命名规范一 入门篇

CSS命名规范 一.文件命名规范  代码如下 复制代码 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 二.常用类/ID命名规范  代码如下 复制代码 页 眉:header 内 容:content 容 器:container 页 脚:footer 版 权:copyright 导 航:menu 主导航:mainMenu 子导航:subMenu 标 志:logo 标 语:banner 标

网页制作教程:CSS 命名规范

css|规范|教程|网页 XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离,代码中不涉及任何的表现元素,如style.font.bgColor.border等 <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询. 给每一个表格和表单加上一

SEO优化之div+css命名规则

SEO(搜索引擎优化)有很多工作要做,其中对代码的优化是一个很关键的步骤.为了更加符合SEO的规范,下面中部IT网将对目前流行的CSS+DIV的命名规则整理如下:页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单:subMenu 搜索:search 滚动:scroll 页面主体:main 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目

网页制作学习:div+css命名参考

css|参考|网页 用了一段CSS 布局设计网页,发现自己的命名有点混乱,完全按照自己的想法命名,虽然没什么影响,有不给别人看源文件,但是工作室有时候和团队合作完成项目的时候,就遇到麻烦了,要修改一个地方相当的费事.所以还是有个标准比较好啊!在网上看到的一个相关的参考,再加上平时也研究别人的代码,发现这样的命名使用很广泛!我再加上自己的经验,希望对看到这篇文章的人能有用! 命名参考 常用的CSS命名规则: 头:header内容:content/container尾:footer导航:nav侧栏:

div+css命名参考

css|参考  程序代码头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center  命名全部使用小写字母,如果需要多个单词,单词间使用"-"分隔,比如user-list 常用代码结构:  程序代码div:主要用于布局,分割页面的结构ul/ol:用于无序/有序列表span:没有特殊的意义,可以用作排版的辅助,例如 <li><

CSS命名规范二 入门篇

2.同一属性的缩写: 同一属性根据它的属性值也可以进行简写,如:  代码如下 复制代码 .search { background-color:#333; background-image:url(../images/icon.gif); background-repeat: no-repeat; background-position:50% 50%; } .search { background:#333 url(../images/icon.gif) no-repeat 50% 50%; }

css 命名规范_经验交流

页头:header 登录条:loginbar 标志:logo 侧栏:sidebar 广告:banner 导航:nav 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 滚动:scroll 页面主体:main 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guild 服务:service 热点:hot 新闻:news 下载:download 注册:regsiter 状态: