CSS简单的页面布局实例

最新推荐文章于 2023-05-22 18:25:58 发布

AKDash

最新推荐文章于 2023-05-22 18:25:58 发布

阅读量3.9k

点赞数 3

分类专栏： HTML&CSS

本文链接：https://blog.csdn.net/ALL_Dash/article/details/9733609

版权

HTML&CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

不错很简单的例子.新手入门用：

index.html

<html>
	<head>
		<title>DIV+CSS简单的页面布局示例</title>
		<link rel="stylesheet" href="class.css" type="text/css" />
	</head>
	<body>
		<div id="container">
			<div id="header">
				<div id="logo" class="bgcolor">LOGO</div>
				<div id="banner">
					<div id="left" class="bgcolor">BANNER1</div>
					<div id="right" class="bgcolor">BANNER2</div>
				</div>
			</div>
			<div class="nav"> </div>
			<div id="menu" class="bgcolor">水平导航条</div>
			<div class="nav"> </div>
			<div id="content">
				<div class="left_box border">栏目（一）</div>
				<div class="right_box border">栏目（二）</div>
				<div class="nav"> </div>
				<div class="left_box">
					<div class="left border">栏目（三）</div>
					<div class="right border">栏目（四）</div>
				</div>
				<div class="right_box">
					<div class="left border">栏目（五）</div>
					<div class="right border">栏目（六）</div>
				</div>
			</div>
			<div id="sidebar">
				<div class="bar border">栏目（七）</div>
				<div class="nav"> </div>
				<div class="bar border">栏目（八）</div>
				<div class="nav"> </div>
				<div class="bar border">栏目（九）</div>
			</div>
			<div class="nav"> </div>
			<div id="footer" class="bgcolor">页脚</div>
		</div>
	</body>
</html>

class.css

/* CSS Document */

body{
	margin:0;
	padding:0;
	text-align:center;
	font:12px Arial,宋体;	
}

.border{
	border:1px solid #888;
}

.bgcolor{
	background:#DDD;
}

#container{
	width:960px;
	margin:0 auto;
}

#header{
	float:left;
	width:100%;
}

#logo{
	float:left;
	width:200px;
	height:80px;
}

#banner{
	float:right;
	width:750px;
}

#banner #left{
	float:left;
	width:540px;
	height:80px;
}

.nav{
	float:left;
	height:10px;
	width:100%;
	overflow:hidden;
	clear:both;
}

#banner #right{
	float:right;
	width:200px;
	height:80px;
}

#menu{
	float:left;
	width:100%;
	height:30px;
}

#sidebar{
	float:right;
	width:200px;
	height:410px;
}

#sidebar .bar{
	float:left;
	width:100%;
	height:130px;
}

#content{
	float:left;
	width:750px;
}

#content .left_box{
	float:left;
	width:370px;
	height:200px;
}

#content .right_box{
	float:right;
	width:370px;
	height:200px;
}

#content .left{
	float:left;
	height:200px;
	width:180px;
}

#content .right{
	float:right;
	height:200px;
	width:180px;
}

#footer{
	float:left;
	width:100%;
	height:60px;
}