快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03
滚动条。

 

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

 

页面布局宽度一般考虑最小显示分辨率的浏览用户,即过去浏览用户的显示分辨率最小为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

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站: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号