<!DOCTYPE html>
<html>
<head>
<title>单列布局</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
.top{
width:100%;
height:100px;
background: #ccc;
line-height: 100px;
}
.main,.footer{
width:960px;
margin:0 auto;
}
.main{
height:400px;
background: #fcc;
}
.left{
width:300px;
height:100%;
background: #fcfdef;
float:left;
}
.right{
width:660px;
height:100%;
background: #feefef;
float:right;
}
.right .zb{
height:100%;
background: #dfefdf;
float:left;
margin:0 auto;
max-width: 78%;
text-align:left;
}
.right .yb{
width:20%;
height:100%;
background: #ff00df;
float:right;
}
.footer{
height:80px;
background:#9cf;
line-height: 80px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="zb">
中国大学MOOC（慕课） 是爱课程网携手网易云课堂打造的在线学习平台，每一个有提升愿望的人，都可以在这里学习中国最好的大学课程，学完还能获得认证证书。
</div>
<div class="yb">
</div>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
<html>
<head>
<title>单列布局</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
.top{
width:100%;
height:100px;
background: #ccc;
line-height: 100px;
}
.main,.footer{
width:960px;
margin:0 auto;
}
.main{
height:400px;
background: #fcc;
}
.left{
width:300px;
height:100%;
background: #fcfdef;
float:left;
}
.right{
width:660px;
height:100%;
background: #feefef;
float:right;
}
.right .zb{
height:100%;
background: #dfefdf;
float:left;
margin:0 auto;
max-width: 78%;
text-align:left;
}
.right .yb{
width:20%;
height:100%;
background: #ff00df;
float:right;
}
.footer{
height:80px;
background:#9cf;
line-height: 80px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="zb">
中国大学MOOC（慕课） 是爱课程网携手网易云课堂打造的在线学习平台，每一个有提升愿望的人，都可以在这里学习中国最好的大学课程，学完还能获得认证证书。
</div>
<div class="yb">
</div>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
