Ban nhạc
Cách tạo một trang web
Cách tạo trang web đáp ứng đầy đủ, trông đẹp mắt trên tất cả các thiết bị (máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại):
Tạo một bộ xương
Sử dụng bộ xương từ chương trước.
Một bộ xương đơn giản chỉ có một hình ảnh:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>The Band</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.example.com.vn/w3css/4/w3.css">
<script src="https://www.example.com.vn/lib/w3.js"></script>
<body>
<!-- Start Content -->
<div id="home" class="w3-content">
<!-- Image -->
<img src="img_la.jpg" alt="The Band" style="width:100%">
<!-- End Content -->
</div>
</body>
</html>
Thêm điều hướng
Thêm thanh điều hướng để điều hướng đến Trang chủ, Giới thiệu, Thành viên và Liên hệ.
Ví dụ
<!-- Navigation (Stays on Top) -->
<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">About</a>
<a href="#members" class="w3-bar-item w3-button">Members</a>
<a href="#contact" class="w3-bar-item w3-button">Contact</a>
</div>
Hãy tự mình thử » Thêm trình chiếu
Thay đổi hình ảnh thành một chương trình phụ.
Ví dụ
<!-- Slides -->
<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>
Hãy tự mình thử »Thêm về
Thêm một số thông tin về ban nhạc
Ban nhạc
Đây là trang web ban nhạc của chúng tôi. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch.
Ví dụ
<!-- About -->
<div id="about" class="w3-container w3-padding-32">
<h1
class="w3-center">The Band</h1>
<p>This is our band website. 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>
Hãy tự mình thử »Thêm thành viên ban nhạc
Thêm hình ảnh của từng thành viên ban nhạc
Thành viên ban nhạc
John
Paul
Lisa
Ví dụ
<!-- Members -->
<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>
Hãy tự mình thử »Thêm thông tin liên hệ
Thêm thông tin liên hệ và biểu mẫu liên hệ.
LIÊN HỆ
Chicago, MỹĐiện thoại: +00 151515
Email: [email được bảo vệ]
Cái quạt? Thả một ghi chú!
Được cung cấp bởi w3.css
Ví dụ
<div id="contact" class="w3-container w3-center w3-padding-32">
<h2
class="w3-wide">CONTACT</h2>
Chicago, US<br>
Phone: +00 151515<br>
Email: [email protected] <br>
<p class="w3-opacity w3-center"><i>Fan? Drop a
note!</i></p>
<form action="/action_page.php" target="_blank">
<input class="w3-input" type="text" placeholder="Name" required name="Name">
<input class="w3-input" type="text" placeholder="Email" required name="Email">
<input class="w3-input" type="text" placeholder="Message" required
name="Message">
<br>
<button class="w3-button w3-black"
type="submit">SEND</button>
</form>
<img src="map.jpg"
class="w3-image" style="width:100%">
</div>
Hãy tự mình thử » Thử tất cả »