zoukankan      html  css  js  c++  java
  • 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

    打印

  • 相关阅读:
    jquery之empty()与remove()区别
    (四)快速排序
    (三)归并排序
    (二)希尔排序
    (一)冒泡排序、插入排序、选择排序
    四,JVM 自带工具之jvisualvm
    JAVA多线程之Volatiles
    JAVA多线程之线程池的使用
    CountDownLatch与CyclicBarrier的使用与区别
    乐观锁与悲观锁及其实现
  • 原文地址:https://www.cnblogs.com/ranzige/p/4362747.html
Copyright © 2011-2022 走看看