index.html 動態標題背景

3-3 index.html 動態標題背景
001<!DOCTYPE html>
002<html lang="zh-Hant-TW">
003 
004<head>
005    <meta charset="UTF-8">
006    <title>佈景設計</title>
007    <link rel="stylesheet" href="style.css">
008</head>
009 
010<body>
011    <!-- container 頁面容器 -->
012    <div class="container">
013        <header id="Home">
014            <hgroup>
015                <h1>點兩下電腦工作室</h1>
016                <h2>只要點兩下滑鼠，這個世界就能連起更多友善的網</h2>
017            </hgroup>
018            <!-- 導覽列 -->
019            <nav>
020                <ul>
021                    <li><a href="#About">關於我們</a></li>
022                    <li><a href="#Service">服務項目</a></li>
023                    <li><a href="#Contact">聯繫我們</a></li>
024                </ul>
025            </nav>
026             
027            <video loop muted autoplay poster="video.jpg" class="video">
028                <source src="video.mp4" type="video/mp4">
029            </video>
030        </header>
031        <div class="row">
032            <article>
033                <section id="About">
034                    <h3>關於我們</h3>
035                    <h4>【緣起】</h4>
036                    <p>XOOPS 正體中文延伸計畫網站的站長 Tad在台南社大任教三年後，成立了點兩下資訊社，讓有興趣從事網頁設計、網站架設、PHP程式開發、佈景設計的學員們得有更進一步學習的空間。</p>
037                    <p>在點兩下資訊社運做一年後，部份成員學有專精，但空有一身功夫卻無處發揮，甚為可惜。因此，在 Tad老師提議，經大夥兒討論後，成立了點兩下工作室。</p>
038                    <h4>【願景】</h4>
039                    <p>隨著 XOOPS 網站越來越成熟，使用者也越來越多，但國內資源始終缺乏整合，而社團成員來自各個產業，最明白各種產業需求，因此點兩下工作室除了以資源整合為目標外，更希望成為國內 XOOPS 資源開發的推手。</p>
040                    <p>XOOPS 的綜合應用、困難排解為工作室成員基礎能力，而模組開發、佈景設計則列為主要項目，未來希望工作室能推出各種模組來供大家使用。</p>
041                    <p>此外，我們也希望對於弱勢團體、公益團體、或者社區成長有所協助，故每個月我們預計會有一定名額，來幫這些對象架設網站，提供技術協助。（相關辦法經成員討論後會另行發佈）</p>
042                    <p>若有公司行號或其他單位，對於 XOOPS 系統有客製化需求，我們也可以在討論評估後提供相關服務。</p>
043                </section>
044                <section id="Service">
045                    <h3>服務項目</h3>
046                    <ol>
047                        <li>XOOPS 網站架設</li>
048                        <li>XOOPS 客製化模組開發</li>
049                        <li>XOOPS 佈景設計</li>
050                        <li>XOOPS 轉碼、升級</li>
051                    </ol>
052                </section>
053                <section id="Contact">
054                    <h3>聯繫我們</h3>
055                    <form action="#" id="contact_form">
056                        <div class="form-group">
057                            <label>姓名：</label>
058                            <div>
059                                <input type="text" name="user_name" placeholder="請輸入姓名">
060                            </div>
061                        </div>
062                        <div class="form-group">
063                            <label>姓別：</label>
064                            <div>
065                                <input type="radio" name="user_sex" id="boy" value="先生">
066                                <label for="boy">先生</label>
067                                <input type="radio" name="user_sex" id="girl" value="女士">
068                                <label for="girl">女士</label>
069                            </div>
070                        </div>
071                        <div class="form-group">
072                            <label>問題類型：</label>
073                            <div>
074                                <select name="q_type" id="">
075                                    <option value="XOOPS 網站架設">XOOPS 網站架設</option>
076                                    <option value="XOOPS 客製化模組開發">XOOPS 客製化模組開發</option>
077                                    <option value="XOOPS 佈景設計">XOOPS 佈景設計</option>
078                                    <option value="XOOPS 轉碼、升級">XOOPS 轉碼、升級</option>
079                                </select>
080                            </div>
081                        </div>
082                        <div class="form-group">
083                            <label>留言：</label>
084                            <div>
085                                <textarea name="user_content" id="" placeholder="請輸入您的意見"></textarea>
086                            </div>
087                        </div>
088                    </form>
089                </section>
090            </article>
091            <aside>
092                <figure>
093                    <img src="logo_2_school2015.png" alt="CK2">
094                    <figcaption>點兩下工作室成立於
095                        <time datetime="2008-10-10Z+08:00">民國97年十月十日</time>
096                    </figcaption>
097                </figure>
098            </aside>
099        </div>
100        <footer>
101            Copyright © 2017 點兩下工作室
102        </footer>
103    </div>
104    <div id="float_tool">
105        <a href="#Home" class="top">Top</a>
106    </div>
107    <script src="smooth-scroll.js"></script>
108 
109    <!--     <div id="aaa" style="
110    position: fixed;
111    top: 0;
112    left: 0;
113    width: 100%;
114    height: 100%;
115    background-color: rgba(255,255,255,0.5);
116    z-index: -100;">      
117    </div> -->
118</body>
119 
120</html>
3-3 index.html 動態標題背景

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者
