网页的基本结构
新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Div+CSS网页布局项目实战:页面布局与规划|www.125jz.com</title> </head> <body> </body> </html>
将其命名为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}
把以上文件保存,用浏览器打开,我们可以看到页面的基本结构了。
125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2371.html