`
fanggangJava
  • 浏览: 25246 次
  • 性别: 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
分享到:
评论

相关推荐

    CSS3 、HTML5的W3C标准参考手册 及 css命名规则

    **CSS3** CSS3是层叠样式表的第三版,是网页设计...以上是关于CSS3、HTML5的W3C标准参考手册及CSS命名规则的一些关键知识点。这些内容对于网页开发者来说至关重要,理解并熟练应用这些技术能够提升网页的质量和效率。

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

    本文将深入探讨一些常见的CSS命名规则,帮助开发者实现Web标准化设计,让CSS更加规范。 首先,我们可以看到一组常用的基础命名约定,这些约定用于描述网页的不同部分: 1. **头部(Header)**:通常使用`header`...

    网页设计中DIV+CSS命名规则

    网页设计中的DIV+CSS命名规则是构建高效、可维护性和SEO友好的网站界面的重要组成部分。在Web 2.0标准中,使用DIV+CSS技术能够提高网页的结构化程度,利于搜索引擎优化,使得网站更容易被搜索引擎抓取和理解。下面...

    WEB前端开发规范文档+CSS命名规范

    1. **遵循Web标准**:使用语义化的HTML,实现结构、表现和行为的分离。 2. **保证良好的兼容性**:编写简洁、清晰、有序的代码,以最小化服务器负载并确保最快的解析速度。 3. **文件组织**: - HTML文件:英文命名...

    web标准培训教案-CSS+DIV

    【CSS+DIV】是网页设计中的核心技术,它们在构建现代Web标准中扮演着核心角色。Web标准主要包括XHTML、CSS和DOM,强调结构、表现和行为的分离,以提高网页的可读性、可维护性以及对不同设备和浏览器的兼容性。 1. *...

    前端代码标准最佳实践:CSS篇

    #### 一、命名规则 在CSS中,命名规范至关重要。合理的命名不仅能够帮助开发者快速理解代码含义,还能提高代码的可维护性。 - **原则**:命名要有意义且尽量简短,但同时也要充分表达其作用。 - **示例**: - 不...

    Web前端开发命名规则.docx

    在Web前端开发中,命名规则是至关重要的,它关乎到代码的可读性、可维护性和团队协作效率。以下是对给定文件中提到的一些关键知识点的详细解释: 1. **HTML元素命名**: - `type`属性:用于定义HTML元素的类型,如...

    css命名规范.doc

    CSS(层叠样式表)命名规范对于Web开发者来说至关重要,因为它不仅影响代码的可读性和维护性,还直接...总的来说,遵循CSS命名规范能有效提升代码质量,使得项目更易于管理和维护,同时也为团队协作提供了统一的标准。

    WEB前端编码规范

    - CSS文件命名:参照项目命名规则,例如:retina_sprites.css。 - JS文件命名:参照项目命名规则,例如:account_model.js。 2. HTML书写规范 - 语法:使用四个空格的softtabs,嵌套的节点应该缩进,在属性上,...

    精通CSS高级Web标准

    《精通CSS高级Web标准》是一本深入探讨CSS技术的专业书籍,旨在帮助读者掌握Web开发中的高级CSS技巧和标准。虽然书中可能包含一些随着时间推移而过时的信息,但其核心理念和基础知识仍然具有很高的参考价值,尤其...

    HTML_CSS_JavaScript命名规范

    4. 命名惯例:开发者常使用如header、content、nav、sidebar、footer等通用名称,但不应视为固定标准,应结合项目需求制定个性化的命名规则。 JavaScript命名规范: 1. 变量命名:遵循驼峰式命名法,如variableName...

    css书写规范 web设计css

    ### CSS书写规范与Web设计标准 #### CSS书写规范概述 CSS(层叠样式表)是网页设计中的一个重要组成部分,用于定义HTML文档中的元素布局、颜色、字体等视觉表现形式。良好的CSS书写规范不仅可以提高代码的可读性...

    WEB标准化页面制作指南.doc

    WEB标准化页面制作指南是网页设计和开发领域的重要指导文档,旨在确保网站的高效、一致性和可维护性。以下是对这份指南的详细解析: 1. **引言** 引言部分通常阐述了编写该指南的目的,它强调了标准化在网页制作中...

    精通CSS-高级Web标准解决方案

    《精通CSS:高级Web标准解决方案》是一本专为前端开发者准备的深度学习CSS技术的书籍。这本书详尽地探讨了CSS的各种高级特性,旨在帮助读者掌握构建高效、可维护、响应式的网页布局所需的关键技能。 首先,我们来...

    CSS设计网页时的一些常用规范.pdf

    - 对于二级类或ID,如"搜索框",可以命名为"searchInput","搜索图标"为"searchIcon","搜索按钮"为"searchBtn",遵循驼峰命名规则,后一个单词首字母大写。 二、CSS书写规范及方法 1. 选择DOCTYPE: - XHTML ...

    Web前端开发规范|CSS手册|W3c手册资料合集

    CSS规范由W3C(万维网联盟)制定并维护,确保了浏览器的兼容性和标准化。 在CSS手册中,你可能会找到以下关键知识点: 1. **选择器**:CSS选择器用于匹配HTML或XML元素,如标签选择器、类选择器、ID选择器等。了解...

    精通CSS:高级Web标准解决方案(第2版)

    《精通CSS:高级Web标准解决方案(第2版)》是一本深入探讨CSS(层叠样式表)技术的专业书籍,旨在帮助读者掌握CSS的高级用法和最佳实践,从而实现更高效、更美观的网页设计。这本书是第二版,通常会在第一版的基础上...

Global site tag (gtag.js) - Google Analytics