码农教程 - 一技在手,衣食无忧! tools

目录

响应式网页设计 - 构架

❮ 上一节 下一节 ❯

有许多免费的 CSS 框架提供响应式设计。

使用W3.CSS

创建响应式设计的一个好方法是使用响应式样式表，例如W3.CSS

W3.CSS 可以轻松开发任何尺寸的美观网站！

W3.CSS演示

调整页面大小以查看响应能力！

伦敦

伦敦是英格兰的首都。

它是英国人口最多的城市，大都市区人口超过 1300 万。

巴黎

巴黎是法国的首都。

巴黎地区是欧洲最大的人口中心之一，拥有超过 1200 万居民。

东京

东京是日本的首都。

它是大东京地区的中心，也是世界上人口最多的都市区。

示例

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.91xjr.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-blue">
  <h1>91xjr Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>
亲自试一试 »

要了解有关 W3.CSS 的更多信息，请阅读我们的W3.CSS教程。

Bootstrap

另一个流行的框架是 Bootstrap。它使用 HTML 和 CSS 来制作响应式网页：

示例

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>
亲自试一试 »

要了解有关 Bootstrap 的更多信息，请访问我们的Bootstrap教程。

曾经听说过91xjr 空间？在这里，您可以从头开始创建您的网站或使用模板，并免费托管它。

免费开始❯

* 无需信用卡


❮ 上一节 下一节 ❯