JiangBo_Liu 博客

志在山顶的人,不会贪念山腰的风景…

《使用CSS格式化布局——页面布局》

/* (程序头部注释开始)
* 程序的版权和版本声明部分
* Copyright (c) 2011, 烟台大学计算机学院学生
* All rights reserved.
* 文件名称:   《使用CSS格式化布局——页面布局》                          
* 作    者:       刘江波                      
* 完成日期:    2013     年    10   月    23    日
* 版 本 号:    v1.2     

* 对任务及求解方法的描述部分
* 问题描述: 
* 程序头部的注释结束
*/

源代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	<!--
	body{background:#ffcc99;}
	#header{margin:0px auto;width:1000px;height:100px;background:#FFFFCC;}
	#menu{margin:5px auto;width:1000px;height:30px;line-height:30px;color:#99FF99;
		  font-weight:bold;font-size:14px;background:#6699FF;}
    #content{margin:5px auto;width:1000px;height:400px;background-color:#cccccc;}
	.content_left{float:left;width:200px;height:400px;background:#cc99ff;}
	.content_center{float:left;width:590px;height:400px;margin-left:5px;background:#cc99ff;}
	.content_right{float:left;width:200px;height:400px;margin-left:5px;background:#cc99cc}
	  
	#footer1{margin:5px auto;background-color:#5185E6;color:#FFFFFF;
			border-top:0px solid #F7F7F6;height:30px;line-height:30px;
			width:1000px;padding:5px 0;text-align:center;}

	#footer2{margin:5px auto;background-color:#3333FF;color:#FFFFFF;
			border-top:0px solid #F7F7F6;height:30px;line-height:30px;
			width:1000px;padding:5px 0;text-align:center;}

	a{
		text-decoration:none;
	} 

	-->
  </style>
 </head>
	
 <body>
  <div id="header">页面头部</div>
	<div id="menu">
	页面导航
		<tr>
		<td>
		<a href="" target="_blank"  >首页    <a href="" target="_blank" >日志    <a href="" target="_blank" >相册    <a href="" target="_blank" >留言板    <a href="" target="_blank" >状态
		</td>
		</tr>
	</div>
	<div id="content">
		<div class="content_left">左侧栏</div>
       		<div class="content_center">中间内容</div>
		<div class="content_right">右侧栏</div>
	</div>
	<div id="footer1">滚动信息栏</div>
	<div id="footer2">底部</div>
 </body>
</html>


实现效果:

阅读更多
想对作者说点什么? 我来说一句

dream表格布局

2011年11月29日 1.19MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭