亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

這節的這個問題到底怎么解決?

任務

任務1:完成頂部(top)、底部(foot)寬度自適應

任務2:中間分為2兩欄,其中,左側(left)寬度為200px, 右側(right)寬度自適應

任務3:要求右側(right)先加載,左側(left)后加載

任務4:編寫的代碼要兼容ie6


<!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;}

.left{ width:200px; height:500px; background:blue; }

.right{ margin-left:210px;height:500px; background:#9C9;}

.foot{ height:50px;background:#f63;}

</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>


正在回答

1 回答

<!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:70px; background:gray;}

.main{height:420px; background:red;}

.left{ width:200px; height:420px; background:blue; float:left;}

.right{height:420px; background:green; float:right; padding-right:771px;}

.foot{height:35px; background:orange;}

</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>

寫完后點擊“全屏”觀察效果。

0 回復 有任何疑惑可以回復我~
#1

慕蓋茨5114537 提問者

非常感謝!
2016-04-12 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
如何用CSS進行網頁布局
  • 參與學習       209566    人
  • 解答問題       1206    個

用最簡潔的案例教你布局的那些知識,這是前端工程師基本技能

進入課程

這節的這個問題到底怎么解決?

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號