Tad 教材網 - 線上書籍

:::

2. 用CSS3美化版面

2-2 style.css next

\[1061\] XOOPS佈景設計
==================

```
<pre class="brush:xml;">

<body>
    
    <div class="container">
        <header id="Home">
            <hgroup>
                <h1>點兩下電腦工作室</h1>
                <h2>只要點兩下滑鼠，這個世界就能連起更多友善的網</h2>
            </hgroup>
            
            <nav>
                <ul>
                    <li><a href="#About">關於我們</a></li>
                    <li><a href="#Service">服務項目</a></li>
                    <li><a href="#Contact">聯繫我們</a></li>
                </ul>
            </nav>
        </header>

<div class="row">
            <article>
                <section id="About">
                    <h3>關於我們</h3>
                    <a href="#Home">Top</a>
                    <h4>【緣起】</h4>
                    <p>XOOPS 正體中文延伸計畫網站的站長 Tad在台南社大任教三年後，成立了點兩下資訊社，讓有興趣從事網頁設計、網站架設、PHP程式開發、佈景設計的學員們得有更進一步學習的空間。</p>
                    <p>在點兩下資訊社運做一年後，部份成員學有專精，但空有一身功夫卻無處發揮，甚為可惜。因此，在 Tad老師提議，經大夥兒討論後，成立了點兩下工作室。</p>
                    <h4>【願景】</h4>
                    <p>隨著 XOOPS 網站越來越成熟，使用者也越來越多，但國內資源始終缺乏整合，而社團成員來自各個產業，最明白各種產業需求，因此點兩下工作室除了以資源整合為目標外，更希望成為國內 XOOPS 資源開發的推手。</p>
                    <p>XOOPS 的綜合應用、困難排解為工作室成員基礎能力，而模組開發、佈景設計則列為主要項目，未來希望工作室能推出各種模組來供大家使用。</p>
                    <p>此外，我們也希望對於弱勢團體、公益團體、或者社區成長有所協助，故每個月我們預計會有一定名額，來幫這些對象架設網站，提供技術協助。（相關辦法經成員討論後會另行發佈）</p>
                    <p>若有公司行號或其他單位，對於 XOOPS 系統有客製化需求，我們也可以在討論評估後提供相關服務。</p>
                </section>
                <section id="Service">
                    <h3>服務項目</h3>
                    <a href="#Home">Top</a>
                    <ol>
                        <li>XOOPS 網站架設</li>
                        <li>XOOPS 客製化模組開發</li>
                        <li>XOOPS 佈景設計</li>
                        <li>XOOPS 轉碼、升級</li>
                    </ol>
                </section>
                <section id="Contact">
                    <h3>聯繫我們</h3>
                    <a href="#Home">Top</a>
                    <form action="#">
                        <div>
                            <label>姓名：</label>
                            <input type="text" name="user_name" placeholder="請輸入姓名">
                        </div>
                        <div>
                            <label>姓別：</label>
                            <input type="radio" name="user_sex" id="boy" value="先生">
                            <label for="boy">先生</label>
                            <input type="radio" name="user_sex" id="girl" value="女士">
                            <label for="girl">女士</label>
                        </div>
                        <div>
                            <label>問題類型：</label>
                            <select name="q_type" id="">
                                <option value="XOOPS 網站架設">XOOPS 網站架設</option>
                                <option value="XOOPS 客製化模組開發">XOOPS 客製化模組開發</option>
                                <option value="XOOPS 佈景設計">XOOPS 佈景設計</option>
                                <option value="XOOPS 轉碼、升級">XOOPS 轉碼、升級</option>
                            </select>
                        </div>
                        <div>
                            <label>留言：</label>
                            <textarea name="user_content" id="" cols="30" rows="10" placeholder="請輸入您的意見">