W3.CSS - एक मोबाइल ऐप बनाना
मूवी 2014
जमा हुआ
एनिमेशन की प्रतिक्रिया हास्यास्पद थी।
हमारे सितारों में खोट है
स्पर्श, मनोरंजक और वास्तव में अच्छी तरह से बनाया गया।
द एवेंजर्स
मार्वल और डिज्नी के लिए एक बड़ी सफलता।
एक बेसिक मोबाइल पेज बनाएं
W3.CSS का प्रो संस्करण मोबाइल ऐप्स के लिए एकदम सही है। यह छोटा और बहुत तेज है।
उदाहरण
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3pro.css">
<body>
<!-- Content here -->
</body>
</html>
सामग्री जोड़ें
उदाहरण (क्लासिक HTML तत्वों का उपयोग करके)
<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>
उदाहरण (अर्थपूर्ण HTML तत्वों का उपयोग करके)
<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>
एक रंग थीम जोड़ें
उदाहरण
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-red.css">
W3.CSS Color Themes में कलर-थीम के बारे में और पढ़ें ।
अधिक शैली जोड़ें
उदाहरण
<img class="w3-circle" src="img_avatar.jpg" alt="avatar">
<h3 class="w3-text-theme">Frozen</h3>
Add Side Navigation
Example
<nav class="w3-sidebar w3-bar-block w3-card" style="width:30%">
<div class="w3-red">
<a href="#" 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>
Fixed Navigation, Header and Footer
Example
<header
class="w3-top">
<nav
class="w3-top">
<footer
class="w3-bottom">