課程
/前端開發
/HTML/CSS
/網頁布局基礎
13-1?? 看不懂哦···求分析··
2014-10-16
源自：網頁布局基礎 2-7
正在回答
<!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"> *{ ????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; }????/*設置h2的樣式*/ p{ ????line-height:24px; ?????text-indent:26px; ?????margin-bottom:5px; }????/*設置所有段落的默認樣式：行高我24px，文本縮進26px，以及段落結束的底端有5個像素的間距（類似word文檔的段與段之間間距）*/ #wrap{ ????width:770px;? ????margin:0?auto; }????/*設置id為wrap的外層的盒子寬度為770px，居中顯示*/、 #header{ ????width:762px;? ????border:4px?solid?#badbdb;? ????background:url(../images/banner.gif)?no-repeat;? ????height:92px;? ????text-align:right;?color:#fff; }????/*設置id為header部分的樣式，這里使用了一些代碼的簡寫，背景圖片的路徑有問題，所以案例中顯示不出來*/ #header?a{ ????color:#fff;? ????margin:0?5px; }???/*這種寫法為【子選擇符】的寫法，設置id為header里面的超鏈接字體的顏色為以及對其上右下左的間距，因為header部分的背景圖片顯示不出來，所以這里的文字看不見嗎，設置另外一個顏色就可以看到了【聯系我們】【站點地圖】。*/ #mainbody,#footer{ ????width?100%; }??/*id分別為mainbody和footer的寬度為100顯示，這兩個部分是嵌套在wrap之中的*/ #footer{ ????text-align:center;? ????padding:20px?0; }????/*設置footer（版權信息）的文本對其方式，左右內間距20px，上下內間距為20px*/ .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的類設置了背景圖片以及重復方式，圖片沒有顯示出來*/ .book?img{ ????border:1px?solid?#b1adaa; ????margin:10px?18px; }????/*設置book里面的img（圖片）的邊框，顏色樣式以及外間距*/ </style> <!--內部樣式表結束--> </head> <body> <div?id="wrap">????<!--最外層的容器相關屬性查看前面的設置，其中一級節點div的類名稱分別為header，mainbody，footer，在mainbody中包含二級節點的div的類名稱為content??profile以及content?book--> ??????<div?id="header"><a?href="#">聯系我們</a>|<a?href="#">站點地圖</a></div>????<!--頭部分，這里通過header設置了背景圖片，以及嵌套的超鏈接的樣式--> ??????<div?id="mainbody">???<!--主題內容部分，該部分嵌套在wrap中，這里的寬度就是外層wrap部分的寬度--> ???????????<div?class="content?profile">??<!--這個div添加了兩個類，前面的content設置了基本的樣式，后面的prolil設置了背景圖片，之所以這么設置因為后面還有一個地方需要設置和這里相同的背景圖片，當然這里可以直接設置在content中。--> ????????????????<h2>::?關于幾米?::</h2> ????????????????<p>幾米，一位用畫筆描繪夢想、吸引無數讀者畫迷為之瘋狂，知名度迅速竄升的當紅繪本作家，同時卻也是一個靦腆善良的中年男子，偏好簡單的居家生活，低調而淡泊。</p> ????????????????<p>幾米的個性害羞內向，不擅長用言語表達，他用敏銳細膩的心去感受周遭的人與事，將情感、思緒藉由「繪畫」傳達他對大千世界的看法，作品風貌多變，創作力源源不絕，因此看幾米的作品，就像是走入他的內在，幾米的故事引領著每一位欣賞他作品的人看到并相信世界上的美與善，同時也反應了現代人生活中的點點滴滴，因此每個人都能在他的故事找到一個映照和寄托，或許這就是幾米作品的迷人之處。</p> ????????????????<p>幾米，繪本作家，文化大學美術系畢業，曾在廣告公司工作十二年，后來為報紙、雜志等各種出版品畫插畫?。1998年開始創作，發表《森林里的秘密》和《微笑的魚》，拿下當年度中國時報開卷最佳童書、 ??????????????民生報好書大家讀年度最佳童書，以及聯合報讀書人最佳童書獎。?1999年出版《向左走．向右走》，開創出成人繪本的新型式，興起一股繪本創作風潮。本書獲選為1999年金石堂十大最具影響力的書，并已改 ??????????????編成電影、電視劇。之后陸續推出《聽幾米唱歌》、《月亮忘記了》、《森林唱游》、《我的心中每天開出一朵花》等作品，展現驚人的創作力和多變的敘事風格。?2001年出版《地下鐵》，獲選2002年金鼎獎 ??????????????推薦優良圖書，并改編成音樂劇和電影。次年《照相本子》、《1.2.3.木頭人》和《我只能為你畫一張小卡片》獲選2002年行政院新聞局推介中小學生優良課外讀物圖書類推薦讀物。2002年《布瓜的世界》甫上 ??????????????市便登上各大書店暢銷排行榜第一名。?2003、2004年陸續出版《幸運兒》、《你們我們他們》、《又寂寞又美好》、《履歷表》、《遺失了一只貓》等作品，內容風格上更形突破。2005年的《小蝴蝶小披風》 ??????????????和《失樂園》開始經營角色，多變的故事節奏有不同于以往的閱讀趣味。?作品風靡兩岸三地，美、法、德、希臘、韓、日、泰等國皆有譯本。學界和媒體多次以「幾米現象」為主題分析評論。?2003年Studio?Voice雜 ??????????????志選為亞洲最有創意的五十五人之一。?</p> ???????????</div> ???????????<div?class="content?book">?<!--這個div主要來存放圖片，比你高為圖片添加了超鏈接--> ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9dc30001135400800080.jpg"?width="80"?height="80"?/></a>? ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9de300012a0500800080.jpg"width="80"?height="80"?/></a>? ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9dfe0001b81b00800080.jpg"?width="80"?height="80"?/></a>? ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9fa00001f6dd00800080.jpg"??width="80"?height="80"?/></a>? ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9fad0001f29800800080.jpg"??width="80"?height="80"?/></a>? ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9fb90001d71b00800080.jpg"?width="80"?height="80"?/></a> ??????????</div> ??????</div> ??????<div?id="footer">copyright???2004-2012?Jimmyspa.com?All?Rights?Reserved.</div>???<!--版權部分--> </div><!--id為wrap的最外層div結束--> </body> </html>
舉報
讓你精通CSS中三大定位機制，徹底掌握網頁布局的相關知識
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2014-11-05
<!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"> *{ ????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; }????/*設置h2的樣式*/ p{ ????line-height:24px; ?????text-indent:26px; ?????margin-bottom:5px; }????/*設置所有段落的默認樣式：行高我24px，文本縮進26px，以及段落結束的底端有5個像素的間距（類似word文檔的段與段之間間距）*/ #wrap{ ????width:770px;? ????margin:0?auto; }????/*設置id為wrap的外層的盒子寬度為770px，居中顯示*/、 #header{ ????width:762px;? ????border:4px?solid?#badbdb;? ????background:url(../images/banner.gif)?no-repeat;? ????height:92px;? ????text-align:right;?color:#fff; }????/*設置id為header部分的樣式，這里使用了一些代碼的簡寫，背景圖片的路徑有問題，所以案例中顯示不出來*/ #header?a{ ????color:#fff;? ????margin:0?5px; }???/*這種寫法為【子選擇符】的寫法，設置id為header里面的超鏈接字體的顏色為以及對其上右下左的間距，因為header部分的背景圖片顯示不出來，所以這里的文字看不見嗎，設置另外一個顏色就可以看到了【聯系我們】【站點地圖】。*/ #mainbody,#footer{ ????width?100%; }??/*id分別為mainbody和footer的寬度為100顯示，這兩個部分是嵌套在wrap之中的*/ #footer{ ????text-align:center;? ????padding:20px?0; }????/*設置footer（版權信息）的文本對其方式，左右內間距20px，上下內間距為20px*/ .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的類設置了背景圖片以及重復方式，圖片沒有顯示出來*/ .book?img{ ????border:1px?solid?#b1adaa; ????margin:10px?18px; }????/*設置book里面的img（圖片）的邊框，顏色樣式以及外間距*/ </style> <!--內部樣式表結束--> </head> <body> <div?id="wrap">????<!--最外層的容器相關屬性查看前面的設置，其中一級節點div的類名稱分別為header，mainbody，footer，在mainbody中包含二級節點的div的類名稱為content??profile以及content?book--> ??????<div?id="header"><a?href="#">聯系我們</a>|<a?href="#">站點地圖</a></div>????<!--頭部分，這里通過header設置了背景圖片，以及嵌套的超鏈接的樣式--> ??????<div?id="mainbody">???<!--主題內容部分，該部分嵌套在wrap中，這里的寬度就是外層wrap部分的寬度--> ???????????<div?class="content?profile">??<!--這個div添加了兩個類，前面的content設置了基本的樣式，后面的prolil設置了背景圖片，之所以這么設置因為后面還有一個地方需要設置和這里相同的背景圖片，當然這里可以直接設置在content中。--> ????????????????<h2>::?關于幾米?::</h2> ????????????????<p>幾米，一位用畫筆描繪夢想、吸引無數讀者畫迷為之瘋狂，知名度迅速竄升的當紅繪本作家，同時卻也是一個靦腆善良的中年男子，偏好簡單的居家生活，低調而淡泊。</p> ????????????????<p>幾米的個性害羞內向，不擅長用言語表達，他用敏銳細膩的心去感受周遭的人與事，將情感、思緒藉由「繪畫」傳達他對大千世界的看法，作品風貌多變，創作力源源不絕，因此看幾米的作品，就像是走入他的內在，幾米的故事引領著每一位欣賞他作品的人看到并相信世界上的美與善，同時也反應了現代人生活中的點點滴滴，因此每個人都能在他的故事找到一個映照和寄托，或許這就是幾米作品的迷人之處。</p> ????????????????<p>幾米，繪本作家，文化大學美術系畢業，曾在廣告公司工作十二年，后來為報紙、雜志等各種出版品畫插畫?。1998年開始創作，發表《森林里的秘密》和《微笑的魚》，拿下當年度中國時報開卷最佳童書、 ??????????????民生報好書大家讀年度最佳童書，以及聯合報讀書人最佳童書獎。?1999年出版《向左走．向右走》，開創出成人繪本的新型式，興起一股繪本創作風潮。本書獲選為1999年金石堂十大最具影響力的書，并已改 ??????????????編成電影、電視劇。之后陸續推出《聽幾米唱歌》、《月亮忘記了》、《森林唱游》、《我的心中每天開出一朵花》等作品，展現驚人的創作力和多變的敘事風格。?2001年出版《地下鐵》，獲選2002年金鼎獎 ??????????????推薦優良圖書，并改編成音樂劇和電影。次年《照相本子》、《1.2.3.木頭人》和《我只能為你畫一張小卡片》獲選2002年行政院新聞局推介中小學生優良課外讀物圖書類推薦讀物。2002年《布瓜的世界》甫上 ??????????????市便登上各大書店暢銷排行榜第一名。?2003、2004年陸續出版《幸運兒》、《你們我們他們》、《又寂寞又美好》、《履歷表》、《遺失了一只貓》等作品，內容風格上更形突破。2005年的《小蝴蝶小披風》 ??????????????和《失樂園》開始經營角色，多變的故事節奏有不同于以往的閱讀趣味。?作品風靡兩岸三地，美、法、德、希臘、韓、日、泰等國皆有譯本。學界和媒體多次以「幾米現象」為主題分析評論。?2003年Studio?Voice雜 ??????????????志選為亞洲最有創意的五十五人之一。?</p> ???????????</div> ???????????<div?class="content?book">?<!--這個div主要來存放圖片，比你高為圖片添加了超鏈接--> ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9dc30001135400800080.jpg"?width="80"?height="80"?/></a>? ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9de300012a0500800080.jpg"width="80"?height="80"?/></a>? ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9dfe0001b81b00800080.jpg"?width="80"?height="80"?/></a>? ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9fa00001f6dd00800080.jpg"??width="80"?height="80"?/></a>? ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9fad0001f29800800080.jpg"??width="80"?height="80"?/></a>? ???????????????<a?href="#"><img?src="http://img1.sycdn.imooc.com//536c9fb90001d71b00800080.jpg"?width="80"?height="80"?/></a> ??????????</div> ??????</div> ??????<div?id="footer">copyright???2004-2012?Jimmyspa.com?All?Rights?Reserved.</div>???<!--版權部分--> </div><!--id為wrap的最外層div結束--> </body> </html>