文档章节

响应式

hey--老妖
 hey--老妖
发布于 2017/04/21 19:14
字数 206
阅读 16
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式</title>  
		<!-- 当前屏幕的宽高,为当前设备的宽度,按比例缩放 -->                 
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="css/style.css">
	<style>
		
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="content">
		<div class="left"></div>
		<div class="main"></div>
		<div class="right"></div>
	</div>
	<div class="footer"></div>
</body>
</html>
*{
	padding: 0px;
	margin: 0px;
}
.header,
.content,
.footer{
	margin: 10px auto;

}
.header{
	height: 100px;
	background-color: yellow;
}
.left,
.main,
.right{
	background-color: black;
}
.footer{
	height: 100px;
	background-color:red ;
}
/* 960*/
@media screen and (min-width: 960px){
	.header,
	.content,
	.footer{
		width: 960px; 
	}
	.left,
	.main,
	.right{
		float: left;
		height: 500px;
	}
	.left,
	.right{
		width: 200px;
	}
	.main{
		margin-left: 5px;
		margin-right: 5px;
		width: 550px;
	}
	.content{
		height: 500px;
	}
}
/* 600-960 */
@media screen and (min-width: 600px) and (max-width: 960px){
	.header,
	.content,
	.footer{
		width: 600px;
	}
	.left,
	.main{
		float: left;
		height: 400px;
	}
	.right{
		display: none;
	}
	.left{
		width: 160px;
	}
	.main{
		width: 435px;
		margin-left: 5px;
	}
	.content{
		height: 400px;
	}
}
/* 600以下 */
@media screen and (max-width: 600px){
	.header,
	.content,
	.footer{
		width: 400px;
	}
	.left,
	.right{
		width: 400px;
		height: 100px;
	}
	.main{
		margin-top: 10px;
		width: 400px;
		height: 200px
	}
	.right{
		margin-top: 10px;
	}
	.content{
		height: 420px;
	}
}

 

© 著作权归作者所有

共有 人打赏支持
上一篇: DOM
hey--老妖
粉丝 3
博文 38
码字总数 21133
作品 0
潮州
前端工程师
私信 提问
18 个详细的响应式 Web 设计教程

在这篇文章中,我想跟你分享 18 个很有用的响应式 Web 设计的教程,这些教程可以帮助你学习响应式设计,包括瀑布流表格、图片和 media queries。 创建移动优先的响应式设计 使用 Sass 和 Co...

小编辑
2013/06/18
10.5K
5
关于STM32的外部引脚中断的问题

今天想用自己以前的比较干净的工程模板做一个东西,,,,,,,在添加上引脚中断的时候,,突然想知道自己配置的中断优先级是否正确执行,,,,, 以前刚学习32的时候测试过是可以的,,不过今天发现了一个...

杨奉武
2016/12/20
0
0
响应式Web设计(一):响应式Web设计的背景

  不是专业前端,可2011年底至今大部分时间在做着一个前端开发工程师的事情,所以多少也有点总结,多少也有点“经验”和分享。 响应式Web设计不是我首创的概念,早就有了,我这里只不过把自...

幸福2胖纸
2013/05/04
0
4
STM32中中断优先级理解

很多人在配置STM32中断时对固件库中的这个函数NVIC_PriorityGroupConfig()——配置优先级分组方式,会很不理解,尤其是看中文翻译版的,因为中文翻译版里把这里翻译成“先占优先级和从优先级...

shenhuan1104
2017/10/19
0
0
Spring 5 响应式编程

近年来,响应式编程在开发者社区和客户中很受欢迎,由于其以声明的方式构建应用程序的能力,而不是强制,形成更加敏感和有弹性的应用。Spring 5 将反应系统纳入其核心框架的事实已经显示出向...

oschina
2018/01/04
2.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

lucene 评分要素解析

基本规则:

Java搬砖工程师
37分钟前
1
0
ubutnu 14.04 安装JIRA

系统版本:Ubuntu 14.04 下载jira安装文件 sudo wget https://downloads.atlassian.com/software/jira/downloads/atlassian-jira-software-7.1.9-x64.bin 修改文件权限 sudo chmod 777 atl......

Kampfer
47分钟前
0
0
软件开发模型优缺点及其适用范围

瀑布模型、快速原型模型、增量模型、螺旋模型 瀑布模型也称软件生存周期模型。 优点: (1)它在软件工程中占有重要地位,它提供了软件开发的基本框架,这比依靠“个人技艺”开发软件好得多。...

无极之岚
48分钟前
0
0
孩子们各显神通对付 iOS 12「屏幕使用时间」的限制

简评:2018 年秋季,苹果公司推出了 iOS 12,其中备受好评的一项改变是:增加了屏幕使用时间限制,以减轻沉迷手机的状况。三个月过去后,这项功能似乎并没有对孩子造成太多困扰,道高一尺魔高...

极光推送
52分钟前
3
1
springCloud Spring Boot mybatis分布式微服务云架构-docker-feign-hystrix-ribbon(七)

简介 在上一节中,我们讨论了feign+hystrix在项目开发中,除了考虑正常的调用之外,负载均衡和故障转移也是关注的重点,这也是feign + ribbon+hystrix的优势所在,本节我们就讨论一下在feign...

sccspuercode
53分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部