html5 流式布局 弹式布局 flex

6人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习 网站导航</title>
    <style>
              *{
  margin:0;
  padding:0;
  list-style:none;}
  /* 流式布局
  header{
  height:300px;
  width:80%;
  background-color:purple;
  margin:0 auto;}

  section{
  float:left;
  background-color:orange;
  height:300px;
  width:33.333%;}
  section:first-child{
  background-color:pink;
  }
  section:last-child{
  background-color:blue;}
  */
  /*  flex  弹式布局
  display:flex;
  */
  header{
  height:300px;
  width:80%;
  background-color:purple;
  margin:0 auto;
  display:-webkit-flex;}
    section{
  float:left;
  background-color:orange;
  height:300px;
  -webkit-flex:1;}
     section:first-child{
  background-color:pink;
  -webkit-flex:2
  }
  section:last-child{
  background-color:blue;
  -webkit-flex:1;}
  
    </style>
     <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<header>
    <section></section>
        <section></section>
        <section></section>
    </header>
    <script>
$(document).ready(function(e) {
           
        });
    </script>
</body>
</html>
查看评论

Github上值得推荐的10个HTML5资源

1 H5FullscreenPage https://github.com/lvming6816077/H5FullscreenPage 基于zepto.js或者jquery.js的构建滚...
  • u010832551
  • u010832551
  • 2016-02-26 10:39:56
  • 2613

css3 flex流动自适应响应式布局样式类

今天在做一个水平居中的div内部元素贴边水平均匀布局(有点绕,直接看图吧), 一开始使用的都是一些比较常用的css+html方法来实现布局,感觉这样很死板(在多增加一个div,并未div设置...
  • u012763269
  • u012763269
  • 2015-08-28 15:44:27
  • 3938

CSS3 弹性布局弹性流(flex-flow)属性详解和实例

弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction和flex...
  • iefreer
  • iefreer
  • 2016-02-24 00:05:09
  • 20251

HTML5&CSS3笔记:流式布局

HTML5&CSS3笔记:流式布局
  • u014328357
  • u014328357
  • 2016-10-24 12:26:56
  • 1488

android流式布局:FlexboxLayout用法探析(一)

FlexboxLayout是google官方开源的一个可以简单快速创建具有弹性功能的流式布局,它的目的是使用我们常见的布局模式,帮我们很好的实现UI区域的比例划分,比如三列布局,可以非常简单的实现。它...
  • tabolt
  • tabolt
  • 2016-07-01 13:56:32
  • 4983

[HTML5移动网页开发] Flexbox布局讲解与使用技巧

一 摘要 在前一篇我们讲到了react Native混合APP开发时,布局主要采用是Flexbox布局,不了解可以参考之前的一篇文章. [React Native混合开发]React Nat...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016-09-13 13:05:54
  • 3275

FlexBoxLayout控件做流布局

最近看到谷歌新出FlexBoxLayout,FlexBoxLayout是什么? 就是类似于 bootstrap 中的Grid栅格系统但又不相同的强大控件,接近于前端开发中弹性布局,是可以自动伸缩的弹...
  • sinat_15197693
  • sinat_15197693
  • 2016-05-16 16:20:59
  • 672

Flex布局实例

IE10及以上待考究,以下不支持·····#固定aside,弹性articlehtml 我是侧边菜单,固定宽度150px,么么哒! 我是...
  • WRian_Ban
  • WRian_Ban
  • 2016-04-14 15:11:10
  • 234

[知识总结]HTML5布局之flex布局总结

一 布局几种方式 1.静态(自然)布局(没有任何(float,position等)修饰的布局) 2.浮动布局(float) 3.定位布局(position) ...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016-10-14 12:39:15
  • 2849

HTML网页布局:静态、自适应、流式、响应式

静态即传统Web设计,对于PC设置一个布局,在屏幕宽高
  • iefreer
  • iefreer
  • 2014-10-16 21:14:25
  • 21324
    个人资料
    等级:
    访问量: 2万+
    积分: 945
    排名: 5万+
    文章存档
    最新评论