樂隊
如何建立一個網頁
如何建立完全響應式的網頁，使其在所有裝置（桌面、筆記本、平板電腦和手機）上都能美觀顯示
建立骨架
使用上一章的骨架。
一個只有一個圖片的簡單骨架
示例
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>樂隊</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<script src="https://w3schools.tw/lib/w3.js"></script>
<body>
<!-- 開始內容 -->
<div id="home" class="w3-content">
<!-- 圖片 -->
<img src="img_la.jpg" alt="樂隊" style="width:100%">
<!-- 結束內容 -->
</div>
</body>
</html>
新增導航
新增一個導航欄來導航到 Home、About、Members 和 Contact。
示例
<!-- 導航 (固定在頂部) -->
<div class="w3-top w3-bar w3-black">
<a href="#home" class="w3-bar-item w3-button">Home</a>
<a href="#about" class="w3-bar-item w3-button">關於</a>
<a href="#members" class="w3-bar-item w3-button">Members</a>
<a href="#contact" class="w3-bar-item w3-button">聯絡</a>
</div>
自己動手試一試 »
新增幻燈片
將圖片更改為幻燈片。
示例
<!-- 幻燈片 -->
<img class="slides" src="img_la.jpg" width="100%">
<img class="slides" src="img_ny.jpg" width="100%">
<img class="slides" src="img_ch.jpg" width="100%">
<script>
w3.slideshow(".slides", 1500);
</script>
自己動手試一試 »
新增關於
新增一些關於樂隊的資訊
樂隊
這是我們的樂隊網站。 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。
示例
<!-- 關於 -->
<div id="about" class="w3-container w3-padding-32">
<h1 class="w3-center">樂隊</h1>
<p>這是我們的樂隊網站。 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。</p>
</div>
自己動手試一試 »
新增樂隊成員
新增每位樂隊成員的圖片
樂隊成員
John
Paul
Lisa
示例
<!-- 成員 -->
<div id="members" class="w3-container w3-padding-32">
<div class="w3-row w3-center">
<div class="w3-third">
<img src="img_bandmember.jpg" alt="Name1" style="width:60%">
</div>
<div class="w3-third">
<img src="img_bandmember.jpg" alt="Name2" style="width:60%">
</div>
<div class="w3-third">
<img src="img_bandmember.jpg" alt="Name3" style="width:60%">
</div>
</div>
</div>
自己動手試一試 »
新增聯絡資訊
新增聯絡資訊和聯絡表單。
示例
<div id="contact" class="w3-container w3-center w3-padding-32">
<h2 class="w3-wide">聯絡方式</h2>
芝加哥，美國<br>
電話: +00 151515<br>
郵箱: mail@mail.com<br>
<p class="w3-opacity w3-center"><i>粉絲？留言！</i></p>
<form action="/action_page.php" target="_blank">
<input class="w3-input" type="text" placeholder="姓名" required name="Name">
<input class="w3-input" type="text" placeholder="郵箱" required name="Email">
<input class="w3-input" type="text" placeholder="訊息" required name="Message">
<br>
<button class="w3-button w3-black" type="submit">傳送</button>
</form>
<img src="map.jpg" class="w3-image" style="width:100%">
</div>
親身體驗 » 嘗試全部 »
