:::

4-1 bootstrap/index.html

<!DOCTYPE html>
<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="請輸入您的意見"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">說明:</label>
                        <div class="col-sm-6">
                            <div class="form-control-static">若是網站問題,留下網址及帳密。</div>
                        </div>
                        <div class="col-sm-3">
                            <button type="submit" class="btn btn-primary btn-sm btn-block">送出</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-sm-6">
                <div class="page-header" id="map">
                    <h2>工作室位置<small>台南市南區文南路58號3F</small></h2>
                </div>
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3673.1012244164644!2d120.18788931431298!3d22.98330492356333!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e76762fb96b2f%3A0xbe642a6276fc4524!2zNzAy5Y-w5Y2X5biC5Y2X5Y2A5paH5Y2X6LevNTjomZ8!5e0!3m2!1szh-TW!2stw!4v1491638671770" width="100%" height="260" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
    <div id="footer">
        <p>點兩下工作室(主攻 XOOPS 網站架設應用、模組開發、佈景設計、網站優化)</p>
        <p>Powered by XOOPS © 2001-2008 The XOOPS Project</p>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.0.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script>
    $(function() {
        $(window).scroll(scroll_style);
    });

    function scroll_style() {
        var window_top = $(window).scrollTop();
        if (window_top > 350) {
            $(".navbar").addClass("mini_menu");
        } else {
            $(".navbar").removeClass("mini_menu");
        }
    }
    </script>
</body>

</html>

 


:::

書籍目錄

展開 | 闔起

線上使用者

35人線上 (6人在瀏覽線上書籍)

會員: 0

訪客: 35

更多…