Div+CSS基础代码网页布局+实例教程

Div+css

一，什么是CSS

CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。

二．DIV+CSS

简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV 是用于搭建html网页结构（框架）标签，像、

、等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。

表格

以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。

例子：

我的高度为100px

我高度为50px

分别设置了高度为100px和50px的两行表格

DIV的布局方法

CSS 代码

.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}

Html body内代码：

演示，内容

测试内容高度超出演示实例，divcss5实例

完整CSS html最小高度实例代码：

演示，内容

测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例

CSS 宽度

传统Html 宽度属性单词：width 如width="300";

CSS 宽度属性单词：width 如width:300px;

HTML宽度与DIV+CSS对比

1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。而宽度值后无需跟单位，默认情况下以像素（px）为单位。

如：我的宽度为300px

即：设置了对应表格td的宽度为300px.

2、div css中宽度设置width:300px;，即设置对应CSS样式为300px，这里需要跟单位。

如：#header{ width:300px;}

即：定义header CSS选择器样式为300px宽度。

而在标签运用：

我的宽度为300px宽度

CSS 宽度自适应

常常我们看见一个网页宽度随浏览器宽度改变而自动改变，宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。

如果网页总宽度为80%即width:80%;，将使此宽度知道自适应宽度为浏览器80%。当然前提是设置最外层没有宽度限制条件下。

DIV CSS 自适应宽度例子：

CSS样式代码：

Html中body div代码：

我是80%自适应宽度

CSS边框

CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性

Html表格控制边框：

border="1" bordercolor="#000000"

说明：控制表格边框宽度为1px，颜色为黑色，默认为实线样式边框

DIV CSS边框：

border-color:#000; border-style:solid; border-width:1px;

说明：以上代码为设置对象边框颜色为黑色、边框为实线、宽度为1px边框。

边框样式包括

设置上边框：border-top：

设置下边框：border-bottom :

设置左边框：border-left:

设置右边框：border-right：

边框显示样式：

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

参数值解释：

none : 无边框。与任何指定的border-width值无关

hidden : 隐藏边框。IE不支持

dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线solid : 实线边框

double : 双线边框。两条单线与其间隔的和等于指定的border-width值

groove : 根据border-color的值画3D凹槽

ridge : 根据border-color的值画菱形边框

inset : 根据border-color的值画3D凹边

outset : 根据border-color的值画3D凸边

例子：

设置上边框为1px实线黑色边框。

border-top-color:#000; border-top-style:solid; border-top-width:1px;

或简写border-top:#000 solid 1px;