1.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta charset="utf-8" />
  6.     <link href="styles/autoresolution.css" rel="stylesheet" />
  7. </head>
  8. <body>
  9.     <div class="page">
  10.         <div class="left">
  11.             left
  12.         </div>
  13.         <div class="right">
  14.             right
  15.         </div>
  16.         <div class="clear">
  17.  
  18.         </div>
  19.         <div class="bottom">
  20.             bottom
  21.         </div>
  22.  
  23.     </div>
  24. </body>
  25. </html>

　　2.style sheet

  1. body {
  2.     width: 100%;
  3. }
  4.  
  5. /*basic universal settings for page main parts*/
  6. .page {
  7.     background-color: #fff;
  8. }
  9.  
  10.     .page > .left {
  11.         background-color: #f00;
  12.         float: left;
  13.     }
  14.  
  15.     .page > .right {
  16.         background-color: #f0f;
  17.         float: right;
  18.     }
  19.  
  20.     .page > .bottom {
  21.         background-color: #00f;
  22.         width: 100%;
  23.     }
  24.  
  25. .clear {
  26.     clear: both;
  27. }
  28.  
  29. /*page width bigger than 1024 strategy*/
  30. @media screen and (min-width:1024px) {
  31.     .left {
  32.         width: 40%;
  33.     }
  34.  
  35.     .right {
  36.         width: 60%;
  37.     }
  38. }
  39.  
  40. @media screen and (max-width:1024px) {
  41.     .left {
  42.         width: 100%;
  43.     }
  44.  
  45.     .right {
  46.         width: 100%;
  47.     }
  48. }

　　

CSS3 auto revolution practitioner!的更多相关文章

  1. css各种鼠标手型集合

    比较齐全的鼠标手型css在国内的网站上是没搜到这么全的比如说哪个禁止的手型:鼠标往下移动即可看到效果: html代码如下: <h1>Cursors</h1> <div c ...

  2. 如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画

    但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度. 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时,该怎么办呢? 从 MDN 的可以查到 ...

  3. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  4. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  5. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  6. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  7. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  8. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  9. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

随机推荐

  1. MySQL常用SQL/函数汇总(持续更新)

    自动生成ROWNUN SELECT (@rowNO := @rowNo+1) AS rowno,a.uuid FROM (SELECT * FROM h_log_proc) a,(SELECT @ro ...

  2. [教程] 以本论坛为例，手把手教你使用按键精灵POST登陆网页

    本帖最后由 isaacc 于 2012-2-26 11:08 编辑 整个操作,很无脑.只要你够勤快,你学不会,你来咬我.懒人和伸手党就直接复制代码去玩吧,但我不是叫你拿去干坏事. 准备工具:WPE和I ...

  3. 【转】UnityVS(Visual Studio Tools For Unity)的安装与使用

    Unity 的开发者们,尤其是微软系的Unity开发者们,用Mono是不是烦死了?你是不是跟我一样,用vs来写代码,用Mono来跟踪调试?好麻烦啊好麻烦. 也许你会说,傻逼你不会用UnityVS插件么 ...

  4. In App Purchase

    参考文章1,参考文章2,参考文章3, 参考文章3 一.Product 分类:      Consumables: 应该在应用里被消费掉的.(Coupon, 生命数)      Non-Consumab ...

  5. 分布式集群中，设定时间同步服务器，以及ntpd与ntpdate的区别

    什么时候配置时间同步? 当分布式集群配置好了以后,马上配置的是SSH无密钥配置,然后就是配置时间同步. 时间同步在集群中特别重要. 一:时间同步 1.时间同步 集群中必须有一个统一的时间 如果是内网, ...

  6. Wall---hdu1348(求凸包周长 模板)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1348 求凸包周长+2*PI*L: #include <stdio.h> #include ...

  7. golang AES/ECB/PKCS5 加密解密 url-safe-base64

    因为项目的需要用到golang的一种特殊的加密解密算法AES/ECB/PKCS5,但是算法并没有包含在标准库中,经过多次失败的尝试,终于解码成功,特此分享: /* 描述 : golang AES/EC ...

  8. Ant学习-001-ant 基础知识及windows环境配置

    一.Ant 概要基础知识 Apache Ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发,用以构建应用,或结合其他开源测试工具例如 git.T ...

  9. Windows-008-VirtualBox 安装 Win7 前沿配置详解

    此文主要讲述在 Windows 系统下安装虚拟机 VirtualBox,及用 VirtualBox 安装 Win7 Professional 64bit 操作系统的前沿配置为例,配以图文进行详细的讲解 ...

  10. CSS布局一

    CSS布局一 实例一(居中) div#container{ width:960px; height:650px; margin:0 auto; border:1px solid #ccc; /*就是说 ...