圆月山庄资源网

初学者简单学习CSS网页布局
网页制作 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

XHTML主要用div标签进行网页的布局，而控制布局的工具是CSS代码，以使网页符合Web标准。所以很多网页设计师把这种布局方法的网页叫做“Div CSS”网页。其实这是不太准确的说法，因为Web标准不太被行外人士所熟识，导致“Div CSS”的概念取代了Web标准。 CSS布局方法
通过上一章的学习，读者了解到了CSS强大的表现控制功能，特别是在布局方面有很大的优势。相对于代码条理混乱、样式杂糅在结构中的表格布局，CSS将带来全新的布局方法，让网页设计师更轻松、更自由。本章通过多个示例展示CSS布局网页的方法，并对CSS的“盒模型”作详细阐述。相信读者在深入理解“盒模型”后，布局网页、定位CSS网页元素将更加自如。
11.1 什么叫“Div CSS”
上一章学习了Web标准的概念以及XHTML和CSS的基本知识。XHTML主要用div标签进行网页的布局，而控制布局的工具是CSS代码，以使网页符合Web标准。所以很多网页设计师把这种布局方法的网页叫做“Div CSS”网页。其实这是不太准确的说法，因为Web标准不太被行外人士所熟识，导致“Div CSS”的概念取代了Web标准。Web标准不仅仅指用div标签布局（有时候也用其他标签布局），其含义非常广，需要代码编写良好的结构，有良好的语义以及可读性等。
所以“Div CSS”制作的网页不一定符合Web标准，而符合Web标准的网页不一定完全由div标签布局。
11.1.1 初识div
div标签在Web标准的网页中使用非常频繁，那么，相对于其他HTML继承而来的元素，div有什么特别之处呢？答案可能令读者失望，div标签什么特性也没有，一定要说其特性，不过是一种块状元素。正因为div没有任何特性，所以更容易被CSS代码控制样式。
div标签是双标签，即以<div></div>的形式存在，其间可以放置任何内容，包括其他的div标签。也就是说，div标签是一个没有任何特性的容器而已。在D:\web\目录下创建网页文件（XHTML1.0），命名为div.htm，编写div.htm文件代码如代码11.1所示。

代码11.1 默认的div标签：div.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>
</head>
<body>
<div>我是第1个div标签中的内容</div>
<div>我是第2个div标签中的内容</div>
<div>我是第3个div标签中的内容</div>
</body>
</html>
在浏览器地址栏输入http://localhost/div.htm，浏览效果如图11.1所示。没有CSS的帮助下，div标签没有任何特别之处，只是无论怎么调整浏览器窗口，每个div标签占据一行。即默认情况下，一行只能容纳一个div标签。为了再次证明一行只能容纳一个div标签，笔者对div通过id选择符加入CSS代码，使div拥有背景色以及宽度，修改div.htm如代码11.2所示。

代码11.2 设置背景的div标签：div.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">
#top,#bt{background-color:#eee;
}
#mid{background-color:#999;
width:250px;
}
#bt{width:120px;}
</style>
</head>
<body>
<div id="top">第1个div标签中的内容</div>
<div id="mid">第2个div标签中的内容</div>
<div id="bt">第3个div标签中的内容</div>
</body>
</html>
在浏览器地址栏输入http://localhost/div.htm，浏览效果如图11.2所示。
初学者简单学习CSS网页布局 初学者简单学习CSS网页布局
图11.1 默认的div标签 图11.2 设置背景的div标签
通过背景色的设置，可以从图11.2中看到div标签默认占据一行，宽度也为一行的宽度。通过宽度的设置可以发现，并不是因为div的宽度为一行导致无法容纳后面的div标签。无论宽度多小，一行始终只有一个div标签，读者须谨记。
div标签作为网页CSS布局的主力元素，其优势已经非常明显。相对于表格布局，div更加灵活，因为div只是一个没有任何特性的容器，CSS可以非常灵活地对其进行控制，组成网页的每一块区域。在大多数情况下，仅仅通过div标签和CSS的配合即可完成页面的布局，也难怪很多人称Web标准页为“Div CSS”网页了。
11.1.2 XHTML中的块状元素和内联元素
上一节提到了XHTML的布局核心标签是div，并且div属于XHTML中的块级元素。XHTML的标签默认为2种元素。
（1）块状元素。该元素是矩形的，有自己的高度和宽度。默认情况下，在父容器中占据一行，同一行无法容纳其他元素及文本。其他的元素将显示在其下一行，可以看做被块级元素“挤”下去的。块状元素就是一个矩形容器，边缘非常硬，CSS设置了高度和宽度后，形状无法被改变。
（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所示。
初学者简单学习CSS网页布局
图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的解析方式有差异，在后面将详细讨论解决办法，以解决浏览器的兼容性问题。
初学者简单学习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属性代表对象的内边距，也叫填充（上、下、左、右）。

— 说明：margin属性和padding属性类似于表格单元格的cellspacing属性和cellpadding属性，不过margin属性和padding属性作用于所有块状元素。

使div元素水平居中的方法有多种，常用的方法是用CSS设置div的左右边距，即margin-left属性和margin-right属性。当设置div左外边距和右外边距的值为auto，即自动时，左外边距和右外边距将相等，即达到了div水平居中的效果。在D:\web\目录下创建网页文件（XHTML1.0），命名为div_align.htm，编写div_align.htm文件代码如代码11.5所示。

代码11.5 设置div水平居中：div_align.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">
*{margin:0px;
padding:0px;
}
#all{width:75%;
height:200px;
background-color:#eee;
border:1px solid #000;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="all">布局页面内容</div>
</body>
</html>
为了更方便看到div的表现，笔者给div设置了浅灰色背景色和黑色边框，在浏览器地址栏输入http://localhost/div_align.htm，浏览效果如图11.5所示。
是不是很简单？设置外边距的CSS代码可以进一步简化，使用margin属性，编写方法为：
margin:0px auto;
初学者简单学习CSS网页布局
图11.5 设置div水平居中
margin属性值前面的0代表上边距和下边距为0像素，auto代表左边距和右边距为auto，即自动设置。读者注意，0px和auto之间使用空格符号分隔，而不是逗号。还有一种方法是使用html或body的text-align属性，设置其值为center，即所有对象将居中。这样将导致页面文本居中，所以不作推荐，其编写方法为：
html,body{text-align:center;}
上一页12 3 下一页 阅读全文
标签：
网页,布局,学习,简单,学者,div,<,",>,元素,/div>
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接