快速业务通道

初学者简单学习CSS网页布局

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03
,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 {

    bac

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号