怎么用html5完成响应式布局?

发布网友发布时间：2022-04-26 00:38

共2个回答

热心网友时间：2022-05-12 04:59

响应式布局最简单的就是用css3来实现。我举一个最简单的例子。

下面是html代码。
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">

<meta name ="viewport" content="width = device-width,initial-scale=1">
<title>index01</title>

<link href="style01.css" type="text/css" rel="stylesheet">
</head>
<body>

<div class="heading">第一</div>

<div class="container">

<div class="left">第二</div>

<div class="main">第三</div>

<div class="right">第四</div>

</div>

<div class="footing">第五</div>
</body>
</html>
下面是css3代码
*{
margin:0px;
padding: 0px;
}
.heading,
.container,
.footing{
margin: 10px auto;
}

.heading{
height: 100px;
background-color: red;
}
.left,
.right,
.main{
height: 300px;
background-color: yellow;
}
.footing{
height: 100px;
background-color: gray;
}

@media screen and (min-width: 960px){
.heading,
.container,
.footing{
width:960px;

}
.left,
.main,
.right{
float: left;
height: 500px;
}
.left,
.right{
width:200px;

}
.main{
margin: 0px 5px;
width:550px;
}
.container{
height: 500px;
}
}
@media screen and (min-width: 600px) and (max-width: 960px){
.heading,
.container,
.footing{
width: 600px;

}
.left,
.main{
float: left;
height:400px;

}
.right{
display: none;
}
.left{
width: 160px;

}
.main{
width: 435px;
margin-left: 5px;
}
.container{
height: 400px;
}
}

@media screen and (max-width: 600px){
.heading,
.container,
.footing{
width: 400px;
}
.left,
.right{
width: 400px;
height: 100px;
}

.main{
margin-top: 10px;
width:400px;
height:200px;
}
.right{
margin-top: 10px;

}
.container{
height: 420px;
}
}
这样就可以实现简单的响应式布局！如果你想要了解的话，可以到华清远见学习一下。我就是在那里学习的。

热心网友时间：2022-05-12 06:17

步骤1 创建空白的HTML 5模版
首先，我们创建一个空白的模版，代码很简单，如下所示：

复制代码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：

复制代码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的步骤3 往HTML 5标签中增加代码
1）首先往标题中增加如下代码：

Simple HTML5 Template

复制代码
2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：

Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact

复制代码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：

This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply mmy text of the printing and typesetting instry.
Lorem Ipsum has been the instry's standard mmy text ever since the
1500s

复制代码
4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：

被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。