从课本上第一次学习如何进行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