您的位置：首页 > Web前端 > CSS

CSS+DIV学习笔记——页面布局

2012-07-15 10:45 459 查看

最近重新开始学习网页设计，在之前的HTML跟DW的基础之上，我决定从目前通用的CSS布局开始学习。在此记录的目的有三点：第一便于自己记录；第二有利于系统掌握知识；最重要的第三能跟大家一起交流，互相学习。好的，先从页面布局开始学习吧。
首先谈一下页面分辨率，就目前情况来看，绝大多数的显示器已经是1024*768及以上分辨率，所以页面制作时候无需考虑800*600的宽度了（个人见解）。那么在1024的宽度的情况下，我们的页面大小设置多少呢？900像素，950像素，960像素，或者更高？作为一个新手，本人实在不知如何是好，所以就选择960像素的，至于为什么这样，权当自己的一个习惯吧。

页面大小确定之后，然后就要谈谈浏览器的问题，本人所用浏览器为IE6+ chrome，其他兼容性问题，目前还不曾涉猎。

下面本人将制作一个三行二列的层布局页面，让大家一起来交流。效果图：

代码如下：

<!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" />

<style type="text/css">

body{ font:Arial, Helvetica, sans-serif 13px;}/*设置页面整体属性*/

#container{ margin:0 auto; padding:0; width:960px; height:600px; background:#99FF00;}/*宽度为960的容器层*/

#header{ margin:0; padding:0; width:960px; height:90px; background:#990000;}/*头部*/

#content{ margin:0; padding:0; width:960px; height:400px; background:#003399;}/*主体内容*/

#leftside{ width:260px; height:380px; background:#CC6699; float:left;}

#maincon{ width:700px; height:380px; background:#FF6633; float:left;}

#footer{ margin:0; padding:0; height:60px; background:#990000;}/*低部*/

</style>

<title>层布局三行二列</title>

</head>

<body>

<div id="container">

<div id="header">此处显示 id "header" 的内容</div>

<div id="content">此处显示 id "content" 的内容

<div id="leftside">此处显示 id "leftside" 的内容</div>

<div id="maincon">此处显示 id "maincon" 的内容</div>

</div>

<div id="footer">此处显示 id "footer" 的内容</div>

</div>

</body>
</html>

一个容器层，container,然后里面三个横向层：header content footer。

在内容层content下俩个纵向层 leftside maincon，设置等高浮动向左。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航