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

最新推荐文章于 2022-03-04 23:13:26 发布

刘江波2011

最新推荐文章于 2022-03-04 23:13:26 发布

阅读量6.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：网页设计与开发 HTML+CSS+JS 文章标签：格式化布局 css 源代码 html

本文链接：https://blog.youkuaiyun.com/sdliujiangbo/article/details/16820799

网页设计与开发 HTML+CSS+JS 专栏收录该内容

9 篇文章

订阅专栏

本文通过一个实例详细介绍了如何使用CSS进行网页布局，包括设置背景颜色、元素尺寸和位置等。通过浮动元素来创建三栏布局，并定义了页眉、导航菜单、内容区域及页脚样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

源代码：

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

实现效果：