【Java Web基础】(四)学习使用DIV+CSS布局界面

从课本上第一次学习如何进行DIV+CSS布局界面，中间一层的盒子是连续嵌套的，嵌套的逻辑有学习到

HTML文件中的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>冲冲冲</title>

<style type="text/css">
	@import url("Myfirst.css");
</style>

</head>
<body>
	<div class="header">header</div>
	<div class="contain">
		<div class="mainbg">
			<div class="right">
				<div class="text">
					right<br>
					1<br>
					1<br>
					1<br>
					1<br>
					1
				</div>
			</div>
			<div class="left">
				<div class="text">
					left
				</div>
			</div>
		</div>	
	</div>
	<div class="footer">footer</div>
</body>
</html>

CSS中的代码：

@charset "UTF-8";
body{
    
    
	background:#999;
	text-align:center;
	color:#333;
	font-family:arial,verdana,sana-serif;
}
.header{
    
    
	width:776px;
	margin-right:auto;
	margin-left:auto;
	padding:0px;
	background:#EEE;
	height:60px;
	text-align:left;
}
.contain{
    
    
	margin-left:auto;
	margin-right:auto;
	width:776px;
}
.mainbg{
    
    
	width:776px;
	padding:0px;
	background:#60A179;
	float:left;
}
.right{
    
    
	float:right;
	margin:2px 0px 2px 0px;
	padding:0px;
	width:574px;
	background:#ccd2de;
	text-align:left;
}
.left{
    
    
	float:left;
	margin:2px 2px 0px 0px;
	padding:0px;
	background:#F2F3F7;
	width:200px;
	text-align:left;
}
.footer{
    
    
	clear:both;
	width:776px;
	margin-right:auto;
	margin-left:auto;
	padding:0px;
	background:#EEE;
	height:60px;
}
.text{
    
    
	margin:0px;
	padding:20px;
}

在这里插入图片描述中间的嵌套逻辑：
contain<–mainbg(图中的抹茶绿的那一点就是用background来设置的)<–right&&left
right和left中又分别嵌套了一个text

【Java Web基础】(四)学习使用DIV+CSS布局界面

猜你喜欢