原生css3作响应式布局
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo.css" rel="stylesheet" />
</head>
<body>
<!--<div id="d1"></div>-->
<div id="header">头部</div>
<div id="main">
<div id="main-left">主题-左边</div>
<div id="main-center">主题-中间</div>
<div id="main-right">主题-右边</div>
</div>
<div id="footer"></div>
</body>
</html>
/*#d1{
height:200px;
width:400px;
border:solid 1px red;
线性渐变，开始位置，结束位置，开始颜色，结束颜色，色标（色标位置，色标颜色，可以有多个色标，色标即使颜色过渡点）
background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff));
径向渐变
background:-webkit-gradient(radial,center center,0,center center,460,from(blue),to(red),color-stop(0.6,#fff));
}*/
*{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
#header{
height:100px;
border:solid 1px red;
margin:0px auto;
}
#main{
margin:10px auto;
height:400px;
}
#footer{
margin:0px auto;
height:100px;
border:solid 1px red;
}
@media screen and (min-width:900px)
{
#header,#footer{
width:800px;
}
#main{
width:800px;
height:400px;
}
#main-left{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
#main-center
{
width:394px;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
}
@media screen and (min-width:600px) and (max-width:900px)
{
#header,#footer
{
width:600px;
}
#main
{
width:600px;
height:400px;;
}
#main-left
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
#main-center
{
width:396px;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
display:none;
}
}
@media screen and (max-width:600px)
{
#header,#footer
{
width:300px;
}
#main
{
width:300px;
height:400px;;
}
#main-left
{
display:none;
}
#main-center
{
width:300px;
height:400px;
border:solid 1px red;
}
#main-right
{
display:none;
}
}
原生css3作响应式布局的更多相关文章
- CSS3之响应式布局
在没有C3的时候,响应式布局是通过js来实现的. 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以 ...
- html5 + css3 + jQuery + 响应式布局设计
1. [代码][HTML]代码 <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...
- CSS3之响应式布局及其应用
使用 Media 属性前需添加兼容移动设备优先代码 <meta name=”viewport”content=”width=device-width,initial-scale=1.0,maxi ...
- 【CSS3】响应式布局
准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 1 <meta name="viewport" content ...
- css3图片响应式布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- css3media响应式布局
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的 普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很 ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
随机推荐
- Springboot ResponseEntity IE无法正常下载文件
项目在google浏览器下都很nice了,但当测试到IE的时候开始出现各种问题. 项目是前端js通过URL传参fileName到后台解析返回ResponseEntity 前端代码如下: window. ...
- 11、perl语言的记录分割符$/ $\
参考:https://www.jianshu.com/p/8ffd53b1bd41 perl自带的perldoc文档.perldoc -v '$/' :perldoc -f join $/ #输入记 ...
- hdu1072
#include <iostream> #include <cstdio> #include <cstring> #include <queue> us ...
- C#结构体指针的定义及使用详解（intptr的用法）
在解析C#结构体指针前,必须知道C#结构体是如何定义的.在c#中同样定义该结构体. C#结构体指针之C#结构体的定义: [StructLayout(LayoutKind.Sequential)] pu ...
- OpenStack虚机状态变化图解
对官网上内容的一个翻译,方便自己以后查找资料用 The following diagrams and tables show the required virtual machine (VM) sta ...
- C - Trailing Zeroes (III)（二分）
You task is to find minimal natural number N, so that N! contains exactly Q zeroes on the trail in d ...
- 清北刷题冲刺 11-03 p.m
三向城 #include<iostream> #include<cstdio> using namespace std; int n,x,y; int main(){ freo ...
- Proxy模式(代理[延迟]模式)
Proxy?? Proxy是"代理人"的意思,它指的是代替别人进行工作的人.代理实际上就是使用委托的机制,在代理的过程中你可以做点其他的事情,然后再来执行被代理对象的代码. 知识储 ...
- tomcat内存配置
-Xms521M-Xmx1024M-XX:PermSize=64M -Xms256m -Xmx1024m -XX:MaxPermSize=256m
- fastJson Gson对比及java序列化问题
一个案例 POJO没有set方法, 造成反序列化时出现NPE问题.实际场景:POJO是第三方提供的,final public class XJSONTest { public static void ...