当前位置:主页 > 网页教程 > 网页制作 > div css > 内容欢迎大家投稿

初学者简单学习CSS网页布局(2)

时间:2009-10-02 21:47来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

(2)内联元素。和块级元素相反,内联元素没有固定形状,也无法设置宽度和高度。内联元素形状由其内含的内容决定,所以在宽度足够的情况下,一行能容纳多个内联元素。有人说相对于块状元素是一个硬盒子,内联元素就是一个软软的布袋子(形状由内容决定)。

块状元素适合于大块的区域排版,所以常用来布局页面。而内联元素适合于局部元素的样式设置,所以常用于局部的文字样式设置。

 11.1.3  div元素的样式设置

读者要使用div元素进行网页布局,首先须学会使用CSS灵活地设置div元素的样式。本节就几个常用的示例学习div元素的多种样式设置,使读者快速理解div元素。作为单个div元素,width属性用于设置其宽度,height属性设置其高度。由于网页大多数用于计算机显示屏幕作媒介,所以常用像素作为固定尺寸的单位,即px。

 

—  注意:在HTML元素中设置样式不需要填写单位,默认为像素。

 

当单位为百分比时,div元素的宽度和高度为自适应状态,即宽度和高度适应浏览器窗口尺寸而变化。在D:\web\目录下创建网页文件(XHTML1.0),命名为div_2.htm,编写div_2.htm文件代码如代码11.3所示。

 

代码11.3  设置div样式:div_2.htm

 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>设置div样式</title>

<style type="text/css">

#fst {

    background-color: #eee;

    border:1px solid #000;

    width:300px;

    height:200px;

}

#sec {

    background-color: #eee;

    border:1px solid #000;

    width:50%;

    height:25%;

}

</style></head>

<body>

<div id="fst">这是固定尺寸的宽度和高度</div>

<hr />

<div id="sec">这是自适应尺寸的宽度和高度</div>

</body>

</html>

为了更方便看到div的表现,笔者给2个div都设置了浅灰色背景色和黑色边框,在浏览器地址栏输入http://localhost/div_2.htm,浏览效果如图11.3所示。

图11.3  设置div样式

很明显,第1个div宽度和高度固定,形成了一个“坚硬”的盒子。而第2个div由于设置其宽度为50%,其宽度随着浏览器的宽度变化而变化。但是问题出现了,第2个div的高度虽然设置为25%,按理说其高度应该随着浏览器的高度变化而变化。然而在示例中div高度仅和文本高度相当,好像高度设置没有起作用。

其实设置高度自适应有一个前提,div的高度自适应是相对于父容器的高度,本例中div父容器为body或者html(不同浏览器解析方式不同)。body或者html在本例中没有设置高度,div的高度自适应没有参照物,也就无法生效。

接下来在CSS中设置body和html的高度,就可解决div的高度自适应问题。body和html的高度直接设置为100%即可,不会对页面有任何影响。在div_2.htmd的CSS部分加入如代码11.4所示的代码。

 

代码11.4  设置div样式:div_2.htm

 

html,body{height:100%;}         

为了考虑多种浏览器的兼容性,html和body同时设置100%宽度。在浏览器地址栏输入http://localhost/div_2.htm,浏览效果如图11.4所示。

调整浏览器高度后,第2个div的高度随之变化。各种浏览器对XHTML和CSS的解析方式有差异,在后面将详细讨论解决办法,以解决浏览器的兼容性问题。

图11.4  设置div标签高度自适应

 11.1.4  布局页面的宽度

由于浏览者的显示分辨率不同,浏览者常见显示分辨率(单位:像素)为800×600、1024×768、1280×1024、1440×960等。所以在布局页面时,要充分考虑页面内容的布局宽度,一旦内容宽度超过显示宽度,页面将出现水平滚动条。

 

—  说明:尽量保证网页只有垂直滚动条,才符合浏览者的习惯,所以高度不需要考虑,由页面内容决定网页高度。

 

页面布局宽度一般考虑最小显示分辨率的浏览用户,即过去浏览用户的显示分辨率最小为800×600(15寸CRT显示器),其最小宽度为800像素。浏览器的边框及滚动条部分约占24像素左右,所以布局宽度为分辨率的水平像素减去24像素。所以过去网页布局宽度一般为778像素,再宽就会使页面产生水平滚动条。

由于计算机设备的飞速发展,现在使用800×600显示分辨率的用户很少了,现在页面布局宽度最大不超过1002 ~1003像素(考虑到最小宽度1024像素,即1024×768显示分辨率)。

 11.1.5  布局页面水平居中

为了适应不同浏览用户的分辨率,网页设计师要始终保证页面整体内容在页面居中。使用HTML表格布局页面时,只需要设置布局表格的align属性为center即可。而div居中没有属性可以设置,只能通过CSS控制其位置。

在布局页面前,网页制作者一定要把页面的默认边距清除。为了方便操作,常用的方法是使用通配选择符*,将所有对象的边距清除,即margin属性和padding属性。margin属性代表对象的外边距(上、下、左、右),padding属性代表对象的内边距,也叫填充(上、下、左、右)。(责任编辑:大宝库)



------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接