原生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支持比较好的高级浏览器不需要考虑响应式布局 ...
随机推荐
- 第四篇 express 安装esasticsearch
1.首先,我们创建一个Express应用程序!我将使用express.js生成器. npm install -g express-generator express ./autocompleter c ...
- Windows 10 PC 安装 Docker CE
系统要求 Docker CE 支持 64 位版本的 Windows 10 Pro,且必须开启 Hyper-V. 如果系统是win 10 家庭版安装 docker 很恶心, 我也是废了2天才安装, 由 ...
- Struts2学习第七课 通配符映射
一个WEB应用可能有长百上千个action声明,可以利用struts提供的通配符映射机制吧多个彼此相识的映射关系简化为一个映射关系. 通配符映射规则: --若找到多个匹配,没有通配符的那个将胜出(精确 ...
- Umbraco中根据ID获取IPublishedContent
Umbraco中根据ID来获取IPublishedContent 在Umbraco网站上的 https://our.umbraco.com/documentation/Reference/Templa ...
- pure css简单组件，借鉴bootstrap
<!doctype html> <html> <head> <meta http-equiv="Content-type" content ...
- Ubuntu tar 解压缩命令详解
tar 解压缩命令详解: -c: 建立压缩档案 -x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只 ...
- javascript不用正则验证输入的字符串是否为空(包含空格)
在项目中需要验证输入的字符串是否为空,包括空格,不太喜欢使用正则,所以就想到了js的indexOf函数,indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,如果要检索的字符串值没 ...
- Boost Python官方样例（一）
配置环境 $ cat /etc/os-release NAME="Ubuntu" VERSION="16.04 LTS (Xenial Xerus)" ID=u ...
- Android OpenGLES2.0（十七）——球形天空盒VR效果实现
在3D游戏中通常都会用到天空盒,在3D引擎中也一般会存在天空盒组件,让开发者可以直接使用.那么天空盒是什么?天空盒又是如何实现的呢?本篇博客主要介绍如何在Android中利用OpenGLES绘制一个天 ...
- springIOC源码解析之BeanDefinition的注册
ApplicationContext类结构 context是一个存储上下文结构的东西,里面会引用BeanFactory BeanFactory类结构 我们从这句代码开始分析,(本文spring采用的 ...