<menu id="rqjey"><table id="rqjey"></table></menu>
<label id="rqjey"></label>
課程
/前端開發
/HTML/CSS
/網頁布局基礎
就是這個樣子，文字是在圖片上的
2016-05-21
源自：網頁布局基礎 2-3
正在回答
問題出在你的<h1>和<p>標簽是嵌套在content div里面的 ? 然后你為<div class="content">設置背景圖 ?所以圖片就顯示在了文字下面 ? 你應該單獨為圖片設置div單獨給文字設置div這樣就沒問題了
牛牛兀 提問者
Mr3927 回復 牛牛兀 提問者
背景圖片是可覆蓋的，img是不可覆蓋的?？梢酝ㄟ^增大下面一個元素的margin來分離。
用定位position標簽，等你學完絕對定位布局你就知道了，學完再做練習啊
<!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">
*{padding:0;margin:0;font-size:12px;font-family:Verdana, Geneva, sans-serif,"宋體"}
#wrap{background:skyblue;width:770px;margin:0 auto;}
a:hover{text-decoration:underline;}
#header{background:url(../%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E5%9F%BA%E7%A1%80%E8%B5%84%E6%96%99/%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E5%9F%BA%E7%A1%801/case2/images/banner.gif);
no-repeat;text-align:right;border:4px solid #badbdb;height:92px;}
#header a{margin:0 6px;color:#fff}
.content{background:url(../%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E5%9F%BA%E7%A1%80%E8%B5%84%E6%96%99/%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E5%9F%BA%E7%A1%801/case2/images/t_profile.gif) no-repeat;height:34px;}
</style>
</head>
<body>
<div id="wrap">
? ? <div id="header"><a href="#">聯系我們</a>|<a href="#">站點地圖</a></div>
? ? <div id="mainbody">
? ? <div class="content">
? ? <h1>:: 關于幾米 ::</h1>
? ? ? ? <p>幾米，一位用畫筆描繪夢想、吸引無數讀者畫迷為之瘋狂，知名度迅速竄升的當紅繪本作家，同時卻也是一個靦腆善良的中年男子，偏好簡單的居家生活，低調而淡泊。</p>
? ? ? ? ? ? ? <p>幾米的個性害羞內向，不擅長用言語表達，他用敏銳細膩的心去感受周遭的人與事，將情感、思緒藉由「繪畫」傳達他對大千世界的看法，作品風貌多變，創作力源源不絕，因此看幾米的作品，就像是走入他的內在，幾米的故事引領著每一位欣賞他作品的人看到并相信世界上的美與善，同時也反應了現代人生活中的點點滴滴，因此每個人都能在他的故事找到一個映照和寄托，或許這就是幾米作品的迷人之處。</p>
? ? ? ? ? ? ? <p>幾米，繪本作家，文化大學美術系畢業，曾在廣告公司工作十二年，后來為報紙、雜志等各種出版品畫插畫 。1998年開始創作，發表《森林里的秘密》和《微笑的魚》，拿下當年度中國時報開卷最佳童書、民生報好書大家讀年度最佳童書，以及聯合報讀書人最佳童書獎。 1999年出版《向左走．向右走》，開創出成人繪本的新型式，興起一股繪本創作風潮。本書獲選為1999年金石堂十大最具影響力的書，并已改編成電影、電視劇。之后陸續推出《聽幾米唱歌》、《月亮忘記了》、《森林唱游》、《我的心中每天開出一朵花》等作品，展現驚人的創作力和多變的敘事風格。 2001年出版《地下鐵》，獲選2002年金鼎獎推薦優良圖書，并改編成音樂劇和電影。次年《照相本子》、《1.2.3.木頭人》和《我只能為你畫一張小卡片》獲選2002年行政院新聞局推介中小學生優良課外讀物圖書類推薦讀物。2002年《布瓜的世界》甫上市便登上各大書店暢銷排行榜第一名。 2003、2004年陸續出版《幸運兒》、《你們我們他們》、《又寂寞又美好》、《履歷表》、《遺失了一只貓》等作品，內容風格上更形突破。2005年的《小蝴蝶小披風》和《失樂園》開始經營角色，多變的故事節奏有不同于以往的閱讀趣味。 作品風靡兩岸三地，美、法、德、希臘、韓、日、泰等國皆有譯本。學界和媒體多次以「幾米現象」為主題分析評論。 2003年Studio Voice雜志選為亞洲最有創意的五十五人之一。 </p>
? ? ? ? </div>
? ? </div>
? ? <div id="footer"></div>
</div>
</body>
</html>
你把放在圖片后面，然后對文字進行浮動影響的清除
不知道你的具體代碼，我覺得可以為你的單獨圖片設置div，p標簽也設置一個單獨div應該可以解決吧
舉報
讓你精通CSS中三大定位機制，徹底掌握網頁布局的相關知識
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
就是這個樣子，文字是在圖片上的就是這個樣子，文字是在圖片上的
2016-05-22
問題出在你的<h1>和<p>標簽是嵌套在content div里面的 ? 然后你為<div class="content">設置背景圖 ?所以圖片就顯示在了文字下面 ? 你應該單獨為圖片設置div單獨給文字設置div這樣就沒問題了
2016-05-23
背景圖片是可覆蓋的，img是不可覆蓋的?？梢酝ㄟ^增大下面一個元素的margin來分離。
2016-05-21
用定位position標簽，等你學完絕對定位布局你就知道了，學完再做練習啊
2016-05-21
<!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">
*{padding:0;margin:0;font-size:12px;font-family:Verdana, Geneva, sans-serif,"宋體"}
#wrap{background:skyblue;width:770px;margin:0 auto;}
a:hover{text-decoration:underline;}
#header{background:url(../%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E5%9F%BA%E7%A1%80%E8%B5%84%E6%96%99/%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E5%9F%BA%E7%A1%801/case2/images/banner.gif);
no-repeat;text-align:right;border:4px solid #badbdb;height:92px;}
#header a{margin:0 6px;color:#fff}
.content{background:url(../%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E5%9F%BA%E7%A1%80%E8%B5%84%E6%96%99/%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E5%9F%BA%E7%A1%801/case2/images/t_profile.gif) no-repeat;height:34px;}
</style>
</head>
<body>
<div id="wrap">
? ? <div id="header"><a href="#">聯系我們</a>|<a href="#">站點地圖</a></div>
? ? <div id="mainbody">
? ? <div class="content">
? ? <h1>:: 關于幾米 ::</h1>
? ? ? ? <p>幾米，一位用畫筆描繪夢想、吸引無數讀者畫迷為之瘋狂，知名度迅速竄升的當紅繪本作家，同時卻也是一個靦腆善良的中年男子，偏好簡單的居家生活，低調而淡泊。</p>
? ? ? ? ? ? ? <p>幾米的個性害羞內向，不擅長用言語表達，他用敏銳細膩的心去感受周遭的人與事，將情感、思緒藉由「繪畫」傳達他對大千世界的看法，作品風貌多變，創作力源源不絕，因此看幾米的作品，就像是走入他的內在，幾米的故事引領著每一位欣賞他作品的人看到并相信世界上的美與善，同時也反應了現代人生活中的點點滴滴，因此每個人都能在他的故事找到一個映照和寄托，或許這就是幾米作品的迷人之處。</p>
? ? ? ? ? ? ? <p>幾米，繪本作家，文化大學美術系畢業，曾在廣告公司工作十二年，后來為報紙、雜志等各種出版品畫插畫 。1998年開始創作，發表《森林里的秘密》和《微笑的魚》，拿下當年度中國時報開卷最佳童書、民生報好書大家讀年度最佳童書，以及聯合報讀書人最佳童書獎。 1999年出版《向左走．向右走》，開創出成人繪本的新型式，興起一股繪本創作風潮。本書獲選為1999年金石堂十大最具影響力的書，并已改編成電影、電視劇。之后陸續推出《聽幾米唱歌》、《月亮忘記了》、《森林唱游》、《我的心中每天開出一朵花》等作品，展現驚人的創作力和多變的敘事風格。 2001年出版《地下鐵》，獲選2002年金鼎獎推薦優良圖書，并改編成音樂劇和電影。次年《照相本子》、《1.2.3.木頭人》和《我只能為你畫一張小卡片》獲選2002年行政院新聞局推介中小學生優良課外讀物圖書類推薦讀物。2002年《布瓜的世界》甫上市便登上各大書店暢銷排行榜第一名。 2003、2004年陸續出版《幸運兒》、《你們我們他們》、《又寂寞又美好》、《履歷表》、《遺失了一只貓》等作品，內容風格上更形突破。2005年的《小蝴蝶小披風》和《失樂園》開始經營角色，多變的故事節奏有不同于以往的閱讀趣味。 作品風靡兩岸三地，美、法、德、希臘、韓、日、泰等國皆有譯本。學界和媒體多次以「幾米現象」為主題分析評論。 2003年Studio Voice雜志選為亞洲最有創意的五十五人之一。 </p>
? ? ? ? </div>
? ? </div>
? ? <div id="footer"></div>
</div>
</body>
</html>
2016-05-21
你把放在圖片后面，然后對文字進行浮動影響的清除
2016-05-21
不知道你的具體代碼，我覺得可以為你的單獨圖片設置div，p標簽也設置一個單獨div應該可以解決吧