三行一列固定高度

2017-06-13 12:16:00
admin
原创
360
<!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=utf-8" />
<title>三行高度固定</title>
<style type="text/css">
body,td,th {
	font-size: 9pt;
}
body {
	margin-left: 0px; /*指定左上右下的页边距都是0px*/
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #060; /*指定页面的背景颜色*/
}
/*容器DIV的样式设置,这里设置为自适应宽度*/
#container {
	width: 90%;       /*容器的宽度80%*/
	max-width: 1260px;/*设置最大宽度 */
	min-width: 700px; /*设置最小宽度 */		
	margin:0px auto;  /*容器自动居中显示*/
	background:#FFF;  /*容器的背景颜色*/
	height:500px;     /*容器的高度*/
}
/*页眉的背景图片,保持与Logo的背景一致*/
#header {
	background-image: url(images/angelbabybg.gif);
	border-bottom-width: 1px;
	border-bottom-style:dashed;
	border-bottom-color: #006;
}
/*正文部分,其高度是容器高度-页眉-内外边距-页脚-页脚内外边距*/
#content {
	padding: 10px 5px;
	height:350px;
}
/*页脚定义*/
#footer {
	height:20px;
	text-align:center;
	padding: 5px 0;
	background-color: #CCC49F;
}
</style>
</head>
<body>
<!--容器,用来设置自适应宽度-->
<div id="container">
  <!--页眉,放置Logo-->
  <div id="header"><img src="http://www.ybao.org/data/upload/201704/f_64eb615d0d290ebfc72e3069294f9a04.png" width="300" height="100" /></div>
  <!--内容区域-->  
  <div id="content">
    <h2>DIV和CSS常见布局结构</h2>
    <p>这一章将来学习一些常见的DIV+CSS的布局结构,通过常握这些布局的控制方式,可以巩固在这一章前面2小节中学到的关于布局的一些知识。这些布局也是目前在网站建设中普遍使用的主流布局方式。</p>
    <p><img src="http://www.ybao.org/data/upload/201705/f_f98e04fa9ff2aed692bebb9f6c0be82e.jpg" alt="" width="109" height="112" /></p>
    <h3>三行一列固定高度</h3>
    <p>所谓一列固定宽度居中,是指内容显示在网页的中间位置,并且内容的大小固定,不会随着浏览器作口大小的调整而变化,是最基础的布局方式。在表格式布局的时代,一列固定宽度主要使用一个align属性为center的&lt;table&gt;标签来实现,通常用来实现网站的大的框架结构,本节将演示如何用CSS来实现这个布局。</p>
  </div>
  <!--页脚,版权和备案区域-->    
  <div id="footer">版权&copy;所有,翻录必穷</div>
</div>
</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227