根據(jù)慕課網(wǎng)網(wǎng)頁基礎(chǔ)布局，做了一個簡單的靜態(tài)頁面伐厌。第一次做的時候問題很大阅仔，圖（1）還是我根據(jù)原圖（2）代碼修改過得，但還是有一些問題弧械。雖然進行了初始化，但是我的界面依舊和瀏覽器有空隙空民。
jimi.png
我的練習（1）我的代碼html部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jimi簡介</title>
<link href="main.css"rel="stylesheet"type="text/css">
</head>
<body>
<<div id="wrap">
<div id="header">
<a href="#">聯(lián)系我們</a>|<a href="#">站點地圖</a>
</div>
<div id="mainbody">
<div class="content profile">
<h2>:: 關(guān)于幾米 ::</h2>
<p>幾米刃唐，一位用畫筆描繪夢想羞迷、吸引無數(shù)讀者畫迷為之瘋狂，知名度迅速竄升的當紅繪本作家画饥，同時卻也是一個靦腆善良的中年男子衔瓮，偏好簡單的居家生活，低調(diào)而淡泊抖甘。</p>
<p>幾米的個性害羞內(nèi)向热鞍，不擅長用言語表達，他用敏銳細膩的心去感受周遭的人與事衔彻，將情感薇宠、思緒藉由「繪畫」傳達他對大千世界的看法，作品風貌多變艰额，創(chuàng)作力源源不絕澄港，因此看幾米的作品，就像是走入他的內(nèi)在柄沮，幾米的故事引領(lǐng)著每一位欣賞他作品的人看到并相信世界上的美與善回梧，同時也反應(yīng)了現(xiàn)代人生活中的點點滴滴，因此每個人都能在他的故事找到一個映照和寄托祖搓，或許這就是幾米作品的迷人之處狱意。</p>
<p>幾米，繪本作家拯欧，文化大學美術(shù)系畢業(yè)详囤，曾在廣告公司工作十二年，后來為報紙哈扮、雜志等各種出版品畫插畫 纬纪。1998年開始創(chuàng)作，發(fā)表《森林里的秘密》和《微笑的魚》滑肉，拿下當年度中國時報開卷最佳童書包各、民生報好書大家讀年度最佳童書，以及聯(lián)合報讀書人最佳童書獎靶庙。 1999年出版《向左走．向右走》问畅，開創(chuàng)出成人繪本的新型式，興起一股繪本創(chuàng)作風潮六荒。本書獲選為1999年金石堂十大最具影響力的書护姆，并已改編成電影、電視劇掏击。之后陸續(xù)推出《聽幾米唱歌》卵皂、《月亮忘記了》、《森林唱游》砚亭、《我的心中每天開出一朵花》等作品灯变，展現(xiàn)驚人的創(chuàng)作力和多變的敘事風格殴玛。 2001年出版《地下鐵》，獲選2002年金鼎獎推薦優(yōu)良圖書添祸，并改編成音樂劇和電影滚粟。次年《照相本子》、《1.2.3.木頭人》和《我只能為你畫一張小卡片》獲選2002年行政院新聞局推介中小學生優(yōu)良課外讀物圖書類推薦讀物刃泌。2002年《布瓜的世界》甫上市便登上各大書店暢銷排行榜第一名凡壤。 2003、2004年陸續(xù)出版《幸運兒》耙替、《你們我們他們》亚侠、《又寂寞又美好》、《履歷表》林艘、《遺失了一只貓》等作品盖奈，內(nèi)容風格上更形突破。2005年的《小蝴蝶小披風》和《失樂園》開始經(jīng)營角色狐援，多變的故事節(jié)奏有不同于以往的閱讀趣味钢坦。 作品風靡兩岸三地，美啥酱、法爹凹、德、希臘镶殷、韓禾酱、日、泰等國皆有譯本绘趋。學界和媒體多次以「幾米現(xiàn)象」為主題分析評論颤陶。 2003年Studio Voice雜志選為亞洲最有創(chuàng)意的五十五人之一。</p>
</div>
</div>
<div class="content book">
</div>
<div id="footer">
copyright ? 2004-2012 Jimmyspa.com All Rights Reserved.
</div>
</div>
</body>
</html>
css部分
/* css document */
*{margin: 0; padding:0; font-size:12px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋體";}
#wrap{width:770px;margin:0 auto;}
#header{width:762px;height:92px;background:url(images/banner.gif)no-repeat;text-align: right;color: white; border:4px solid #badbdb; }
a{color: white;text-decoration:none;padding: 0 5px;}
a:hover{text-decoration: underline;}
h2{line-height:30px; font-size:14px; margin-bottom:5px;}
p{line-height:25px; font-size:12px;text-indent: 20px;margin-bottom: 5px;}
#mainbody,#footer{100%; }
#footer{text-align: center;margin: 20px 0px; }
.content{background:#eff9f9; padding:44px 15px 15px; border:4px solid #badbdb; }
.profile{background:url(images/t_profile.gif) no-repeat #eff9f9;}
.book{background:url(images/t_book.gif)no-repeat #eff9f9; }
.book img{border:1px solid #b1adaa;margin:18px 18px;}
幾米.png
原圖（2）原圖代碼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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header"><a href="#">聯(lián)系我們</a>|<a href="#">站點地圖</a></div>
<div id="mainbody">
<div class="content profile">
<h2>:: 關(guān)于幾米 ::</h2>
<p>幾米陷遮，一位用畫筆描繪夢想滓走、吸引無數(shù)讀者畫迷為之瘋狂，知名度迅速竄升的當紅繪本作家帽馋，同時卻也是一個靦腆善良的中年男子搅方，偏好簡單的居家生活，低調(diào)而淡泊绽族。</p>
<p>幾米的個性害羞內(nèi)向姨涡，不擅長用言語表達，他用敏銳細膩的心去感受周遭的人與事吧慢，將情感涛漂、思緒藉由「繪畫」傳達他對大千世界的看法，作品風貌多變检诗，創(chuàng)作力源源不絕怖喻，因此看幾米的作品底哗，就像是走入他的內(nèi)在，幾米的故事引領(lǐng)著每一位欣賞他作品的人看到并相信世界上的美與善锚沸，同時也反應(yīng)了現(xiàn)代人生活中的點點滴滴，因此每個人都能在他的故事找到一個映照和寄托涕癣，或許這就是幾米作品的迷人之處哗蜈。</p>
<p>幾米，繪本作家坠韩，文化大學美術(shù)系畢業(yè)距潘，曾在廣告公司工作十二年，后來為報紙只搁、雜志等各種出版品畫插畫 音比。1998年開始創(chuàng)作，發(fā)表《森林里的秘密》和《微笑的魚》氢惋，拿下當年度中國時報開卷最佳童書洞翩、民生報好書大家讀年度最佳童書，以及聯(lián)合報讀書人最佳童書獎焰望。 1999年出版《向左走．向右走》骚亿，開創(chuàng)出成人繪本的新型式，興起一股繪本創(chuàng)作風潮熊赖。本書獲選為1999年金石堂十大最具影響力的書来屠，并已改編成電影、電視劇震鹉。之后陸續(xù)推出《聽幾米唱歌》俱笛、《月亮忘記了》、《森林唱游》传趾、《我的心中每天開出一朵花》等作品迎膜，展現(xiàn)驚人的創(chuàng)作力和多變的敘事風格。 2001年出版《地下鐵》墨缘，獲選2002年金鼎獎推薦優(yōu)良圖書星虹，并改編成音樂劇和電影。次年《照相本子》镊讼、《1.2.3.木頭人》和《我只能為你畫一張小卡片》獲選2002年行政院新聞局推介中小學生優(yōu)良課外讀物圖書類推薦讀物宽涌。2002年《布瓜的世界》甫上市便登上各大書店暢銷排行榜第一名。 2003蝶棋、2004年陸續(xù)出版《幸運兒》卸亮、《你們我們他們》、《又寂寞又美好》玩裙、《履歷表》兼贸、《遺失了一只貓》等作品段直，內(nèi)容風格上更形突破。2005年的《小蝴蝶小披風》和《失樂園》開始經(jīng)營角色溶诞，多變的故事節(jié)奏有不同于以往的閱讀趣味鸯檬。 作品風靡兩岸三地，美螺垢、法喧务、德、希臘枉圃、韓功茴、日、泰等國皆有譯本孽亲。學界和媒體多次以「幾米現(xiàn)象」為主題分析評論坎穿。 2003年Studio Voice雜志選為亞洲最有創(chuàng)意的五十五人之一。 </p>
</div>
<div class="content book">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<div id="footer">copyright ? 2004-2012 Jimmyspa.com All Rights Reserved.
</div>
</div>
</body>
</html>
css部分
/* CSS Document */
*{margin:0; padding:0; font-size:12px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋體";}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
h2{line-height:30px; font-size:14px; margin-bottom:5px;}
p{line-height:24px; text-indent:26px; margin-bottom:5px;}
#wrap{width:770px; margin:0 auto;}
#header{width:762px; border:4px solid #badbdb; background:url(../images/banner.gif) no-repeat; height:92px; text-align:right; color:#fff;}
#header a{color:#fff; margin:0 5px;}
#mainbody,#footer{width:100%;}
#footer{text-align:center; padding:20px 0;}
.content{background:#eff9f9; padding:44px 15px 15px; border:4px solid #badbdb;}
.profile{background:url(../images/t_profile.gif) no-repeat #eff9f9;}
.book{background:url(../images/t_book.gif) no-repeat #eff9f9;}
.book img{border:1px solid #b1adaa; margin:10px 18px;}
第二個問題是返劲，在插入圖片“幾米profile圖片”代碼時玲昧，一旦1不在2里了，圖片“幾米profile”就無法顯示了旭等。
和原圖profile位置一致頭部1.png
修改后的css代碼
/* css document */
*{margin: 0; padding:0; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋體";}
#wrap{width:770px;margin:0 auto;}
#header{width:762px;height:92px;background:url(images/banner.gif)no-repeat;text-align: right;color: white; border:4px solid #badbdb; }
a{color: white;text-decoration:none;padding: 0 5px;}
a:hover{text-decoration: underline;}
h2{line-height:30px; font-size:14px; margin-bottom:5px;}
p{line-height:25px; font-size:12px;text-indent: 20px;margin-bottom: 5px;}
#mainbody,#footer{100%; }
#footer{text-align: center;margin: 20px 0px; }
2【.content{background:#eff9f9; padding:44px 15px 15px; border:4px solid #badbdb; }
1【.profile{background:url(images/t_profile.gif) no-repeat #eff9f9;}】
.book{background:url(images/t_book.gif)no-repeat #eff9f9; }
.book img{border:1px solid #b1adaa;margin:18px 18px;}】
頭部2.png
我的練習css代碼
/* css document */
*{margin: 0; padding:0; font-size:12px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋體";}
#wrap{width:770px;margin:0 auto;}
#header{width:762px;height:92px;background:url(images/banner.gif)no-repeat;text-align: right;color: white; border:4px solid #badbdb; }
a{color: white;text-decoration:none;padding: 0 5px;}
a:hover{text-decoration: underline;}
1.【.profile{background:url(images/t_profile.gif) no-repeat #eff9f9;}】
h2{line-height:30px; font-size:14px; margin-bottom:5px;}
p{line-height:25px; font-size:12px;text-indent: 20px;margin-bottom: 5px;}
#mainbody,#footer{100%; }
#footer{text-align: center;margin: 20px 0px; }
2.【.content{background:#eff9f9; padding:44px 15px 15px; border:4px solid #badbdb; }
.book{background:url(images/t_book.gif)no-repeat #eff9f9; }
.book img{border:1px solid #b1adaa;margin:18px 18px;}】
現(xiàn)在我還沒辦法知道導致這兩個問題的原因酌呆，等待后面更多的練習來幫助我答疑解惑吧。
