<!DOCTYPE html>

<html lang="en" >

 <head> 

        <title>demo</title>

        <style type="text/css">

              *{

                margin:0;

                padding:0;

               }

           .box {

                 width: 100%;

                 background: green;

                 display: box;

                 overflow: hidden;

                 display:-moz-box; /* Firefox */

              display:-webkit-box; /* Safari and Chrome */

                 -webkit-box-orient:horizontal;

           }

            .item {

               -webkit-box-flex:1;

               -moz-box-flex:1;

             box-flex:1;

             height: 60px;

             margin: 10px;

             background: red;

           }

           .item:first-child {

               -webkit-box-flex:0;

             width: 200px;

             margin: 10px;

             background: yellow;

           }

             .item:last-child {

             margin: 10px;

             background-color: blue;

           }

        </style>

 </head>

 <body >

        <div class="box">

                <div class="item">column 1</div>

                <div class="item">column 2</div>

                <div class="item">column 3</div>

        </div>

 </body>

</html>

html5 css3实现图中结构的更多相关文章

  1. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  2. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  3. HTML中的IE条件注释，让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案

    最近的项目中,因为需要兼容IE7,IE8,IE9,解研究了IE的条件注释,顺手写下来备忘.  HTML中的IE条件注释 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解. ...

  4. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用

    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...

  5. 让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法

    起初,IE其实也是一款非常有进取心的浏览器.但经过一段时间的蛰伏后,它已经成为了我们生活中的一道障碍.微软现在又重新开始向其它浏览器发起挑战,但事实情况是,新版的现代IE浏览器一直滞后于谷歌浏览器和火 ...

  6. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  7. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  8. Html5+css3+angularjs+jquery+webAPi 开发手机web（一）

    前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的 ...

  9. HTML5+CSS3静态页面项目-PayPaul的总结

    学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...

随机推荐

  1. java 中与 或 非 异或 和位移运算

    与(&) 或(|) 异或(^) 和位移(>>,<<) 通常和符号位无关 .. 但是非比较特殊,与符号位有关,所以计算的时候要考虑符号位 先扩展为32字符,前16位为符号 ...

  2. C# 序列化反序列化

      序列化,就是格式化,是把一个对象以某种格式进行呈现.主要有三种,1.二进制序列化,2.XML序列化,3.JavaScript序列化. 下面讲一下二进制序列化的过程 1.在需要序列化的类的前面,标记 ...

  3. RTP在。net中的使用（资料）

    开源组件:lumisoft 网址:http://www.lumisoft.ee/lswww/download/downloads/Examples/ 非开源的免费组建:rtp.net (微软推荐)

  4. 总结30个CSS选择器

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

  5. 全面总结Java泛型

    本文对Java泛型进行了全面的总结.文章内容包括普通泛型.通配符.受限泛型.泛型接口.泛型方法.返回泛型类型实例等等. 虽然Scala创始人Martin Odersky说当年正是因为Java泛型的丑陋 ...

  6. ArrayList与LinkedList用法与区别

    1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构.  2.对于随机访问get和set,ArrayList觉得优于LinkedList,因为LinkedLis ...

  7. 高流量站点NGINX与PHP-fpm配置优化（译）

    使用Nginx搭配PHP已有7年的这份经历让我们学会如何为高流量站点优化NGINX和PHP-fpm配置. 以下正是这方面的一些提示和建议: 1. 将TCP切换为UNIX域套接字 UNIX域套接字相比T ...

  8. window下flask开发环境搭建

    1.安装python 官网下载https://www.python.org/downloads/,按提示安装就行,记住安装目录,把它添加到系统path中. 2.安装pip 官网下载pip文件:http ...

  9. BZOJ1742[Usaco2005 nov]Grazing on the Run

    Description John养了一只叫Joseph的奶牛.一次她去放牛,来到一个非常长的一片地,上面有N块地方长了茂盛的草.我们可 以认为草地是一个数轴上的一些点.Joseph看到这些草非常兴奋, ...

  10. C#的对象赋值

    例如 Class A {       int x = 0;       int y = 0; }   public void test() {       A test1 = new A( );   ...