点击这里给我发消息 点击这里给我发消息

网页设计基础:Div+CSS布局入门教程

添加时间:2012-1-17
    相关阅读: 网页设计 网页 设计 页面 HTML CSS 框架

">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css.css" _fcksavedurl=""css.css"" rel="stylesheet" type="text/css" />
</head>

<body>
</body>
</html>

  这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。

  下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:

<div id="container">[color=#aaaaaa]<!--页面层容器-->[/color]
  <div id="Header">[color=#aaaaaa]<!--页面头部-->[/color]
  </div>
  <div id="PageBody">[color=#aaaaaa]<!--页面主体-->[/color]
    <div id="Sidebar">[color=#aaaaaa]<!--侧边栏-->[/color]
    </div>
    <div id="MainBody">[color=#aaaaaa]<!--主体内容-->[/color]
    </div>
  </div>
  <div id="Footer">[color=#aaaaaa]<!--页面底部-->[/color]
  </div>
</div>

  为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:

  /*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

  /*页面层容器*/
#container {width:100%}

  /*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

  /*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

  /*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。

关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):

1、请养成良好的注释习惯,这是非常重要的;

2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;

3、讲解一些常用的CSS代码的含义:

font:12px Tahoma;

咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册