`
fanggangJava
  • 浏览: 24715 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

web标准化设计:常用的CSS命名规则

    博客分类:
  • java
阅读更多

  头:header

  内容:content/container

  尾: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

  (二)注释的写法:

  /* Footer */

  内容区

  /* End Footer */

  (三)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

  (四)class的命名:

  (1)颜色:使用颜色的名称或者16进制代码,如

  .red { color: red; }

  .f60 { color: #f60; }

  .ff8600 { color: #ff8600; }

  (2)字体大小,直接使用"font+字体大小"作为名称,如

  .font12px { font-size: 12px; }

  .font9pt {font-size: 9pt; }

  (3)对齐样式,使用对齐目标的英文名称,如

  .left { float:left; }

  .bottom { float:bottom; }

  (4)标题栏样式,使用"类别+功能"的方式命名,如

  .barnews { }

  .barproduct { }

  注意事项::

  1.一律小写;

  2.尽量用英文;

  3.不加中杠和下划线;

  4.尽量不缩写,除非一看就明白的单词.

  主要的 master.css

  模块 module.css

  基本共用 base.css

  布局,版面 layout.css

  主题 themes.css

  专栏 columns.css

  文字 font.css

  表单 forms.css

  补丁 mend.css

  打印 print.css
分享到:
评论

相关推荐

    常用的CSS命名规则 web标准化设计

    常用的CSS命名规则 web标准化设计,让你的css更规范。

    CSS网站布局实录 (第二版)PDF版

    《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要: 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计...

    编写高质量代码-Web前端开发修炼之道.azw3

    1.2 Web标准——结构、样式和行为的分离 1.3 前端的现状 1.4 打造高品质的前端代码,提高代码的可维护性——精简、重用、有序 第2章 团队合作 2.1 揭秘前端开发工程师 2.2 欲精一行,必先通十行 2.3 增加代码...

    asp.net知识库

    Web标准和ASP.NET - 第一部分 XHTML介绍 在ASP.NET页面中推荐使用覆写(Override)而不是事件处理(Event Handler) 常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试 在C#里把ArrayList转换为Array 或 把...

    ASP.NET4高级程序设计(第4版) 3/3

    7.1.2 ADO.NET的标准化 210 7.1.3 基本ADO.NET类 211 7.2 Connection类 212 7.2.1 连接字符串 212 7.2.2 测试连接 214 7.2.3 连接池 215 7.3 Command类和DataReader类 217 7.3.1 Command基础 217 ...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    7.1.2 ADO.NET的标准化 7.1.3 基本ADO.NET类 7.2 Connection类 7.2.1 连接字符串 7.2.2 测试连接 7.2.3 连接池 7.3 Command类和DataReader类 7.3.1 Command基础 7.3.2 DataReader类 7.3.3 ...

    XML高级编程

    不管我们使用的是CSS还是XSL,我们将样式单中的数据应用到XML文档中的数据上,以产生适合人们阅读的可视化显示。第8章(链接和查询)将以此为线索开始。这是因为查询技术的一个子集允许编程者指定一个标准集,用来...

    Java语言基础下载

    标准标签的使用 618 内容总结 621 独立实战 622 第三十章:struts入门 623 学习目标 623 Struts简介 624 什么是应用框架 624 WEB框架所要解决的问题 625 建立简单的Struts应用 627 内容总结 636 独立实践 636 第三十...

    New of GWT Introduction--GWT开发快速入门

    GWT提供了一组基于Java语言的开发包,这个开发包的设计参考Java AWT包设计,类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包,将更多地...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

     另外,XML标记必须遵循下面的命名规则: 1.名字中可以包含字母、数字以及其它字母; 2.名字不能以数字或"_" (下划线) 开头; 3.名字不能以字母 xml (或 XML 或 Xml ..) 开头; 4.名字中不能包含空格。 在XML...

    JavaScript王者归来part.1 总数2

     14.1.2 CSS的标准化   14.1.3 浏览器支持的CSS   14.2 JavaScript与CSS   14.2.1 CSS和DOM的关系   14.2.2 CSS和IE的关系   14.2.3 浏览器的CSS兼容性   14.3 控制CSS改变页面风格   14.3.1 实现...

    酷睿财经门户网站管理系统 V2011

    该系统基于ASP+DIV+CSS+AJAX+XML+MSSQL技术开发的CMS网站管理系统,是一个经过完善设计并适用于各种服务器环境的易用、安全、高效、快速、优秀的网站解决方案。后台管理方便、易懂、易用、人性化,对操作人员技术...

    纳6免费团购系统 3.1.zip

    所有开发人员必须遵循国际标准,遵循公司的目录和文件名命名规则,统一编程书写规则和变量命名规则,使用统一的CSS样式表等。 模块化开发原则 根据网站的规划划分模块,进行模块化开发,提高代码的重用性和维护性...

    XML高级编程pdf

    11.2.1 消息传送和串行化 11.2.2 紧耦合系统和松耦合系统 11.2.3 通信方式 11.3 XML-RPC 11.3.1 为什么使用XML-RPC 11.3.2 XML-RPC适用于何处 11.3.3 XML-RPC规范—技术全瞻 11.3.4 XML-RPC的实现 11.3.5 ...

Global site tag (gtag.js) - Google Analytics