原生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支持比较好的高级浏览器不需要考虑响应式布局 ...
随机推荐
- 14、/proc/cpuinfo 文件(查看CPU信息)
转载http://www.cnblogs.com/itcomputer/p/4888438.html /proc/cpuinfo文件分析 根据以下内容,我们则可以很方便的知道当前系统关于CPU.CPU ...
- 5.6 安装slack，Skype，google
1．将安装包放到自己的目录下: 2.打开终端,进入安装包所在的目录(cd /文件名) 3.输入命令:sudo apt-get install 安装包名 4．等待安装结束 5. 在搜索框中输入关键字sl ...
- python写入文件编码报错
decode的作用是将其他编码的字符串转换成unicode编码,如str1.decode('gb2312'),表示将gb2312编码的字符串str1转换成unicode编码. encode的作用是将u ...
- gitlab 502解决方案
gitlab突然出现502 尝试gitlab-ctl restart.gitlab-ctl reconfigure 无效. 之后做法: #查看git日志 gitlab-ctl tail发现日志报错:端 ...
- 交叉编译Spice-gtk
Fedora环境 编译环境 操作系统: 64位 Fedora23 下载源文件 spice-gtk.spice-protocol 安装依赖 $ sudo yum install -y dh-autore ...
- Mysql导入导出数据库11111
导出: 通过命令行 在MYSQL中的bin文件夹的目录下 输入:D:\phpStudy\MySQL\bin>mysqldump -uroot -p 数据库名 > 导出的文件名 导入: 需 ...
- bzoj3731: Gty的超级妹子树（树分块）
传送门 分块树,代码参考了Manchery的 具体细节还是看代码好了 这题卡常……注意常数写好点…… //minamoto #include<iostream> #include<c ...
- Cef3 学习资料
fanfeilong/cefutil CEF General Usage(CEF3预览) CEF General Usage(CEF3预览) 介绍 CEF全称Chromium Embedded Fra ...
- 解决Win10中vmware运行特别慢问题
1.关闭防火墙:win+S打开搜索框,输入防火墙,选择windowsDefender防火墙 ,如图: 2.启用或关闭防火墙,如图: 3.关闭防火墙,两个选项都关闭,如图: 4.打开VMware,如果速 ...
- Linux服务之 Nginx安装
安装包下载: 链接:https://pan.baidu.com/s/1yna9nvT_9iYw4_0uVQRgFw 提取码:nurm yum -y install gcc automake autoc ...