html5响应式布局案例

在本案例中，网页的界面布局将会根据当前浏览器的大小进行变化，做出响应。主要使用CSS的@media来进行设计。实现效果类似一淘网，一淘网使用的就是响应式布局。案例代码如下：

（1）HTML代码如下：

[html] view plain copy print?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width,initial-scale=1">
<title></title>
<link href="style02.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>

（2）CSS代码如下：

[css] view plain copy print?

*{
margin: 0px;
padding: 0px;
}
.heading,
.container,
.footing{
margin: 10px auto;
}
.heading{
height:100px;
background-color: chocolate;
}
.left,
.right,
.main{
background-color: aqua;
}
.footing{
height: 100px;
background-color: blanchedalmond;
}
/*不小于960时，这样设计*/
@media screen and (min-width: 960px){
.heading,
.container,
.footing{
width: 960px;
}
.left,
.main,
.right{
float: left;
height: 500px;
}
.left,
.right{
width: 200px;
}
.main{
margin-left: 5px;
margin-right: 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{
display: none;
}
.main{
margin-top: 10px;
margin-bottom: 10px;
width: 400px;
height: 420px;
}
.container{
height: 420px;
}
}

（3）最后的运行效果如下：

。

html5响应式布局案例相关推荐

html5响应式布案例,HTML5响应式布局案例
在本案例中,网页的界面布局将会根据当前浏览器的大小进行变化,做出响应.主要使用CSS的@media来进行设计.实现效果类似一淘网,一淘网使用的就是响应式布局.案例代码如下: (1)HTML代码如下: ...
南京html5响应式网站,HTML5响应式布局的设计方法和响应式前端优化
作为一名优秀的web前端人员,不懂响应式布局怎么可以呢? 今天跟大家分享web前端开发和设计的干货:关于响应式布局的设计方法和响应式前端优化. 我们都知道,目前主流的pc屏幕的分辨率都是1366*76 ...
html5响应式布局实例,CSS3响应式布局案例
布局结果图: 电脑全屏: 手机浏览: 竖屏: 横屏: 代码: 响应式布局 * { margin: 0; padding: 0; } html, body { height: 100%; font: 2 ...
html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 这个概念是为 ...
浅谈html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...
CSS——响应式布局案例以及点击出现下拉框实现过程
文章目录前言一.示例图二.实现过程 1.HTML结构 2.CSS样式 3.JS行为总结前言本文主要介绍有关响应式布局的案例实现过程. 一.示例图二.实现过程 1.HTML 代码如下(示例 ...
html，css响应式布局案例练习--星巴克官网demo
前言继续练习响应式布局,我这次选的是星巴克的官网,进行一个页面的还原,还原程度达不到100%,不过也是可以进行一个学习过程的一个练习,细节很多,本人由于初学阶段,用了一天的时间就写了一个官网首页,兼 ...
Bootstrap响应式布局案例- -阿里百秀
文章目录 1.搭建结构 2.show.html 3.index.css 4.所需图片 1.搭建结构 2.show.html <!DOCTYPE html> <html lang=&q ...
html怎么做成响应式的,怎么用html5完成响应式布局？
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...

html5响应式布局案例

html5响应式布局案例相关推荐

最新文章

热门文章