DIV+CSS网络布局

最新推荐文章于 2024-04-26 15:21:52 发布

mango_bobo

最新推荐文章于 2024-04-26 15:21:52 发布

阅读量419

点赞数

分类专栏： javaweb CSS 文章标签： Javaweb_DIV+CSS布局

本文链接：https://blog.csdn.net/weixin_43801116/article/details/102556005

版权

javaweb 同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

代码块1

	<html>
	<head>
	<meta></meta>
	<title>一列布局</title>
	<style type="text/css">
		body,h1{
			margin:0;
			padding:0; 
			text-align:center;
		}
		.header{
			background-color:#000;
			color:#FFF;
			text-align:center;
			margin:0 auto;
			width:80%;
			height:700px;
		}
		.main{
			background-color:#666;
			color:#FFF;
			margin:0 atuo;
			width:80%;
			height:700px;
		}
		.foot{
			background-color:#000;
			color:#FFF;
			margin:0 atuo;
			width:80%;
			height:150px;
		}
	</style>
	</head>
	<body>
		<div class="header"><h1>页面头部信息</h1>
		<div class="main"><h1>页面主要内容</h1></div>
		<div class="foot"><h1>版权信息</h1></div>
	</body>
	</html>

代码块2

	<html>
	<head>
	<meta></meta>
	<title>两列布局</title>
	<style type="text/css">
		body,h1{
			margin:0;
			padding:0; 
			text-align:center;
		}
		.left{
			float:left;
			background-color:#000;
			color:#FFF;
			width:30%;
			height:300px;
		}
		.right{
			float:right;
			background-color:#CCC;
			color:#FFF;
			width:70%;
			height:300px;
		}
		.foot{
			background-color:#000;
			color:#FFF;
			margin:0 atuo;
			width:80%;
			height:150px;
		}
		.main{width:90%;margin:0 auto;}
	</style>
	</head>
	<body>
		<div class="main">
		<div class="left"><h1>LOGO</h1></div>
		<div class="right"><h1>用户信息</h1></div>
		</div>
	</body>
	</html>

代码块3

	<html>
	<head>
	<meta></meta>
	<title>三列布局</title>
	<style type="text/css">
		body,h1{
			margin:0;
			padding:0; 
			text-align:center;
			color:#FFF;
		}
		.left{
			float:left;
			background-color:#000;
			color:#FFF;
			width:30%;
			height:300px;
		}
		.right{
			float:right;
			background-color:#CCC;
			color:#FFF;
			width:30%;
			height:300px;
		}
		.middle{
			float:middle;
			background-color:#CCC;
			color:#FFF;
			width:40%;
			height:300px;
		}
		.foot{
			background-color:#000;
			color:#FFF;
			margin:0 atuo;
			width:80%;
			height:150px;
		}
		.main{width:90%;margin:0 auto;}
	</style>
	</head>
	<body>
		<div class="main">
		<div class="left"><h1>左边</h1></div>
		<div class="middle"><h1>中间</h1></div>
		<div class="right"><h1>右边</h1></div>
		</div>
	</body>
	</html>

代码块4

	<head>
	<meta></meta>
	<title></title>
	<style type="text/css">
		body,h1{margin:0;padding:0;color:#FFF;}
		.top{background:#000; width:100%; weight:100px;}
		.top_main{margin:0 auto;width:900px; height:100px;}
		.top_left{float:left; width:200px;background-color:#00C;height:100px;}
		.top_right{float:right; width:200px;background-color:#0CC;height:100px;}
		.nav{margin:0 auto; width:900px; height:50px; background:#999;}
		.left{
			float:left;
			background-color:#000;
			color:#FFF;
			width:30%;
			height:300px;
		}
		.right{
			float:right;
			background-color:#CCC;
			color:#FFF;
			width:30%;
			height:300px;
		}
		.middle{
			float:middle;
			background-color:#CCC;
			color:#FFF;
			width:40%;
			height:300px;
		}
		.main{width:900px; height:300px;margin:0 auto;}
		.foot{margin:0 auto; width:900px; height:200px; background:#000; color:#FFF}
	</style>
	</head>
	<body>
		<!-----头部---->
		<div class="top">
			<div class=“top_main”>
				<div class="top_left"><h1>LOGO</h1></div>
				<div class="top_right"><h1>头部信息</h1></div>
			</div>
		</div>
		<!---导航---->
		<div class=""><h1>页面导航</h1></div>
		<!-----主要内容---->
		<div class="main">
			<div class="left"><h1>左边</h1></div>
			<div class="middle"><h1>中间</h1></div>
		<div class="right"><h1>右边</h1></div>
		</div>
		<!---版权信息---->
		<div class="foot"><h1>版权信息</h1></div>
	</body>