                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

我的代码。。。。。

<!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:  500px; background: red;}.left{width:200px;height: 500px; background: blue;position: absolute;left: 0;}.right{height: 500px;background:#6c8;position: absolute;left: 206px;right: 0; }.foot{height: 100px;background:#f60;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>

鸥耶

2018-09-08

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

1142

操作

收起

3 回答

weixin_慕虎7587936
2019-01-25

<html>
<head>
<title>混合布局</title>
<style type="text/css">
body{margin:0;padding:0;font-size:20px;color:#fff;}
.top{height:100px;background:#ccc;}
.main{height:500px;background:red;}
.left{width:150px;height:500px;background:blue;position:absolute;left 0;top:100px;}
.right{height:500px;background:#6c8;position:absolute:left:160px;top:100px;}
.foot{height:100px;background:#f60 clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
     <div class="left">left</div>
     <div class="right">right</div>
</main>
<div class="foot">foot</div>     
</body>
</html>

0 回复有任何疑惑可以回复我~

收起回答

慕九州6868882
2018-12-04

<!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:600px;background:red;}
.left{width:20%;height:600px;background:blue;position:absolute;left:0;top:100px;}
.right{width:78%;height:600px;background:#6c8;position:absolute;right:0;top:100px}
.foot{height:50px;background:#f60; 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>