[1031]XOOPS佈景設計
內容來源：http://www.weide.org.tw/magtxt3/42-mag-002/79-2010-12-02-06-12-35.html
<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="utf-8"> <title>Bootstrap 練習檔3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <style> body{ background: #fcfcfc url(images/d.gif); font-family:微軟正黑體; font-size:16px; } .img-rounded{ box-shadow: 2px 2px 4px 1px gray; } .wrap{ margin:20px auto; background-color: #fff; box-shadow: 2px 2px 4px 1px gray; border-radius: 5px; } #left-zone{ margin-left:20px; } #right-zone{ margin-right:20px; } #footer{ background-color: gray; min-height: 80px; } </style> </head> <body> <div class="container"> <div class="wrap"> <div class="row-fluid"> <div class="span12"> <img src="images/slide_3_4.png" class="img-rounded"> </div> </div> <div class="row-fluid"> <div class="span12"> </div> </div> <div class="row-fluid"> <div class="span3"> <div id="left-zone"> <div class="hero-unit"> 詩詞賞析 </div> </div> </div> <div class="span6"> <!--div class="row-fluid"> <div class="span12"> 上中 </div> </div> <div class="row-fluid"> <div class="span6"> 上中左 </div> <div class="span6"> 上中右 </div> </div--> <div class="row-fluid"> <div class="span12"> <div class="page-header"> <h1>楊慎《臨江仙》<small>文‧趙秀華</small></h1> </div> <blockquote> <p> 滾滾長江東逝水，浪花<abbr title="淘光、淘乾淨、一點不剩">淘盡</abbr><span class="label label-info">1</span>英雄。<br> 是非成敗轉頭空。<br> 青山依舊在，幾度夕陽紅。<br> <abbr title="指老人">白髮</abbr><span class="label label-info">2</span><abbr title="這裡是名詞當動詞用，打魚、砍柴的意思。">漁樵</abbr><span class="label label-info">3</span>江<abbr title="音同「主」，江上的小島。">渚</abbr><span class="label label-info">4</span>上，慣看秋月春風。<br> 一壺<abbr title="濁 ：不清澈，相對於「清」。濁酒 ：用糯米、黃米等釀製的酒，酒較混濁。">濁酒</abbr><span class="label label-info">5</span>喜相逢。<br> 古今多少事，都付笑談中。 </p> <small>楊慎《臨江仙》</small> </blockquote> <ul class="unstyled"> <li><span class="label label-info">1</span> 淘盡：淘光、淘乾淨、一點不剩。</li> <li><span class="label label-info">2</span> 白髮：指老人。</li> <li><span class="label label-info">3</span> 漁樵：這裡是名詞當動詞用，打魚、砍柴的意思。</li> <li><span class="label label-info">4</span> 渚：音同「主」，江上的小島。</li> <li><span class="label label-info">5</span> 濁 ：不清澈，相對於「清」。濁酒 ：用糯米、黃米等釀製的酒，酒較混濁。</li> </ul> <div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert">×</button> 長江波濤洶湧的向東流，一去不回頭，<br>多少英雄豪傑都像翻滾的浪花一樣，消逝在歷史長河中。<br>無論是對或錯，成功或失敗，轉眼間就不存在。<br>只有青山依然存在，<br>歲月依然流轉，日升日落依舊。<br>白髮老翁在江上捕魚、小島上砍柴，<br>早已習慣春夏秋冬四季輪轉。<br>難得和老朋友相見，一起高興的喝幾杯酒，<br>歷史上發生的多少大事，只不過是下酒的閒談話題罷了。 </div> </div> </div> <div class="row-fluid"> <div class="span12"> <table class="table table-bordered table-hover table-condensed"> <tr><th>表格標題1</th> <th>表格標題2</th> <th>表格標題3</th> <th>表格標題4</th></tr> <tr class="success"><td>表格內容1</td> <td>表格內容2</td> <td>表格內容3</td> <td>表格內容4</td></tr> <tr class="info"><td>表格內容1</td> <td>表格內容2</td> <td>表格內容3</td> <td>表格內容4</td></tr> </table> </div> </div> <!--div class="row-fluid"> <div class="span6"> 下中左 </div> <div class="span6"> 下中右 </div> </div--> </div> <!--右區域開始--> <div class="span3"> <div id="right-zone"> <div class="well well-small"> <div class="row-fluid"> <div class="span3"> <img src="images/Yang_Shen.png" class="img-circle"> </div> <div class="span8 offset1"> <div class="text-info"> <abbr title="楊慎">楊慎</abbr> </div> <div class="muted">追諡「文憲」</div> <div class="text-success">著有《升菴集》</div> </div> </div> <p> 一四八八年至一五五九年；約等同西方文藝復興三巨匠在世之時）明代文學家。字用修，號升庵。新都（今成都）人。明武宗正德六年（一五一一年），楊慎錄取為進士的第一名，是蜀中地區（四川）在明朝的唯一一名狀元。楊慎性情剛直，遇事直言直書。明世宗嘉靖三年（一五二四年），因「議大禮」被貶至雲南永昌衛（今保山），居住三十幾年，死於當地。後由明熹宗天啟年間（一六二一至一六二七年。</p> <p>楊慎博學廣識，《明史》本傳稱其著述豐富，為明代第一。 他的長篇彈唱敘述歷史的作品《二十一史彈詞》，敘述三代至元及明末歷史，文筆流暢，廣為傳誦。<br>羅貫中《三國演義》開卷前面的一首小詞，就是楊慎作的這首《臨江仙》。</p> </p> </div> </div> </div> <!--右區域結束--> </div> <div class="row-fluid"> <div class="span12"> <div id="footer"></div> </div> </div> </div> </div> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>