Java Web开发–网页篇[6]–布局

本篇实现一个上标题栏,下版权声明,中间左侧菜单栏,中间右侧内容区域的最常用的、灰常简单的网页布局,依然是借助于CSS实现布局。
整体思路上:
1,先设计html部分,有四个区域的div,分别命名为titile、copyright、menu、content。代码如下:

<html>
<head>
<style type="text/css">
	
</style>
</head>
<body>
<div id="title">猫哥的个人主页
</div>
<div id="menu">菜单区
</div>
<div id="content">主要内容
</div>
<div id="copyright">版权所有:猫哥
</div>
</body>
</html>

哎,稍微的自恋下,这段代码是多么的干净优雅…,一点杂质都么的有,英文单词的选择是那么的流畅舒适(哈哈,猫哥全是蹩脚的Chinese English,见笑见笑)。
2,好的,菜单区域,得有几个菜单选项,而且最好是换行的(区分的比较明显),换行用div就行,所以修改如下:

<html>
<head>
<style type="text/css">
	
</style>
</head>
<body>
<div id="title">
    猫哥的个人主页
</div>
<div id="menu">
     菜单区
	<div>猫哥个人介绍</div>
	<div>猫哥的文章</div>
	<div>猫哥的评论</div>
	<div>猫哥的回复</div>
</div>
<div id="content">
    主要内容
</div>
<div id="copyright">
    版权所有:猫哥
</div>
</body>
</html>

3,好,然后为了给每个div定义位置和样式,编辑style区域,使用#和id选定标签,修改后如下:

<html>
<head>
<style type="text/css">
	#title{}
	#menu{}
	#content{}
	#copyright{}
</style>
</head>
<body>
<div id="title">
	猫哥的个人主页
</div>
<div id="menu">
	菜单区
	<div>猫哥个人介绍</div>
	<div>猫哥的文章</div>
	<div>猫哥的评论</div>
	<div>猫哥的回复</div>
</div>
<div id="content">
	主要内容
</div>
<div id="copyright">
	版权所有:猫哥
</div>
</body>
</html>

4,为了明显的区分区域,猫哥给四块区域设置上不同的背景颜色哦,背景颜色在CSS语言里使用background-color:#XXXXXX来描述,其中XXXXXX表示颜色的值(很多漂亮的颜色可以用取色器取值哦,所以猫哥就取了几个:#7CFC00、#7CCD7C、#008B8B、#9370DB)。好的,改为以下代码:

<html>
<head>
<style type="text/css">
	#title{background-color:#7CFC00;}
	#menu{background-color:#7CCD7C;}
	#content{background-color:#008B8B;}
	#copyright{background-color: #9370DB;}
</style>
</head>
<body>
<div id="title">
	猫哥的个人主页
</div>
<div id="menu">
	菜单区
	<div>猫哥个人介绍</div>
	<div>猫哥的文章</div>
	<div>猫哥的评论</div>
	<div>猫哥的回复</div>
</div>
<div id="content">
	主要内容
</div>
<div id="copyright">
	版权所有:猫哥
</div>
</body>
</html>

这样,一下子整个网页变得绚烂多彩了,哈哈
5,最后,要实现最重要的一步,那就是布局,掌握这几个CSS语法就行。height:100px;width:100px;float:left;text-align:center;。它表示高度100像素、宽度100像素,靠左漂浮(float),文字靠中间排列(align)。所以咱结合这几个CSS语法这样设计:

<html>
<head>
<style type="text/css">
	#title{background-color:#7CFC00;text-align:center;}
	#menu{background-color:#7CCD7C;height:300px;width:200px;float:left;}
	#content{background-color:#008B8B;height:300px;width:300px;float:right;"}
	#copyright{background-color: #9370DB;text-align:center;}
</style>
</head>
<body>
<div id="title">
	猫哥的个人主页
</div>
<div id="menu">
	菜单区
	<div>猫哥个人介绍</div>
	<div>猫哥的文章</div>
	<div>猫哥的评论</div>
	<div>猫哥的回复</div>
</div>
<div id="content">
	主要内容
</div>
<div id="copyright">
	版权所有:猫哥
</div>
</body>
</html>

感觉这下可行了吧,哈哈,运行下代码发现效果如图:
这里写图片描述
首先,输出了title部分,然后换行,没问题。
然后,菜单栏menu居左,内容栏content居右,也没问题。
然后左右一共占用200+300=500px像素,浏览器此时宽度>500px,中间是空闲的,所以继续输出的copyright部分就放在中间。
6,那要想实现版权部分在最下面咋办,其实很简单,不是一共500吗,我限定死一行就500宽不就完了,代码如下:

<html>
<head>
<style type="text/css">
	#title{background-color:#7CFC00;text-align:center;}
	#menu{background-color:#7CCD7C;height:300px;width:200px;float:left;}
	#content{background-color:#008B8B;height:300px;width:300px;float:right;"}
	#copyright{background-color: #9370DB;text-align:center;}
	#body{width:500px;}
</style>
</head>
<body>
<div id="body">
	<div id="title">
		猫哥的个人主页
	</div>
	<div id="menu">
		菜单区
		<div>猫哥个人介绍</div>
		<div>猫哥的文章</div>
		<div>猫哥的评论</div>
		<div>猫哥的回复</div>
	</div>
	<div id="content">
		主要内容
	</div>
	<div id="copyright">
		版权所有:猫哥
	</div>
</div>
</body>
</html>

哈哈,简直就是完美,通过把所有区域放在总区域body中,然后限定body宽度500px,这样菜单区和内容区占满了一行,最后的版权区域只能再往下输出啦。但是好像如果整个body部分放在中间就好了,不要紧,再改下#body部分为#body{width:500px;align:center;margin:0px auto;},就实现了,至于为啥margin了一下就居中了,提示下,margin表示外边距,0px表示上下都为0,auto表示左右自动调整。自动这个就厉害了,灰常厉害,在很多应用里,居中是需要计算来实现的,多谢CSS语言,它跟浏览器的沟通是那么自然,让网页一端简单了许多!

网页篇到此结束了,下面开始另一段旅程!


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页