当前位置:Gxlcms > html代码 > div+css命名规则_html/css_WEB-ITnose

div+css命名规则_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:16人阅读

div+css命名规则

2009-04-15 11:48

常用代码结构:

div:主要用于布局,分割页面的结构
ul/ol:用于无序/有序列表
span:没有特殊的意义,可以用作排版的辅助,例如:

  • (4.23)隐居豆腐店
  • 然后在css中定义span为右浮动,实现了日期和标题分两侧显示的效果

    h1-h6:标题
    h1-h6 根据重要性依次递减
    h1位最重要的标题

    label:为了使你的表单更有亲和力而且还能辅助表单排版的好东西,例如:

    fieldset & legend:fildset套在表单外,legend用于描述表单内容。例如:

    dl,dt,dd:当页面中出现第一行为类似标题/简述,然后下面为详细描述的内容时应该使用该标签,例如:

    什么是CSS?
    CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。
    什么是XHTML?
    < dd>XHTML是一个基于XML的置标语言,看起来与HTML有些想像,只有一些小的但重要的区别。可以这样看,XHTML就是一个扮演着类似 HTML的角色的XML。本质上说,XHTML是一个桥接(过渡)技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。

    C #content

    S #subcol

    M #maincol

    X #xcol

    这是纵向布局的XHTML结构,c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

    其中在三纵栏的布局需要分为两层 第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

    自定义命名:
    根据w3c网站上给出的,最好是用意义命名
    比如:是重要的新闻高亮显示(像红色)
    有两种

    .red{color:red} .important-news{color:red}

    很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字

    常用的CSS命名规则:

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

    人气教程排行