CSS+Div (一)

 <div id="header"></div>     <div class="menu"></div> 

1、使用区别
id具有唯一性，在一个网页中同一个命名只能使用一次；
class命名的类可以在一个网页中使用无数次。

2、css中区别
id在css代码中是以“#”井号符号开头命名的类
class在css代码中是以“.”小写句号符号命名开头的类

id和class都可以在网页中任何标签内使用。一般比较重要的部分、比较特别的盒子使用id，而小局部不重要的或小结构使用class。id调用css中以“#”井号命名的样式选择器，class调用css中以“.”英文半角小写句号命名的样式选择器。

DIV+CSS规范命名大全集合

一、命名规则说明：
、所有的命名最好都小写
2）、属性的值一定要用双引号(“”)括起来，且一定要有值如class=”divcss5”,id=”divcss5”
3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
4）、空元素要有结束的tag或于开始的tag后加上”/”
5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
6）、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
7）、给每一个表格和表单加上一个唯一的、结构标记id
8）、给图片加上alt标签
9）、尽量使用英文命名原则
10）、尽量不缩写，除非一看就明白的单词

二、相对网页外层重要部分CSS样式命名：

外套 wrap ——————用于最外层
头部 header —————-用于头部
主要内容 main ————用于主体内容（中部）
左侧 main-left ————-左侧布局
右侧 main-right ———–右侧布局
导航条 nav —————–网页菜单导航条
内容 content —————用于网页中部主体
底部 footer —————–用于底部

三、DIV+CSS命名参考表：
具体名见http://www.divcss5.com/jiqiao/j4.shtml

一、line-height行高语法

line-height:+数字+单位（在CSS布局中我们一般采用像素px为单位）
行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。

二、行高应用介绍

Line-height行高属性，运用到对文字排版，实现上下排文字间隔距离，以及单排文字在一定高度情况上下垂直居中布局。

1、对于文章类文字上下排间隔
一般我们对对象设置设置line-height行高属性即可实现让自动换行文字排版均匀间隔多少设置。

2、对单排文字上下垂直居中
假如我们一个固定30px高度div对象，如果要让其文字内容上下垂直居中，我们即可使用line-height:30px即可。

    .divcss5{ line-height:20px }/* 行高20px */     .divcss52{ line-height:30px; height:30px;}/* 高度固定上下居中 */ 

在一排的文字或内容布局中，如果要让内容上下垂直居中，我们只需要设置line-height与height高度相同高度长度与html单位即可实现垂直居中；如果是多列的或文章内容通常我们会设置每行文字一定平均上下间隔，这个时候我们只需要设置line-height行高即可。

.div1{ width:300px; height:50px; border:1px solid #000; text-align:left} .div2{ width:300px; height:50px; border:1px solid #000; text-align:center} .div3{ width:300px; height:50px; border:1px solid #000; text-align:right} /*  div1 div2 div3 分别设置 靠左 居中 靠右对齐 <div class="div1">我被靠左对齐</div> <div class="div2">我被居中显示</div> <div class="div3">我被靠右对齐</div>

CSS代码：
.divcss5{display:none}

Html对应运用：
<div class="divcss5">我是测试内容</div>
根据以上可以自己DIV+CSS下，看看使用结果

常用display
1、div{display:block} 有换行作用。
案例：图片做背景，隐藏图片上文字

2、div{display:None } 隐藏对象及对象内容。
案例：CSS隐藏HTML内容

3、div{display:Inline } 在一排显示。
代表案例，对li列表默认一排显示li{display:Inline }