DIV+CSS网页布局技巧实例.docx

资源描述

DIV+CSS网页布局技巧实例.docx

《DIV+CSS网页布局技巧实例.docx》由会员分享，可在线阅读，更多相关《DIV+CSS网页布局技巧实例.docx（13页珍藏版）》请在冰豆网上搜索。

DIV+CSS网页布局技巧实例.docx

DIV+CSS网页布局技巧实例

DIV+CSS网页布局技巧实例1：

设置网页整体居中的代码

以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用DIV+CSS样式表控制，好像不是那么容易了，其实也很简单，只不过方式不同而已。

　　请看这段代码，宽度为适合800×600分辨率浏览器的宽度，margin:

0auto;这句代码就是让居中了，意思是外边距上下设置为0，左右设为自动。

这样它就居中了。

　　那么可能你要问了，text-align:

center;为什么还要让内容居中呢？

呵呵，别着急，这句是为了适应IE6以下版本的浏览器而加的，IE6以下对margin:

0auto;不能解析为居中，所以用这种方式来补救，以下在设计内容时再用text-align:

left;就可以了。

　　注：

margin和padding的值的顺序为顺时针上右下左，如margin:

1px2px3px4px;还可以缩写为上下、左右，如本例，如果为margin:

0px;则是各边都为0

提示：

可以先修改部分代码后再运行

DIV+CSS网页布局技巧实例2：

设置容器中的内容垂直居中

如实例1设置网页整体居中的代码中内容是居容器的顶部的，而在表格布局时默认是垂直居中的，当我们需要垂直居中的时候该怎么办呢？

别害怕，跟我来，也是比较简单的，只用设置容器内的行高就行了。

line-height:

500px;

提示：

可以先修改部分代码后再运行

这是一种方法，另外和种方法就是设置的它内边距padding了，自己可以试试哟～～

DIV+CSS网页布局技巧实例3：

设置层的透明度

有时候我们需要用到层的透明度，把下边的背景透出来，如下图：

这种半透明的形式在blog上应用比较广泛，那么这种效果是怎么做出来的呢？

用JS，NO,NO，既然我们是CSS布局教程，那么就尽量用CSS来解决问题！

filter:

alpha（opacity=70）;

opacity:

0.7;

把这两句代码加入到要实现半透明层的CSS样式表里即可，简单吧！

！

注：

70和0.7的值可改为你需要的

提示：

可以先修改部分代码后再运行

本文来自：

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。

css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下：

颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：

#000000可以缩写为#000;#336699可以缩写为#369;

注意:

在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。

盒尺寸

通常有下面四种书写方法:

▪property:

value1;表示所有边都是一个值value1；

▪property:

value1value2;表示top和bottom的值是value1,right和left的值是value2

▪property:

value1value2value3;表示top的值是value1，right和left的值是value2，bottom的值是value3

▪property:

value1value2value3value4;四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针，上右下左。

具体应用在margin和padding的例子如下：

margin:

1em02em0.5em;

边框（border）

边框的属性如下：

▪border-width:

1px;

▪border-style:

solid;

▪border-color:

#000;

可以缩写为一句：

border:

1pxsolid#000;

语法是border:

widthstylecolor;

背景（Backgrounds）

背景的属性如下：

▪background-color:

#f00;

▪background-image:

url（background.gif）;

▪background-repeat:

no-repeat;

▪background-attachment:

fixed;

▪background-position:

00;

可以缩写为一句：

background:

#f00url（background.gif）no-repeatfixed00;

语法是background:

colorimagerepeatattachmentposition;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

▪color:

transparent

▪image:

none

▪repeat:

repeat

▪attachment:

scroll

▪position:

0%0%

字体（fonts）

字体的属性如下：

▪font-style:

italic;

▪font-variant:

small-caps;

▪font-weight:

bold;

▪font-size:

1em;

▪line-height:

140%;

▪font-family:

"LucidaGrande",sans-serif;

可以缩写为一句：

font:

italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表（lists）

取消默认的圆点和序号可以这样写list-style:

none;,

list的属性如下:

▪list-style-type:

square;

▪list-style-position:

inside;

▪list-style-image:

url（image.gif）;

可以缩写为一句：

list-style:

squareinsideurl（image.gif）;

本文来自：

忘记定义尺寸的单位是CSS新手普遍的错误。

在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：

width:

100pxwidth:

100em。

只有两个例外情况可以不定义单位：

行高和0值。

除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

DIV+CSS网页布局技巧实例6：

区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。

为了避免这种错误，我建议所有的定义名称都采用小写。

　　class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

DIV+CSS网页布局技巧实例7：

取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而class可以在页面中多次使用。

你限定某个元素毫无意义。

例如：

　　div#content{/*declarations*/}

　　fieldset.details{/*declarations*/}

　　可以写成

　　#content{/*declarations*/}

　　.details{/*declarations*/}

　　这样可以节省一些字节。

DIV+CSS网页布局技巧实例8：

元素属性的默认值

通常padding的默认值为0，background-color的默认值是transparent。

但是在不同的浏览器默认值可能不同。

如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

　　margin:

　　padding:

　　}

DIV+CSS网页布局技巧实例9：

不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。

但是要注意，浏览器可能用一些默认值覆盖你的定义。

提示：

可以先修改部分代码后再运行

DIV+CSS网页布局技巧实例10：