Toggle main menu visibility
新聞
下載
教材
影音
討論
其他選單
好站連結
行事曆
電子相簿
常見問題
萬用表單
即時留言簿
友站消息
社大學員
:::
登入
登入
帳號
密碼
登入
重整畫面
:::
所有書籍
「[1031]XOOPS佈景設計」目錄
MarkDown
4-3 bootstrap2.html 流動版面XOOPS布局練習
1. HTML5入門
1-1 「範例」index.html
2. HTML5 與 CSS3
2-1 index.html（背景整合設定）
2-2 index.html（多背景）
2-3 index.html（標題文字外觀設定）
2-4 index.html（頁內樣式）
2-5 index.html（版面布局）
2-6 index.html（完整版面布局）
2-7 index.html（導覽列）
2-8 index.html（完整導覽列）
3. CSS3與版面布局
3-1 index.html（標題加上左邊框）
3-2 index2.html（position練習空檔）
3-3 index2.html（position:relative）
3-4 index2.html（position:relative+z-index 上下層）
3-5 index2.html（position:absolute）
3-6 index2.html（position:fixed）
3-7 index.html（兩欄式）
3-8 index3.html（用position來做三欄式）
3-9 index4.html（利用float做三欄式）
3-10 index.html（float兩欄式）
3-11 index.html（側邊作者欄+花邊）
4. 認識 BootStrap
4-1 bootstrap1.html 固定版面布局練習
4-2 bootstrap2.html 固定版面XOOPS布局練習
4-3 bootstrap2.html 流動版面XOOPS布局練習
4-4 bootstrap3.html 流動版面網頁排版練習
5. XOOPS佈景開發（上）
5-1 theme2014/index.html 基本頁面
5-2 theme2014/index.html 基本頁面+架構+justfont字型
5-3 css/style.css 主樣式表
5-4 theme2014/index.html 導覽列+XOOPS八區域+頁尾
5-5 theme2014/theme.html 樣板檔（大架構初步完成）
5-6 theme2014/xotpl/block.html （區塊樣板檔）
5-7 theme2014/css/xoops.css （XOOPS內容樣式表）
5-8 theme2014/xotpl/block_center.html （中間區塊樣板檔）
6. XOOPS佈景開發（下）
6-1 theme2014/theme.html 樣板檔（加入管理工具）
6-2 theme2014/xotpl/block.html （強化區塊樣板檔）
6-3 theme2014/xotpl/block_center.html （強化中間區塊樣板檔）
6-4 theme2014/css/xoops.css （XOOPS內容樣式表）
6-5 theme2014/css/style.css （主樣式表）
6-6 theme2014/modules/system/system_redirect.html 轉頁畫面
6-7 theme2014/language/tchinese_utf8/main.php
7. 打造可控制佈景
7-1 佈景結構參考
7-2 theme2014/theme.html （主佈景架構）
7-3 theme2014/theme.ini （佈景資訊檔）
7-4 theme2014/css/style.css
7-4 theme2014/config.php （佈景主設定檔）
7-5 theme2014/config2.php 額外設定
8. 進階佈景設計
8-1 theme2014/theme.html 主佈景架構
8-2 theme2014/language/tchinese_utf8/main.php 語系檔
9. 快速做出XOOPS佈景
9-1 themes/sailing_demo/theme.html
9-2 themes/sailing_demo/theme.ini
9-3 themes/sailing_demo/README
9-4 themes/sailing_demo/config.php
9-5 themes/sailing_demo/config2.php
9-6 themes/sailing_demo/templatemo_style.css (僅列修改部份)
5. XOOPS佈景開發（上）
\[1031\]XOOPS佈景設計 ================= 內容來源：<http://www.weide.org.tw/magtxt3/42-mag-002/79-2010-12-02-06-12-35.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> ``` </body></html>
:::
搜尋
search
進階搜尋
QR Code 區塊
快速登入
所有討論區
「PHP全端開發」線上課程討論區
XOOPS使用討論區
一般研習學員
社大學員專用
路過哈啦區
XOOPS佈景設計
XOOPS模組開發
Tad書籍區
即時留言簿
書籍目錄
展開
|
闔起
線上使用者
67
人線上 (
17
人在瀏覽
線上書籍
)
會員: 0
訪客: 67
更多…
4-3 bootstrap2.html 流動版面XOOPS布局練習
