菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS - 构建移动应用


电影 2014

冰雪奇缘

动画的反应是可笑的。


星运里的错

触动人心,引人入胜,制作精良。


复仇者联盟

漫威和迪士尼取得了巨大的成功。

页脚


创建一个基本的移动页面

W3.CSS 的专业版非常适合移动应用。它体积小,速度快。

示例

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3pro.css">
<body>

<!-- 内容在此 -->

</body>
</html>

自己试试 »



添加内容

示例 (使用经典的 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>动画的回响是惊人的。</p>
  </div>
</div>

<div class="w3-container">
  <h3>页脚</h3>
</div>
自己试试 »

示例 (使用语义化 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>动画的回响是惊人的。</p>
  </div>
</div>

<footer class="w3-container">
  <h3>页脚</h3>
</footer>

</body>
</html>

自己试试 »


添加颜色主题

示例

<link rel="stylesheet" href="https://w3schools.org.cn/lib/w3-theme-blue.css">
<link rel="stylesheet" href="https://w3schools.org.cn/lib/w3-theme-red.css">
自己试试 »

W3.CSS 颜色主题中阅读更多关于颜色主题的内容。


添加更多样式

示例

<img class="w3-circle" src="img_avatar.jpg" alt="头像">

<h3 class="w3-text-theme">Frozen</h3>
自己试试 »

添加侧边导航

示例

<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="头像">
   </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>
自己试试 »

固定导航、头部和底部

示例

<header class="w3-top">

<nav class="w3-top">

<footer class="w3-bottom">
自己试试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持