最新的Web开发教程
 

自适应网页设计 - 框架


有许多现有的CSS框架,提供响应式设计。

它们是免费的,以及易于使用。


使用W3.CSS

创建一个响应式设计的好方法是使用一个负责任的样式表,就像W3.CSS

W3.CSS可以很容易地开发出好看在任何规模的网站; 台式机,笔记本电脑,平板电脑或手机:

W3.CSS演示

调整页面看到responsivenes!

伦敦

伦敦是英国的首都城市。

它是英国人口最多的城市,拥有超过13万居民的大都市区。

巴黎

巴黎是法国的首都。

巴黎地区是欧洲人口最多的中心,拥有超过12万居民中的一个。

东京

东京是日本的首都。

这是大东京地区的中心,是世界上人口最多的大都市区。

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<body>

<div class="w3-container orange">
  <h1>w3ii 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教程


引导

另一种流行的框架是引导程序,它使用HTML,CSS和jQuery做出响应的网页。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

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

要了解更多关于自举,去我们的引导教程


骨架

另一种流行的框架是骨架,它仅使用CSS来制作响应的网页。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Skeleton Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="skeleton.css">
<link rel="stylesheet" href="normalize.css">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
</head>
<body>

<div class="container">
  <h1>My First Skeleton Page</h1>
  <div class="row">
    <div class="one column">
      ...
    </div>
    <div class="eleven columns">
      ...
    </div>
  </div>
  <div class="row">
    <div class="one-half column">
      ...
    </div>
    <div class="one-half column">
      ...
    </div>
  </div>
</div>

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