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

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

正在回答

4 回答

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

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

豬豬的笨笨 提問者

恩，謝謝
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{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>


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

對，剛開始調試是用float，忘記去掉了

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

豬豬的笨笨 提問者

恩恩 0.0
2016-03-07 回復 有任何疑惑可以回復我~

<!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好像不自適應吧

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

豬豬的笨笨 提問者

我剛剛又看了一遍，的確是錯的。他那個可以修改一下：把body中的兩個子div調換順序，同時把right的float和width屬性去掉就好了。
2016-03-05 回復 有任何疑惑可以回復我~
#2

豬豬的笨笨 提問者

你的foot的clear屬性可以去掉哦，因為，沒有float屬性，就不需要clear屬性。嘿嘿~
2016-03-05 回復 有任何疑惑可以回復我~

舉報

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

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

進入課程

錦囊是錯的，請更正

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

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

 幫助反饋 APP下載

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

 公眾號

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