1. 程式人生 > >HTML+CSS實戰提升

HTML+CSS實戰提升

複製程式碼
  1 <html>
  2 <head>
  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4 <title>幾米簡介</title>
  5     <style type="text/css">
  6         *{
  7             margin:0px;padding:0px;
  8         }
  9         #header{
 10             background:url(images/banner.gif) no-repeat;
 11             margin:0 auto auto 0;    
 12             width:760px;
 13             height:90px;
 14             text-align:right;
 15         }
 16         #header a{
 17             text-decoration:none;/*刪除下劃線*/
 18             color:white;
 19             font-family:"宋體";
 20             font-size:10px;
 21             margin:0 5px;
 22             
 23         }
 24         #header a:hover{
 25             text-decoration:underline;/*滑鼠落下顯示下劃線*/
 26         }
 27         .ma{/*設定整體居中顯示*/
 28             margin:0 auto;
 29             width:760px;
 30             border:3px solid blue;
 31         }
 32         .im{
 33             background:url(images/t_profile.gif) no-repeat; 
 34         }
 35         .bo{
 36             background-color:#eff9f9;
 37             width=760px;
 38             height:440px;
 39             border:1px solid #eff9f9;
 40             font-family:"楷體";
 41             font-size:16px;
 42             
 43         }
 44         h2{
 45             margin:40px auto 10px auto;
 46             font-size:20px;
 47             font-family:"宋體";
 48         }
 49         p{
 50             text-indent:26px;/*此標籤的作用是段落*/
 51         }
 52         img{
 53             border:1px solid #eff9f9;
 54             margin:40px 0 0 0;
 55         }
 56         .con{
 57             background:url(images/t_book.gif) no-repeat;
 58             /*border-bottom:6px solid pink;*/
 59         }
 60         .book{
 61             background-color:#eff9f9;
 62             width:760px;
 63         }
 64         .footer{
 65             text-align:center;
 66             background-color:yellow;
 67             width:760px;
 68             height:30px;
 69             font-size:13px;
 70             font-family:"宋體";
 71         }
 72     </style>
 73 </head>
 74 
 75 <body>
 76 <div class="ma">
 77     <div id="header">
 78         <a href="#">聯絡我們</a>
 79         <a href="#">站點地圖</a>    
 80     </div>
 81         <div class="bo im">
 82             <h2>:: 關於幾米 ::</h2>
 83                   <p>幾米,一位用畫筆描繪夢想、吸引無數讀者畫迷為之瘋狂,知名度迅速竄升的當紅繪本作家,同時卻也是一個靦腆善良的中年男子,偏好簡單的居家生活,低調而淡泊。</p>
 84                   <p>幾米的個性害羞內向,不擅長用言語表達,他用敏銳細膩的心去感受周遭的人與事,將情感、思緒藉由「繪畫」傳達他對大千世界的看法,作品風貌多變,創作力源源不絕,因此看幾米的作品,就像是走入他的內在,幾米的故事引領著每一位欣賞他作品的人看到並相信世界上的美與善,同時也反應了現代人生活中的點點滴滴,因此每個人都能在他的故事找到一個映照和寄託,或許這就是幾米作品的迷人之處。</p>
 85                   <p>幾米,繪本作家,文化大學美術系畢業,曾在廣告公司工作十二年,後來為報紙、雜誌等各種出版品畫插畫 。1998年開始創作,發表《森林裡的祕密》和《微笑的魚》,拿下當年度中國時報開卷最佳童書、
 86                   民生報好書大家讀年度最佳童書,以及聯合報讀書人最佳童書獎。 1999年出版《向左走.向右走》,開創出成人繪本的新型式,興起一股繪本創作風潮。本書獲選為1999年金石堂十大最具影響力的書,並已改
 87                   編成電影、電視劇。之後陸續推出《聽幾米唱歌》、《月亮忘記了》、《森林唱遊》、《我的心中每天開出一朵花》等作品,展現驚人的創作力和多變的敘事風格。 2001年出版《地下鐵》,獲選2002年金鼎獎
 88                   推薦優良圖書,並改編成音樂劇和電影。次年《照相本子》、《1.2.3.木頭人》和《我只能為你畫一張小卡片》獲選2002年行政院新聞局推介中小學生優良課外讀物圖書類推薦讀物。2002年《布瓜的世界》甫上
 89                   市便登上各大書店暢銷排行榜第一名。 2003、2004年陸續出版《幸運兒》、《你們我們他們》、《又寂寞又美好》、《履歷表》、《遺失了一隻貓》等作品,內容風格上更形突破。2005年的《小蝴蝶小披風》
 90                   和《失樂園》開始經營角色,多變的故事節奏有不同於以往的閱讀趣味。 作品風靡兩岸三地,美、法、德、希臘、韓、日、泰等國皆有譯本。學界和媒體多次以「幾米現象」為主題分析評論。 2003年Studio Voice雜
 91                   志選為亞洲最有創意的五十五人之一。 </p>
 92         </div>
 93     <div class="con book">
 94         <img src="images/book1.jpg"/>
 95         <img src="images/book2.jpg"/>
 96         <img src="images/book3.jpg"/>
 97         <img src="images/book4.jpg"/>
 98         <img src="images/book5.jpg"/>
 99     </div>
100     <div class="footer">
101         copyright © 2004-2012 Jimmyspa.com All Rights Reserved.
102     </div>
103 </div>    
104 </body>
105 </html>
複製程式碼