:::
所有書籍
「[1092] 前端技術入門」目錄
MarkDown
2. 進階自適應排版技術
1. HTML5與CSS3入門
1-1 css/style.css
1-2 index.html
2. 進階自適應排版技術
2-1 theme.html
2-2 css/style.css
3. 製作成XOOPS佈景
3-1 theme.tpl
3-2 css/style.css
3-3 xotpl/nav.tpl
3-4 xotpl/block.tpl
3-5 xotpl/canvas.tpl
3-6 xotpl/search.tpl
3-7 xotpl/logo.tpl
4. 讓佈景可透過tad_themes來管理
4-1 theme.tpl
4-2 css/style.css
4-3 config.php
4-4 xotpl/nav.tpl
4-5 xotpl/menu.tpl
4-6 xotpl/opt.tpl
5. 用CSS3美化區塊
5-1 xotpl/block.tpl
5-2 css/style.css
5-3 theme.tpl
6. 利用多背景來組成自適應畫面
6-1 modules\system\system_siteclosed.tpl
6-2 config.php
6-3 xotpl\nav.tpl
6-4 theme.tpl
6-5 css\style.css
6-6 xotpl\header.tpl
6-7 xotpl\carousel.tpl
6-8 config2_slide.php
6-9 language\tchinese_utf8\main.php
6-10 config2.php
2-2 css/style.css
\[1092\] 前端技術入門 =============== ```markup <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <link rel="stylesheet" href="css/animate.min.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/stellarnav.min.css"> <link rel="stylesheet" href="css/style.css"> <title>Title</title> </head> <body> <!-- 標題區 --> <div class="container"> <header class="row"> <div class="col-sm-9"> <!-- Logo圖 --> <img src="images/logo.png" alt="Logo圖" class="img-fluid animate__animated animate__lightSpeedInRight"> </div> <div class="col-sm-3"> <!-- 搜尋工具 --> <form action="/search.php"> <div class="input-group my-4"> <input type="text" name="query" class="form-control" placeholder="請輸入關鍵字"> <input type="hidden" name="action" value="results"> <div class="input-group-append"> <button type="submit" class="btn btn-primary"><i class="fa fa-search" aria-hidden="true"></i></button> </div> </div> </form> </div> </header> </div> <!-- 導覽列 --> <div id="nav"> <div class="container"> <div class="row"> <nav class="col"> <div class="stellarnav"> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> <li><a href="#">Item4</a></li> <li><a href="#">Item5</a></li> </ul> </li> <li><a href="#">Item4</a></li> <li><a href="#">Item5</a></li> </ul> </li> <li><a href="#">Item3</a></li> <li><a href="#">Item4</a> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> <li><a href="#">Item4</a></li> <li><a href="#">Item5</a></li> </ul> </li> <li><a href="#">Item5</a></li> </ul> </div> </nav> </div> </div> </div> <!-- 主內容區 --> <div class="container"> <div class="row"> <aside class="col-xl">側邊左</aside> <article class="col-xl-7">主內容</article> <aside class="col-xl">側邊右</aside> </div> </div> <!-- 頁尾區 --> <div id="footer"> <footer class="container"> <div class="row"> <div class="col-md"> 頁尾區 </div> <div class="col-md"> 頁尾區 </div> <div class="col-md"> 頁尾區 </div> </div> </footer> </div> <script src="js/jquery.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/stellarnav.js"></script> <script type="text/javascript"> jQuery(document).ready(function ($) { jQuery('.stellarnav').stellarNav({ menuLabel: '選單', position: 'left', scrollbarFix: true }); }); </script> </body> </html> ``` </body></html>
:::
搜尋
search
進階搜尋
QR Code 區塊
快速登入
所有討論區
「PHP全端開發」線上課程討論區
XOOPS使用討論區
一般研習學員
社大學員專用
路過哈啦區
XOOPS佈景設計
XOOPS模組開發
Tad書籍區
即時留言簿
書籍目錄
展開
|
闔起
線上使用者
555
人線上 (
216
人在瀏覽
線上書籍
)
會員: 0
訪客: 555
更多…
:::
主選單
NTPC OpenID
活動報名
模組控制台
進階區塊管理
站長工具箱（急救版）
網站地圖
Tad Tools 工具包
站長工具箱
行事曆
討論留言
嵌入區塊模組
快速登入
網站計數器
好站連結
最新消息
檔案下載
線上書籍
電子相簿
影音播放
常見問題
萬用表單
友站消息
社大學員
新聞
下載
教材
影音
討論
其他選單
好站連結
行事曆
電子相簿
常見問題
萬用表單
即時留言簿
友站消息
社大學員
登入
登入
帳號
密碼
登入
2. 進階自適應排版技術
