html5 流式布局 弹式布局 flex
<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的更多相关文章
- 前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局
高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...
- flex布局 响应式布局
移动端页面开发流程 移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...
- html5+css3+jquery完成响应式布局
响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...
- webapp，liveapp： 流式布局和rem布局
liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...
- 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
- Web前端_流式布局（百分比布局）
移动Web_流式布局(百分比布局) writer:late at night codepeasant 1(百分比布局) ☞核心知识点 1.流式布局(百分比布局) 2.视口设置 ☞今日目标 1. 能够使 ...
- CCS3的过渡、变换、动画以及响应式布局、弹性布局
CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...
- PC响应式、固宽布局思想
截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局. 如果不明 ...
- CSS的flex布局和Grid布局
一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...
随机推荐
- 1级搭建类104-Oracle 12cR2 单实例 FS（阿里云）公开
项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...
- [Contract] Solidity 判断 mapping 值的存在
比如 mapping(address => uint) tester,只需要判断 mapping 是否为默认值 0, tester[msg.sender] == 0 "You can ...
- C# WPF聊天界面（3/3）
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF聊天界面(3/3) 阅读导航 本文背景 代码实现 本文参考 1.本文背景 系列文章 ...
- webstrom 2019 注册码（可用 2019年10月14日08:59:18）
K6IXATEF43-eyJsaWNlbnNlSWQiOiJLNklYQVRFRjQzIiwibGljZW5zZWVOYW1lIjoi5o6I5p2D5Luj55CG5ZWGOiBodHRwOi8va ...
- Qt实践-基于C++的UI设计基础
学习网址:http://c.biancheng.net/view/1824.html 我的代码: 头文件qwdlgmanual.h: #ifndef QWDLGMANUAL_H #define QWD ...
- 无人机通信协议MAVLink简介
MAVLink MAVLink(Micro Air Vehicle Link,微型空中飞行器链路通讯协议)是无人飞行器与地面站(Ground Control Station ,GCS)之间通讯,以及无 ...
- 吴裕雄--天生自然 R语言开发学习：集成开发环境\工具RStudio的安装与配置
- AcWing1296. 聪明的燕姿
聪明的燕姿 解题思路: 首先我们肯定要用到约数之和定理 但是有个问题就是要怎么用 根据经验得知,约数最多也就六七个左右,不然直接就超了s的范围.所以我们考虑用爆搜来做 但是用爆搜的话还是要优化一下思路 ...
- Android ListView的批量处理(多选/反选/删除)
在Android开发中经常遇到使用ListView的情况,有时候需要的不仅仅是列表显示,还有长按列表进行多选,并且批量删除的情况,在这里记录一下自己的所学. 先上效果图: 几个需要用到的核心方法: / ...
- echarts地图
<html> <body> <div id="cbar" style="width: 100%; height: 360px"&g ...