文档章节

响应式

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

没有更多内容

加载失败,请刷新页面

加载更多

awk命令用法介绍

10月18日任务 9.6/9.7 awk 1.awk(上)(下) 1.awk 分段操作功能 指定分隔符,并把第一段打印出来,不会改动文件内容 将所有内容打印出来 awk 没有指定分隔符号,则会默认用空格或者空白字符...

hhpuppy
39分钟前
1
0
Spring Cloud Eureka Server高可用之:在线扩容

本文共 1591字,阅读大约需要 6分钟 ! 概述 业务微服务化以后,我们要求服务高可用,于是我们可以部署多个相同的服务实例,并引入负载均衡机制。而微服务注册中心作为微服务化系统的重要单元...

CodeSheep
52分钟前
1
0
内网esxi主机上安装CoreOS虚拟机

CoreOS是一个为专门运行容器而设计的轻量级linux发行版,旨在通过轻量的系统架构和灵活的应用程序部署能力简化数据中心的维护成本和复杂度。它没有包管理工具,运行容器化应用以提供服务;默...

hiwill
今天
1
0
20181018 上课截图

![](https://oscimg.oschina.net/oscnet/49f66c08ab8c59a21a3b98889d961672f30.jpg) ![](https://oscimg.oschina.net/oscnet/a61bc2d618b403650dbd4bf68a671fabecb.jpg)......

小丑鱼00
今天
3
0
WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部