原生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支持比较好的高级浏览器不需要考虑响应式布局 ...
随机推荐
- xgene：疾病相关基因，耳聋，彩色，老年痴呆，帕金森
神经元的传递:一个下游神经元,它接受其上游神经元的各个突触传过来的信号,然而,每个突触对该下游神经元的激活权重是不同的. 从神经网络的本质上说,当人连续.多次遭受失败的时候,大脑内就会释放大量的抑制性 ...
- JSP错误页面
exception是JSP九大内置对象之一,其实例代表其他页面的异常和错误.只有当页面是错误处理页面时,即isErroePage为 true时,该对象才可以使用.对于C项,errorPage的实质就是 ...
- Spring入门第二十七课
声明式事务 直接上代码: db.properties jdbc.user=root jdbc.password=logan123 jdbc.driverClass=com.mysql.jdbc.Dri ...
- 线程池和Thread
1.线程池 创建线程需要时间.如果有不同的短任务要完成,就可以事先创建许多线程,在应完成这些任务时发出请求.这个线程数最好在需要更多线程时增加,在需要释放资源时减少.不需要自己创建这样一个列表.该列表 ...
- JavaScript 性能优化
加载和执行 1. </body>闭合标签之前,将所有的<script> 标签放在页面底部,确保在脚步执行之前页面已经完成渲染. 2. 合并脚本.下载单个 100KB 的文件将比 ...
- CF10D/POJ2127 LCIS解题报告
题目传送门(洛谷)(CF)(POJ) 前言 期末考试前的最后一篇题解,希望期末考 rp++ 奇怪,为什么在CF上能过的代码到POJ上就 听取WA声一片 (不管了) 题目思路 LCIS模版O(n²) ...
- linux下python3的安装（已安装python2的情况下）
前段时间想自学一下python,就在虚拟机里已安装python2.7的情况下又安装了最新版python3.6.4.于是问题来了..只要一打开终端就出现一大段错误代码(忘记截图了),当时看到是ros和p ...
- MacOS下，Python2和Python3完美兼容使用(转)
问题阐述: MacOS默认Python版本是2.7.10,随着Python3的进一步占有市场,Python2.7也将在2020年结束维护,所以在同一台电脑上安装多个Python版本势在必行. 一.py ...
- jcmd jmap应用：一个String经典笔试题的验证
笔试题: String strA = new String("123123");这一行中创建了几个String对象?? public class StringHeapCountTe ...
- 在startup中遍历程序集
在aspnetcore中是可以使用AppDomain的,如:在ConfigureServices中,可以使用以下代码获取项目引用的所有dll, var assemblies = AppDomain.C ...