锦囊是错的,请更正
锦囊是错的,请更正
锦囊是错的,请更正
2016-03-03
<!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 type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{
width:100%;
height:100px;
background-color:#CCC;
}
.main{
width:;
height:500px;
background-color:#F00;
}
.left{
width:200px;
height:500px;
background-color:#03C;
position:absolute;
left:0;
top:100;
}
.right{
width:99%;
height:500px;
background-color:#9C9;
float:left;
margin-left:205px;
}
.foot{
width:100%;
height:70px;
background-color:#C60;
clear:both;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
<!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 type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px;background:#ccc;}
.main{height:800px;width:100%;background:red;position:relative;}
.left{width:200px;height:800px; background:blue;float:left;}
.right{height:800px;background:#9FC;position:absolute;left:220px;}
.foot{height:100px;background:#F90;clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right本right才是自适应好本right才是自适应好吗本right才是自适应好吗本right才是自适应好吗本right才是自适应好吗吗本right才是自适应好吗,别误导学院啊</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
<!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 type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff;}
.top{height:100px;background:#ccc;margin:0 auto;}
.main{height:500px;background:#f00;}
.left{width:200px;height:500px;;background:blue;position:absolute;left:0;top:100px;}
.right{height:500px;background:green;margin-left:205px;}
.foot{width:100%;background:red;margin:0 auto;clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样,我们将网页看作
一张报纸,一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于
学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本
原理是共通的,你可以领会要点,举一反三。</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
楼上right好像不自适应吧
举报