W3.CSS Mobile（移動(dòng)）

2020-11-23 14:11 更新

創(chuàng)建一個(gè)基本的移動(dòng)頁面

CSS 的專業(yè)版非常適合移動(dòng)應(yīng)用程序。它很小，而且非?？臁?/p>

實(shí)例


<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>

嘗試一下 ?

添加內(nèi)容

實(shí)例(使用經(jīng)典的HTML元素)

<div class="w3-container"><h1>電影 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>人們對(duì)動(dòng)畫的反應(yīng)很荒謬.</p></div></div> 
<div class="w3-container"><h3>頁腳</h3></div>

嘗試一下 ?

實(shí)例(使用語義HTML元素)

<header class="w3-container"><h1>頁眉</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>人們對(duì)動(dòng)畫的反應(yīng)很荒謬.</p></div></div> 
<footer class="w3-container"><h3>頁腳</h3></footer>

嘗試一下 ?

添加顏色主題

實(shí)例

<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">

嘗試一下 ?

添加更多的風(fēng)格

實(shí)例

<img class="w3-circle" src="img_avatar.jpg" alt="avatar">
<h3 class="w3-text-theme">Frozen</h3>

嘗試一下 ?

添加側(cè)邊導(dǎo)航欄

實(shí)例

<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="#">主頁</a>
<a class="w3-bar-item w3-button" href="#">朋友圈</a>
<a class="w3-bar-item w3-button" href="#">消息</a>
</nav>
<script>
function openSidebar() {
document.getElementById("mySidebar").style.display = "block";}
function closeSidebar() {
document.getElementById("mySidebar").style.display = "none";}</script>

嘗試一下 ?

固定導(dǎo)航頁眉和頁腳

實(shí)例

<header class="w3-top">
<nav class="w3-top">
<footer class="w3-bottom">

嘗試一下 ?


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)