:::
3. 自適應CSS排版
3-1 index.html
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>佈景設計</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- container 頁面容器 -->
<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>
<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>
<ol>
<li>XOOPS 網站架設</li>
<li>XOOPS 客製化模組開發</li>
<li>XOOPS 佈景設計</li>
<li>XOOPS 轉碼、升級</li>
</ol>
</section>
<section id="Contact">
<h3>聯繫我們</h3>
<form action="#" id="contact_form">
<div class="form-group">
<label>姓名：</label>
<div>
<input type="text" name="user_name" placeholder="請輸入姓名">
</div>
</div>
<div class="form-group">
<label>姓別：</label>
<div>
<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>
<div class="form-group">
<label>問題類型：</label>
<div>
<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>
<div class="form-group">
<label>留言：</label>
<div>
<textarea name="user_content" id="" placeholder="請輸入您的意見"></textarea>
</div>
</div>
</form>
</section>
</article>
<aside>
<figure>
<img src="logo_2_school2015.png" alt="CK2">
<figcaption>點兩下工作室成立於
<time datetime="2008-10-10Z+08:00">民國97年十月十日</time>
</figcaption>
</figure>
</aside>
</div>
<footer>
Copyright © 2017 點兩下工作室
</footer>
</div>
<div id="float_tool">
<a href="#Home" class="top">Top</a>
</div>
<script src="smooth-scroll.js"></script>
<video loop muted autoplay poster="video.jpg" class="video">
<source src="video.mp4" type="video/mp4">
</video>
<!-- <div id="aaa" style="
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
z-index: -100;">
</div> -->
</body>
</html>
