DIV CSS浮动属性

最新推荐文章于 2023-06-30 15:03:19 发布

yanli_xu

最新推荐文章于 2023-06-30 15:03:19 发布

阅读量2k

点赞数

分类专栏： WEB前端开发文章标签： div css class xhtml header html

本文链接：https://blog.csdn.net/yanli_xu/article/details/7633825

版权

WEB前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<title>网页布局</title>
<style type="text/css">
.clear {
	clear:both;
	height:0;
	font-size:0;
	line-height:0;
}
.header, .container, .footer {
	width:900px;
	margin:0 auto;
}
.header, .footer {
	background-color:#6C6;
	height:120px;
}
.container {
	margin:10px auto;
	background-color:#fff;
}
.container .main {
	background-color:#ffa;
	width:590px;
	margin-right:10px;
	float:left;
}
.container .sidebar {
	background-color:#9c6;
	width:300px;
	float:right;
}

.container .content {
	background-color:#ffa;
	width:600px;
	float:left;
}
.content .box{
	background-color:#CF9;
	width:290px;
	height:50px;
	margin-right:10px;
	margin-bottom:10px;
	float:left;
	
	display:inline;/*避免IE6双倍边距bug*/
}
</style>
</head>

<body>

<div class="header">
  <div class="nav">我是导航</div>
</div>
<div class="container">
  <div class="main">我是正文区域</div>
  <div class="sidebar">我是侧边栏 呵呵<br />导航<br />推荐</div>
  <div class="clear"></div>
</div>
<div class="footer"> 我的尾部内容 </div>
<hr />
<div class="container">
	<div class="content">
  	<div class="box">一个</div>
    <div class="box">二个</div>
    <div class="box">三个</div>
    <div class="box">四个</div>
  </div>
	<div class="sidebar">我是侧边栏<br />我是侧边栏<br />我是侧边栏<br />我是侧边栏<br />我是侧边栏<br />我是侧边栏<br />我是侧边栏</div>
  <div class="clear"></div>
</div>
<div class="footer"> 我的尾部内容 </div>
<hr />
<div class="container">
	<div class="content">
  	<div class="box">一个</div>
    <div class="box">二个</div>
    <div class="box">三个</div>
    <div class="box">四个</div>
  </div>
	<div class="sidebar">我是侧边栏<br />我是侧边栏<br />我是侧边栏<br />我是侧边栏<br />我是侧边栏<br />我是侧边栏<br />我是侧边栏</div>
</div>
<div class="footer">我的尾部内容</div>

</body>
</html>

yanli_xu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DIV CSS浮动属性

网页布局.clear { clear:both; height:0; font-size:0; line-height:0;}.header, .container, .footer { width:900px; margin:0 auto;}.header, .footer { background-color:#6C6; height:120px;}.conta
复制链接

扫一扫

专栏目录