文档章节

响应式

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;
	}
}

 

© 著作权归作者所有

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

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

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

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

杨奉武
2016/12/20
0
0
微服务和响应式系统

微服务是一组隔离的单一职责的服务,服务作为独立个体可以自由激活或关闭(弹性可回复),可以自由分布(伸缩可扩展)。微服务之间通过异步分界来解耦合,这样,在时间层面的并行和空间层面的分布...

LeonalGU
2017/11/08
0
0
响应式Web设计(一):响应式Web设计的背景

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

幸福2胖纸
2013/05/04
0
4
响应式编程的基本概念

在参加了许多次谈话并阅读了大量的博文后,Peter Ledbrook仍然未能深刻地理解响应式编程的含义。因此他认为,响应式编程领域存在一个关键的问题,就是它之所以那么难以理解是因为所有的术语词...

oschina
2016/01/24
4.9K
4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ在CentOS环境安装

1.废话不多说准备一台虚拟机,系统为centos,我这里使用的系统版本如下图所示:

凌晨一点
45分钟前
0
0
线程池相关

在java.util.concurrent包下,提供了一系列与线程池相关的类。 使用线程池的好处 降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗; 提高响应速度。当任务到达时,任务...

edwardGe
47分钟前
0
0
学习大数据这三个关键技术是一定要掌握!

大数据时代全面来临,大数据、人工智能等技术引领科技创新潮流,获得国家政策大力支持,前景广阔。学习大数据技术的人自然是络绎不绝, 学习大数据虽然是一个趋势,但也要注意大数据培训课程...

董黎明
今天
0
0
jetbrains 上传代码到github

设置中找github 获取token 验证是否成功 测试git 生成key,一路回车即可 ssh-keygen -t rsa -C “youremail@example.com” 打开pub复制key,需要再次输入一次密码 验证是否成功,输入yes即可...

阿豪boy
今天
0
0
分布式服务框架(拾遗)

前言 现在的大部分工程都已经是基于分布式架构来处理。所以这里对分布式框架做一个简单的总结 常用的RPC框架 RPC框架原理 RPC(Remote Procedure Call,远程过程调用)一般用来实现部署在不同...

kukudeku
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部