网站头部:    head/header(头部) top(顶部)导航:   nanv 导航具体区分:topnav(顶部导航)、mainnav(主导航)、mininav(迷你导航)、textnav(导航文本)、subnav(子导航/二级导航)
旗帜、广告和商标:logo(旗帜)、brand(商标)、banner(标语)
搜索:sreach(搜索)、sreachbox(搜索框)、sreachbtn(搜索按钮)、sreachinput(搜索输入框)

注册和登录:login(登录)、regsiter(注册)、userbox(用户名/通行证的文本框)、password(密码)

布局、分栏和框:   layout(布局)、bigdiv(大div)、leftdiv(左分栏)、rightdiv(右分栏)、leftfloat(左浮动)、rightfloat(右浮动)、mainbox()、subpage(子页面/二级页面)

页脚/底部:foot/footer(页脚/底部)、copyright(版权信息)、sitemap(网站地图)

其他:content(内容)、skin(皮肤)、title(标题)、from(表单)、pic(图片)、news(新闻)、shop(购物区)、list(列表/清单)、newslist(新闻列表)、downloadlist(下载列表)、piclist(图片列表)、dropmenv(下拉菜单)、cor/corner(圆角)、homepage(首页)、crumb(当前位置导航)

实际上上面的id命名我会经常用大小写和_来区分,比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名,比如写一个红色字体的class,可以
.f_red {}(f是font 字体的缩写)。总之原则是:大小写、_、缩写,大大增强代码的可读性。

另外我还经常使用"in"的写法做子divd的命名,写法in+父div,这样可以避免前面命名过了后面div不知道怎么去命名。比如intop、inbox、infrom、inlogin等等。

html页面的CSS、DIV命名规则

CSS命名规则
  头:header  内容:content/containe  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper  左右中:left right center  登录条:loginbar  标志:logo

  广告:banner  页面主体:main  热点:hot  新闻:news  下载:download  子导航:subnav  菜单:menu  子菜单:submenu  搜索:search  友情链接:friendlink  页脚:footer  版权:copyright

  滚动:scroll  内容:content  标签页:tab  文章列表:list  提示信息:msg  小技巧:tips  栏目标题:title  加入:joinus  指南:guild  服务:service  注册:regsiter  状态:status  投票:vote

  合作伙伴:partner

XHTML文件中id的命名

(1)页面结构
 容器: container  页头:header  内容:content/container  页面主体:main  页尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper  左右中:left right center

(2)导航

  导航:nav  主导航:mainbav  子导航:subnav  顶导航:topnav  边导航:sidebar  左导航:leftsidebar  右导航:rightsidebar  菜单:menu  子菜单:submenu  标题: title  摘要: summary

(3)功能

  标志:logo  广告:banner  登陆:login  登录条:loginbar  注册:regsiter  搜索:search  功能区:shop  标题:title  加入:joinus  状态:status  按钮:btn  滚动:scroll  标签页:tab

  文章列表:list  提示信息:msg  当前的: current  小技巧:tips  图标: icon  注释:note  指南:guild  服务:service  热点:hot  新闻:news  下载:download  投票:vote  合作伙伴:partner

  友情链接:link  版权:copyright

CSS+DIV的命名规则:

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

  1.CSSID的命名
  外套: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

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

说明:均为class,需要扩展,则在当前命名内以“_“(下划线)后缀自定名称。
我习惯称列表页为list,新闻列表则为newslist,图片列表为piclist,
内容页为view,

整体大框架:#wrapper
大框架内:#inwrapper
/////////////////////////////////////////////////////////////////////////////////////////////////////////
顶部及banner:.top
顶部及banner内:.intop
Logo:.logo
Banner:.banner
导航:.menu
导航内:.inmenu
        .Menuul
        .Menuul li
        .Menuul li a
下拉菜单:.inmenu_xiala
          .Inmenu_xialaul
          .Inmenu_xialaul li
          .Inmenu_xialaul li a
///////////////////////////////////////////////////////////////////////////////////////////////////////////
主体内容:.mainWrapper
主体内容内:.inmainwrapper
左侧拦:.sideleft
左侧内:.insideleft
右侧栏:.sideright
右侧内:.insideright
中间:.sidecenter
中间内:.insidecenter
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
底部:.foot
底部内:.infoot
////////////////////////////////////////////////////////////////////////////////////////////////////////////

搜索:.search
搜索内:.insearch
搜索条:.searchselect
搜索按钮:.serachbuttom
输入文本框:.input
.select

表格整体框架:.listbox
表格的宽度:.listbox-table
表格头部文字样式:.listbox-header
表格正文文字样式:.listbox-entry

通用:.GM
通用内:.INGM
通用左浮动:.GMfl(GM FLOAT LEFT)
通用右浮动:.GMfr(GM FLOAT RIGHT)

通用图片样式:.img

清除所有浮动:.clear
清除左侧浮动:.clearleft
清除右侧浮动:.clearright

文字:.font

新闻列表:.fontnews

VIEW页字体:.fontview

商 标:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsidebar
右导航:  rightsidebar
旗 志:  logo
标 语:  banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功能区:  shop(如购物车,收银台)
当前的   current
报头:   masthead 
摘要, 概要  summary或general
左边的浮动照图片 photoleft 
右边的浮动图片 photoright
标题   title
条目底端    entrybottom
更多    extended或.more 
容器背景 containerbg
服务   service
服务链接   servicelink
线   line
文本   text
右边   rightside
版权   copyright
新闻   news
书皮   wrapper
介绍      intro-part1
专栏   column
路径   pathways
片断   section
模块   module
上导航   subnav
2.另外在编辑样式表时可用的注释可这样写:

<-- Footer -->
内容区
<-- End Footer -->

3.样式文件命名

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

4.样式表中的注示
实例一

web规范文档说明三的更多相关文章

  1. 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  2. 前端javascript规范文档 (http://www.xuanfengge.com/category/web)

    说明:本文档为前端JS规范 一.规范目的 为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则 符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, ...

  3. Web前端开发规范文档(google规范)

    (Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 区分大小写 xhtml  区分大小写,xhtml要求 标签名 属性名 值都要小写,并且要有双引号和 标签闭合. css 元素名称以及i ...

  4. Web前端开发规范文档你需要知道的事--HTML、css、js、文档等需要规范内容

          规范目的 为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不 ...

  5. WEB前端开发规范文档(转)

    http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...

  6. Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  7. WEB前端开发规范文档[转]

    为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...

  8. web项目文档总览

    一个web项目的文档应该包含哪些部分 一.规范文档1.ui 设计规范2.js.css.html 编码规范3.后台程序编码规范4.文件层级及模块编码规范二.技术架构评审三.运行环境部署细则四.研发流程: ...

  9. 作业配置规范文档[MS SQL]

    作业配置规范文档(MS SQL) 文档类型 MS SQL数据库作业配置规范文档 创建日期 2015-07-30 版本变化 V3.0 修改记录 修改人 修改日期 版本 修改描述 潇湘隐者 2015-08 ...

随机推荐

  1. notepad++ 插件说明(一)

    notepad++插件说明(一) 1.xml插件安装 下载地址:https://sourceforge.net/projects/npp-plugins/files/XML%20Tools/Xml%2 ...

  2. js判断字符串是否为JSON格式

    不能简单地使用来判断字符串是否是JSON格式: function isJSON(str) { if (typeof str == 'string') { try { JSON.parse(str); ...

  3. PHP 文件夹上传

    一.我的准备情况说明. 编辑器:sublime text3(用什么编辑器看自己爱好)服务器构建:使用phpstudy2014构建服务器,服务器文件存储在我自身电脑D盘的www文件中.(安装phpstu ...

  4. debian中安装gcc make

    ubuntu debian 可以直接 apt-get install gcc automake autoconf libtool make

  5. EncryptFac 加解密小工具

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. gulp4.0配置

    var gulp = require('gulp'); var rename = require('gulp-rename');//重命名 var uglify=require('gulp-uglif ...

  7. Django模板系统-母板和继承

    母板和继承 母版 html页面,提取多个页面的公共部分 定义多个block块,需要让子页面进行填充 <head> {% block page-css %} {% endblock %} & ...

  8. 【POJ - 3187】Backward Digit Sums(搜索)

    -->Backward Digit Sums 直接写中文了 Descriptions: FJ 和 他的奶牛们在玩一个心理游戏.他们以某种方式写下1至N的数字(1<=N<=10). 然 ...

  9. web学习(2019-10)

    @“fuzz一下”:所有注入爆破题/其他题,必fuzz 在安全测试中,模糊测试(fuzz testing)是一种介于完全的手工渗透测试与完全的自动化测试之间的安全性测试类型 模糊测试(fuzz tes ...

  10. Caused by: com.rabbitmq.client.AuthenticationFailureException: ACCESS_REFUSED - Login was refused using authentication mechanism PLAIN. For details see the broker logfile.的几种原因

    环境:centos 7+ 1.查看用户是否存在 进入安装目录使用./sbin/rabbitmqctl list_users查看是否存在用户 比如:./usr/local/rabbitmq/rabbit ...