平武建站

DIV+CSS的命名规则介绍

本篇内容介绍了“DIV+CSS的命名规则介绍”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

专注于为中小企业提供成都网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业海口免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

你对DIV+CSS命名规则是否了解，这里和大家分享一下，首先看一下常用代码结构，div：主要用于布局，分割页面的结构；ul/ol：用于无序/有序列表。

DIV+CSS命名规则

常用代码结构：

div：主要用于布局，分割页面的结构

ul/ol：用于无序/有序列表

span：没有特殊的意义，可以用作排版的辅助，例如：

  • (4.23)隐居豆腐店

    • 然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果

    h2-h7：标题

    h2-h7 根据重要性依次递减

    h2位最重要的标题

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

    密　码label>  

    ◆fieldset & legend：fildset套在表单外，legend用于描述表单内容。例如：

      
      titlelegend>  密　码label>    fieldset>  form>

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

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

    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}

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

    (二)注释的写法:

    /*Footer*/

    内容区

    /*EndFooter*/

    (三)id的命名:

    (1)页面结构

    容器:container页头：header内容：content/container

    页面主体：main页尾：footer导航：nav

    侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper

    左右中：leftrightcenter

    (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版权：copyrigh。t

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

    ◆DIV排版的核心：即CSS盒子模式

    CSS每个div盒子模式包括：内容(content)、填充(padding)、边框(border)、边界(margin)

“DIV+CSS的命名规则介绍”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


网站栏目：DIV+CSS的命名规则介绍
网站链接：http://pwwzsj.com/article/pjipsg.html

其他资讯