:::
所有書籍
「[1061] XOOPS佈景設計」目錄
MarkDown
4. BootStrap響應式框架
1. HTML5的開發環境與基礎
1-1 index.html
2. 用CSS3美化版面
2-1 index.html
2-2 style.css
3. 自適應CSS排版
3-1 index.html
3-2 style.css
3-3 index.html 動態標題背景
3-4 style.css 動態標題背景
4. BootStrap響應式框架
4-1 bootstrap/index.html
5. 同上週～
6. XOOPS可調式佈景開發（上）
6-1 tad2017/theme.tpl
6-2 tad2017/css/style.css
7. XOOPS可調式佈景開發（下）
7-1 tad2017/config.php
7-2 tad2017/theme.tpl
7-3 tad2017/css/style.css
7-4 tad2017/config2.php
8. 現有網頁改製為XOOPS佈景
8-1 themes/eElectronics/theme.html
8-2 themes/eElectronics/config.php
8-3 themes/eElectronics/css/style.css
8-4 themes/photography/theme.html
8-5 themes/photography/config.php
8-6 themes/photography/xotpl/logo.tpl
8-7 themes/photography/css/style.css
9. XOOPS佈景運作原理
9-1 themes/eElectronics/theme.html
9-2 themes/eElectronics/css/style.css
9-3 themes/eElectronics/config2.php
9-4 themes/eElectronics/xotpl/slider.tpl
9-5 themes/eElectronics/xotpl/system.tpl
9-6 themes/photography/xotpl/footer.tpl
9-7 themes/eElectronics/modules/system/system_siteclosed.tpl
5. 同上週～
\[1061\] XOOPS佈景設計 ================== ``` <pre class="brush:xml;gutter:false;"> <html lang="zh-Hant-TW"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style> * { font-family: '微軟正黑體'; font-size: 11pt; } h1, h2, h3 { font-family: 'tadfont'; } @font-face { font-family: tadfont; src: url('myfont.ttf'); } @font-face { font-family: setofont; src: url('setofont.ttf'); } .service_img { width: 60%; display: block; margin: 0px auto; } img.service_img + h2 { text-align: center; } #footer { background: #123456; color: #fff; text-align: center; padding: 30px 0px; margin-top: 30px; } .parallax { background: #000 url('images/b1.jpg') center center /cover no-repeat fixed; padding: 30px 0px; color: #fcfcfc; } .parallax p, .parallax h2, .parallax h3 { text-shadow: 1px 1px 1px rgba(0, 0, 0, .9); } .parallax small { color: #cfcfcf; } .parallax p { font-size: 1.3em; line-height: 1.8em; text-align: justify; } /*選單項目*/ ul.nav>li>a { color: white; } /*滑鼠移過選單項目時*/ ul.nav>li>a:hover { background-color: transparent; border-bottom: 3px solid #ff7f00; } /*焦點在項目上時*/ ul.nav>li>a:focus { background-color: transparent; border-bottom: 3px solid red; } /*開啟下拉選單時*/ ul.nav>li.open>a, ul.nav>li.open>a:hover, ul.nav>li.open>a:focus { background-color: transparent; color: yellow; } .navbar-brand, .navbar-brand:hover, .navbar-brand:focus { font-family: 'tadfont'; font-size: 1.5em; color: #c0d677; text-shadow: 1px 1px 1px rgba(0, 0, 0, .9); } .navbar-toggle .icon-bar { background-color: #fff; } .mini_menu { background: #000 url('images/min-header.jpg') top left /cover; border-bottom: 1px solid #156785; box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.4); } </style> </head> <body> <nav class="navbar navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">點兩下電腦工作室</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> 首頁</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">服務項目 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#service">網站架設</a></li> <li><a href="#service">模組開發</a></li> <li><a href="#service">佈景設計</a></li> <li><a href="#service">維護升級</a></li> </ul> </li> <li><a href="#about">關於我們</a></li> <li><a href="#contact">聯繫我們</a></li> <li><a href="#map">工作室位置</a></li> </ul> </div> </div> </nav> <img src="images/header.jpg" alt="logo" class="hidden-xs" style="width: 100%;"> <img src="images/header_xs.jpg" alt="logo" class="visible-xs" style="width: 100%;"> <div class="container"> <div class="page-header"> <h1>點兩下電腦工作室<small>只要點兩下滑鼠，這個世界就能連起更多友善的網</small></h1> </div> <div class="page-header" id="service"> <h2>服務項目<small> Service</small></h2> </div> <div class="row"> <div class="col-md-3 col-sm-6"> <img src="images/worldwide.svg" alt="網站架設" class="service_img"> <h2>XOOPS 網站架設</h2> <p class="text-justify">協助於各種主機環境，如Linux、Windows或者不同硬體環境上，如自架主機、雲端主機或NAS上架設 XOOPS 網站、模組安裝及各種設定調校。</p> </div> <div class="col-md-3 col-sm-6"> <img src="images/contract.svg" alt="模組開發" class="service_img"> <h2>XOOPS 模組開發</h2> <p class="text-justify">可依照客戶之需求，量身訂做開發出操作簡便、安全性高的各種網路系統，小自個人使用，大至全國性系統都有豐富之開發經驗。</p> </div> <div class="clearfix visible-sm-block"></div> <div class="col-md-3 col-sm-6"> <img src="images/pantone.svg" alt="佈景設計" class="service_img"> <h2>XOOPS 佈景設計</h2> <p class="text-justify">可依據客戶喜好，開發出各式不同版面設計，佈景均支援響應式功能，讓您在網站上或手機上均有最佳的觀看效果及體驗。</p> </div> <div class="col-md-3 col-sm-6"> <img src="images/cube.svg" alt="維護升級" class="service_img"> <h2>XOOPS 維護升級</h2> <p class="text-justify">協助排除XOOPS的各種疑難雜症，協助網站XOOPS及各種模組升級，協助網站搬移或轉碼，亦可協助處理網站之備份與還原。</p> </div> </div> </div> <div class="parallax" id="about"> <div class="container"> <div class="row"> <div class="col-sm-6"> <img src="images/DSCF2259.JPG" alt="ck2" class="img-thumbnail"> </div> <div class="col-sm-6"> <div class="page-header"> <h2>關於我們<small>About us</small></h2> </div> <h3>【緣起】</h3> <p>XOOPS 正體中文延伸計畫網站的站長 Tad在台南社大任教三年後，成立了點兩下資訊社，讓有興趣從事網頁設計、網站架設、PHP程式開發、佈景設計的學員們得有更進一步學習的空間。</p> <p>在點兩下資訊社運做一年後，部份成員學有專精，但空有一身功夫卻無處發揮，甚為可惜。因此，在 Tad老師提議，經大夥兒討論後，成立了點兩下工作室。</p> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="page-header" id="contact"> <h2>聯繫我們<small>Contact</small></h2> </div> <form action="#" id="contact_form" class="form-horizontal"> <div class="form-group has-success has-feedback"> <label class="col-sm-3 control-label">姓名：</label> <div class="col-sm-4"> <input type="text" name="user_name" placeholder="請輸入姓名" class="form-control"> <span class="form-control-feedback"> <i class="fa fa-pencil" aria-hidden="true"></i> </span> </div> <label class="sr-only">姓別：</label> <div class="col-sm-5"> <label class="radio-inline"> <input type="radio" name="user_sex" value="先生">先生 </label> <label class="radio-inline"> <input type="radio" name="user_sex" value="女士">女士 </label> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">問題類型：</label> <div class="col-sm-9"> <select name="q_type" class="form-control"> <option value="XOOPS 網站架設">XOOPS 網站架設</option> <option value="XOOPS 客製化模組開發">XOOPS 客製化模組開發</option> <option value="XOOPS 佈景設計">XOOPS 佈景設計</option> <option value="XOOPS 轉碼、升級">XOOPS 轉碼、升級</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">聯繫時間：</label> <div class="col-sm-9"> <div class="input-group"> <span class="input-group-addon">從</span> <input type="date" class="form-control"> <span class="input-group-addon">至</span> <input type="date" class="form-control"> <span class="input-group-addon">止</span> </div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">留言：</label> <div class="col-sm-9"> <textarea name="user_content" class="form-control" placeholder="請輸入您的意見">
說明：
若是網站問題，留下網址及帳密。
送出
工作室位置
台南市南區文南路58號3F
4. BootStrap響應式框架