CSS3 auto revolution practitioner!
1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="styles/autoresolution.css" rel="stylesheet" />
</head>
<body>
<div class="page">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="clear"> </div>
<div class="bottom">
bottom
</div> </div>
</body>
</html>
2.style sheet
body {
width: 100%;
} /*basic universal settings for page main parts*/
.page {
background-color: #fff;
} .page > .left {
background-color: #f00;
float: left;
} .page > .right {
background-color: #f0f;
float: right;
} .page > .bottom {
background-color: #00f;
width: 100%;
} .clear {
clear: both;
} /*page width bigger than 1024 strategy*/
@media screen and (min-width:1024px) {
.left {
width: 40%;
} .right {
width: 60%;
}
} @media screen and (max-width:1024px) {
.left {
width: 100%;
} .right {
width: 100%;
}
}
CSS3 auto revolution practitioner!的更多相关文章
- css各种鼠标手型集合
比较齐全的鼠标手型css在国内的网站上是没搜到这么全的比如说哪个禁止的手型:鼠标往下移动即可看到效果: html代码如下: <h1>Cursors</h1> <div c ...
- 如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画
但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度. 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时,该怎么办呢? 从 MDN 的可以查到 ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
随机推荐
- MySQL 绿色版(zip) 安装
设置环境变量Path,指向到MYSQL下的bin目录 修改MYSQL下的my-default.ini basedir=%MYSQL_HOME% datadir=%MYSQL_HOME%\data 到M ...
- memache session
Memcache和PHP memcach扩展安装请见http://koda.iteye.com/blog/665761 设置session用memcache来存储 方法I: 在 php.ini 中全局 ...
- day12
JSP指令 JSP指令概述 JSP指令的格式:<%@指令名 attr1="" attr2="" %>,一般都会把JSP指令放到JSP文件的最上方 ...
- Js(javaScript)的闭包原理
问题?什么是js(javaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 小编 ...
- ArcGIS中如何导出单个矢量要素图形
原文:ArcGIS中如何导出单个矢量要素图形 在ARCGIS中载入了一张含有省界的中国地图,是SHP文件.现在我只想要其中一块地区的,实现方法如下: 加入到ArcGIS后,右击图层,打开属性表(att ...
- RTSP交互命令简介及过程参数描述
目录 [hide] 1 RTSP消息格式 2 简单的rtsp交互过程 3 rtsp中常用方法 3.1 OPTION 3.2 DESCRIBE 3.3 SETUP 3.4 PLAY 3.5 PAUSE ...
- [LeetCode]题解(python):041-First Missing Positive
题目来源 https://leetcode.com/problems/first-missing-positive/ Given an unsorted integer array, find the ...
- ACCESS自动编号重新从1开始
方法一: 删掉自动编号的字段,再建一个同样的自动编号字段. 方法二: 选择工具,再选择数据库实用工具,单击压缩和修复数据库,这样就OK了. 方法三:(提示错误“无效的数据字段类型” 尝试失败) ...
- Selenium2学习-036-WebUI自动化实战实例-034-JavaScript 在 Selenium 自动化中的应用实例之六(获取 JS 执行结果返回值)
Selenium 获取 JavaScript 返回值非常简单,只需要在 js 脚本中将需要返回的数据 return 就可以,然后通过方法返回 js 的执行结果,方法源码如下所示: /** * Get ...
- SpringMVC @ResponseBody的使用
原文链接:http://www.jianshu.com/p/7097fea8ce3f@ResponseBody用法作用:该注解用于将Controller的方法返回的对象,根据HTTP Request ...