W3.CSS - Xây dựng ứng dụng di động
Phim 2014
Đông cứng
Phản hồi về hình ảnh động thật lố bịch.
Lỗi ở các vì sao của chúng ta
Chạm vào, hấp dẫn và thực sự được thực hiện tốt.
Avengers
Một thành công lớn cho Marvel và Disney.
Tạo một trang di động cơ bản
Phiên bản chuyên nghiệp của W3.CSS hoàn hảo cho các ứng dụng di động. Nó nhỏ và rất nhanh.
Ví dụ
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.example.com.vn/w3css/4/ w3pro.css ">
<body>
<!-- Content here -->
</body>
</html>
Thêm nội dung
Ví dụ (sử dụng các phần tử HTML cổ điển)
<div class="w3-container">
<h1>Movies 2014</h1>
</div>
<div class="w3-cell-row">
<div class="w3-cell">
<img
src="img_avatar.jpg">
</div>
<div class="w3-cell w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<div class="w3-container">
<h3>Footer</h3>
</div>
Hãy tự mình thử »Ví dụ (sử dụng các phần tử HTML ngữ nghĩa)
<header class="w3-container">
<h1>Header</h1>
</header>
<div class="w3-cell-row">
<div class="w3-cell">
<img
src="img_avatar.jpg">
</div>
<div class="w3-cell w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<footer class="w3-container">
<h3>Footer</h3>
</footer>
</body>
</html>
Thêm chủ đề màu sắc
Ví dụ
<link rel="stylesheet" href="https://www.example.com.vn/lib/w3-theme-blue.css">
<link rel="stylesheet" href="https://www.example.com.vn/lib/w3-theme-red.css">
Hãy tự mình thử »Đọc thêm về chủ đề màu trong Chủ đề màu W3.CSS .
Thêm phong cách khác
Ví dụ
<img class="w3-circle" src="img_avatar.jpg" alt="avatar">
<h3 class="w3-text-theme">Frozen</h3>
Hãy tự mình thử »Thêm điều hướng bên
Ví dụ
<nav class="w3-sidebar w3-bar-block w3-card" style="width:30%">
<div class="w3-red">
<a href="javascript:void(0)" onclick="closeSidebar()"
class="w3-button w3-display-topright w3-xlarge">X</a>
<div
class="w3-padding-large w3-center">
<img class="w3-circle" src="img_avatar.jpg"
alt="avatar">
</div>
</div>
<a
class="w3-bar-item w3-button"
href="#">Home</a>
<a class="w3-bar-item w3-button" href="#">Friends</a>
<a
class="w3-bar-item w3-button" href="#">Messages</a>
</nav>
<script>
function openSidebar() {
document.getElementById("mySidebar").style.display = "block";
}
function closeSidebar() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
Hãy tự mình thử »