DIV+CSS的命名规则介绍

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

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

DIV+CSS命名规则

常用代码结构：

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

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

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

• (4.23)隐居豆腐店

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

h2-h7：标题

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

h2位最重要的标题

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

<label for="user-password">密　码label>  <input type="password" name="password"   id="user-password" />

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

<form>  <fieldset>  <legend>titlelegend>  <label for="user-password">密　码label>  <input type="password" name="password" id="user-password" />  fieldset>  form>

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

<dl>  <dt>什么是CSS?dt>  <dd>CSS就是一种叫做样式表（stylesheet）的技术。  也有的人称之为层叠样式表（Cascading Stylesheet）。<dd>  <dt>什么是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的命名规则介绍”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！