<!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%;
 
  margin:0 auto;}

section{
  float:left;
 
  height:300px;
  width:33.333%;}
  section:first-child{
 
  }
  section:last-child{
  }
  */
  /*  flex  弹式布局
  display:flex;
  */
  header{
  height:300px;
  width:80%;
 
  margin:0 auto;
  display:-webkit-flex;}
    section{
  float:left;
 
  height:300px;
  -webkit-flex:1;}
     section:first-child{
 
  -webkit-flex:2
  }
  section:last-child{
 
  -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>

html5 流式布局 弹式布局 flex的更多相关文章

  1. 前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  2. flex布局 响应式布局

    移动端页面开发流程   移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...

  3. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

  4. webapp，liveapp： 流式布局和rem布局

    liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...

  5. 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

    静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

  6. Web前端_流式布局（百分比布局）

    移动Web_流式布局(百分比布局) writer:late at night codepeasant 1(百分比布局) ☞核心知识点 1.流式布局(百分比布局) 2.视口设置 ☞今日目标 1. 能够使 ...

  7. CCS3的过渡、变换、动画以及响应式布局、弹性布局

    CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...

  8. PC响应式、固宽布局思想

    截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局. 如果不明 ...

  9. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

随机推荐

  1. mysql 查询出现 "this is incompatible with sql_mode=only_full_group_by"错误解决方案，以及个人rpm方式重装所遇到的问题备份

    一.错误说明        这个错误发生在mysql 5.7 版本及以上版本会出现的问题:        mysql .7版本默认的sql配置是:sql_mode="ONLY_FULL_GR ...

  2. MySQL Execute Plan--Index Merge特性

    Index Merge特性 在MySQL 5.5之前版本中,查询或子查询被限制在一个表只能使用一个索引(回表查询除外). 假设表TB1001上C1和C2列分别有单列索引,如对下面查询: SELECT ...

  3. Linux系统的安装和常用命令

    (1)切换到目录 /usr/bin: (2)查看目录/usr/local 下所有的文件: (3)进入/usr 目录,创建一个名为 test 的目录,并查看有多少目录存在: (4)在/usr 下新建目录 ...

  4. Remoting、WCF、WebAPI、WCFREST、WebService之间的区别与联系

    在.net平台下,有大量的技术让你创建一个服务,像Web Service,WCF,Web API,Remoting,我们来对比一下他们的区别与联系 Remoting Web Service WCF W ...

  5. fatal error LNK1169: one or more multiply defined symbols found

    在 Project/Setting/Link/General中的 Project Options: 加入 /FORCE:MULTIPLE即可")可以解决报错问题,但是这些问题全部变成了war ...

  6. Hadoop学习之路(6)MapReduce自定义分区实现

    MapReduce自带的分区器是HashPartitioner 原理:先对map输出的key求hash值,再模上reduce task个数,根据结果,决定此输出kv对,被匹配的reduce任务取走. ...

  7. Python编辑器——Pycharm以及Sublime Text 3的安装教程

    近来工作繁忙,顾不上学习,但还是有些小兄弟问我有没有编写Python代码的工具以及安装方法,跟我吐槽说他安装后总是有问题.那么今天就来说一说Pycharm的安装,顺带说一下Sublime Text 3 ...

  8. Codeforces Round #612 (Div. 2) （A-D）

    直 接看所有A后面连续P的个数最大值 #include<cstring> #include<cstdio> #include<set> #include<io ...

  9. 论文阅读笔记（十一）【ICCV2017】：Jointly Attentive Spatial-Temporal Pooling Networks for Video-based Person Re-Identification

    Introduction (1)Motivation: 当前采用CNN-RNN模型解决行人重识别问题仅仅提取单一视频序列的特征表示,而没有把视频序列匹配间的影响考虑在内,即在比较不同人的时候,根据不同 ...

  10. Linux shell unzip和tar 批量解压文件

    #!/bin/sh UNTAR="tar -xvf " #unzip all zip files function unzip_all_file() { for i in *.zi ...