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!的更多相关文章

  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. P2409 Y的积木

    luogu月赛 暴力dfs,估计过不了几个点,大概也就得30分左右? #include <bits/stdc++.h> using namespace std; const int max ...

  2. [收藏]NET技术+25台服务器怎样支撑世界第54大网站

    .NET技术+25台服务器怎样支撑世界第54大网站   英文原文:StackOverflow Update: 560M Pageviews A Month, 25 Servers, And It's ...

  3. 物联网操作系统HelloX V1.80测试版发布

    经过HelloX开发团队近半年的努力,在HelloXV1.79版本基础上,增加许多功能特性,并对V1.79版本的一些特性进行了进一步优化之后,正式形成HelloX V1.80测试版本.经相对充分的测试 ...

  4. JQuery源码之“名叫extend的继承”

    提起JS中的继承很多”大神“们都会提起call,apply,单纯的对象赋值继承,以及原型链继承等众多的方式以及它们的不足之处,而且还会不时的把一些面向对象的设计模式”团团“的带出来,可谓是厉害非常啊! ...

  5. angularJS推荐显示注入写法

    使用js压缩工具时发现压缩之后的控制器注入参数由原来的$scope变成了a,b...这样的字母而导致js失效,那么我们推荐使用完整的显示注入方式来解决此问题! //隐式注入的写法 angular.mo ...

  6. 关于android获得设备宽高

    传统的办法: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(d ...

  7. SSH原理与运用（二）：远程操作与端口转发

    SSH原理与运用(二):远程操作与端口转发 作者:阮一峰 (Image credit: Tony Narlock) 七.远程操作 SSH不仅可以用于远程主机登录,还可以直接在远程主机上执行操作. 上一 ...

  8. sublime text主要快捷键列表

    Ctrl+L 选择整行(按住-继续选择下行)Ctrl+KK 从光标处删除至行尾Ctrl+Shift+K 删除整行Ctrl+Shift+D 复制光标所在整行,插入在该行之前Ctrl+J 合并行(已选择需 ...

  9. strlen

    char c1[] = "sdfa";//系统自动添加结束字符 \0 char c2[] = {'1','2','3'};//这样赋值的话,要自己加上结束字符 \0 printf( ...

  10. JS-006-表格元素操作

    直接上菜咯... 以下为 HTML 表格源码: <html> <head> <meta http-equiv="Content-Type" conte ...