<div>手绘页面布局(上下左右中)

最新推荐文章于 2024-02-27 16:25:30 发布

teamlet

最新推荐文章于 2024-02-27 16:25:30 发布

阅读量1.1w

点赞数 1

分类专栏： CSS 文章标签： layout 布局 html xhtml css

本文链接：https://blog.csdn.net/teamlet/article/details/42272867

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、空白页面

 
<!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>
</head>
<body>
</body>
</html>

2、添加6个 div 标签

 
<!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>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</body>
</html>

3、将页面划分为五个部分：banner、left、center、right、bottom，在加上页面本身共6个<div>标签。

页面id定义为 page_container，和其他五个id是父子关系。

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

</style>
</head>
<body>
<div id="page_container">
	<div id="banner">2</div>
	<div id="left">3</div>
	<div id="center">4</div>
	<div id="right">5</div>
	<div id="bottom">6</div>
</div>
</body>
</html>

4、添加CSS约束的框架

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

 div { background-color:#fff; background-color:#fff;border: 1px solid #000;margin:5px;}
 #page_container { }
 #banner { }
 #left { }
 #center { }
 #right { }
 #bottom { }
</style>
</head>
<body>
<div id="page_container">
	<div id="banner">2</div>
	<div id="left">3</div>
	<div id="center">4</div>
	<div id="right">5</div>
	<div id="bottom">6</div>
</div>
</body>
</html>

5、添加每一个id的位置和范围

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

 div { background-color:#fff; background-color:#fff;border: 1px solid #000;margin:5px;}

 #page_container {
    border: 0px;
 	width:90%;
 	margin:0 auto;
 	text-align:left;
 }
 #banner {
 	height:70px; 	
 }
 #left {
 	width:200px;
 	height:459px;
 	float:left;
 }
 #center {
 	width:60%;
 	height:259px;
	 float:left;
 }

  #right {
 	float:right;
 	width:200px;
 	height:450px;
 }
 #bottom {
 	clear:both;
 	height:50px;
 }
</style>
</head>
<body>
<div id="page_container">
	<div id="banner">2</div>
	<div id="left">3</div>
	<div id="center">4</div>
	<div id="right">5</div>
	<div id="bottom">6</div>
</div>
</body>
</html>

这样一个页面布局就完成了。

teamlet

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
<div>手绘页面布局(上下左右中)

1、空白页面我的文件夹 2、添加6个 div 标签我的文件夹123456 3、将页面划分为五个部分：banner、left、center、right、bottom，在加上页面本身共6个标签。页面id定义为 page_container，和其他五个id是父子关系。我的文件夹 2 3 4 5 6 4、添加
复制链接

扫一扫