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

Div+CSS基础代码网页布局+实例教程,唐山小鱼网络提供

Div+css

一，什么是CSS

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

二．DIV+CSS

简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV是用于搭建html网页结构（框架）标签，像<b>、<h1>、<span>等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。

表格

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

例子：

<table>

<tr>

<td height="100">我的高度为100px</td>

</tr>

<tr>

<td height="50">我高度为50px</td>

</tr>

</table>

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

DIV的布局方法

CSS 代码

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

Html body内代码：

<div class="yangshi">演示，内容

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

</div>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Div+CSS基础代码网页布局+实例教程,唐山小鱼网络提供

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>CSS 高度实例</title>

<style>

.yangshi{ min-height:50px; _height:50px;width:150px;border:1px solid #666;}

</style>

</head>

<body>

<div class="yangshi">演示，内容

测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例 </div>

</body>

</html>

CSS 宽度

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

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

HTML宽度与DIV+CSS对比

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

如：<td width="300">我的宽度为300px</td>

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

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

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

而在标签运用：<div id="header">我的宽度为300px宽度</div>

CSS 宽度自适应

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

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

DIV CSS 自适应宽度例子：

CSS样式代码：

<style type="text/css">

body{ margin:0 auto; text-align:center;}

Div+CSS基础代码网页布局+实例教程,唐山小鱼网络提供

.yangshi{ width:80%; border:1px solid #003; margin:0 auto;}

</style>

Html中body div代码：

<div class="yangshi">我是80%自适应宽度</div>

CSS边框

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

Html表格控制边框：

border="1" bordercolor="#000000"

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

边框：

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;

Div+CSS基础代码网页布局+实例教程,唐山小鱼网络提供

完整DIV CSS实例：

实例内容设置CSS 命名为yangshi的css 选择器，设置该属性选择器样式为边框为1px宽度实线黑色边框、宽度为200px,高度为50px的矩形。

CSS 代码：

div,body{ border:0; margin:5px; padding:0;}/* 初始化网页样式 */

.yangshi{ border:1px solid #000; width:200px; height:50px;}/* 设置对象样式 */

HTML中对应DIV代码：

<div class="yangshi">divcss5实例-CSS 边框实例<br />

这是一个 CSS 实例

</div>

CSS 背景

background CSS手册查询-background手册

background-color

设置颜色作为对象背景颜色

background-image 设置图片作为背景图片

background-repeat设置背景平铺重复方向

background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。

background-position 设置或检索对象的背景图像位置。

图片背景样式（固定、滚动）

Div+CSS基础代码网页布局+实例教程,唐山小鱼网络提供

实现这个效果使用CSS单词是background-attachment 当然通常情况下背景默认是固定的如果是自己使用CSS background简写则如上图。

background-attachment使用解析：

background-attachment:fixed； …… 此处隐藏：2996字，全部文档内容请下载后查看。喜欢就下载吧 ……