flex应用实例
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>flex弹性布局</title>
<style type="text/css">
.extract-list {
margin: 20px auto;
max-width: 1030px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: space-between;
}
.extract {
position: relative;
margin: 0 15px 50px;
-webkit-flex: 1 0 300px;
-moz-flex: 1 0 300px;
-ms-flex: 1 0 300px;
-o-flex: 1 0 300px;
flex: 1 0 300px;
-webkit-align-items: stretch;
align-items: stretch;
border: 1px solid #eee;
border-bottom-width: 2px;
border-radius: 5px;
background-color: #fff;
display: inline-block;
}
.extract a {
display: block;
color: #999;
text-decoration: none;
}
.extract-top {
position: relative;
width: 100%;
height: 125px;
text-align: center;
border-radius: 5px 5px 0 0 ;
background: #5FCF80 url(images/extract_1.jpg) no-repeat;
background-size: cover;
background-position: 50%;
}
.extract:hover .extract-top:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(182, 192, 199, 0.45);
}
.extract-main {
padding: 10px 20px;
font-size: 16px;
}
.extract-main p.category {
font-size: 12px;
color: #ccc;
}
.extract-main p {
font-size: 14px;
}
.extract-main h3 {
color: #333;
}
</style>
</head>
<body>
<div class="extract-list">
<div class="extract">
<a href="#">
<div class="extract-top"></div>
<div class="extract-main">
<p class="category">in Category</p>
<h3>标题1</h3>
<div>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容<br>
这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
<p><!--other buttons--></p>
</div>
</div>
</a>
</div>
<div class="extract">
<a href="#">
<div class="extract-top"></div>
<div class="extract-main">
<p class="category">in Category</p>
<h3>标题1</h3>
<div>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容<br>
这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
<p><!--other buttons--></p>
</div>
</div>
</a>
</div>
<div class="extract">
<a href="#">
<div class="extract-top"></div>
<div class="extract-main">
<p class="category">in Category</p>
<h3>标题1</h3>
<div>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容<br>
这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
<p><!--other buttons--></p>
</div>
</div>
</a>
</div>
</div>
</body>
</html>
效果图：
flex应用实例的更多相关文章
- flex dispatchEvent 实例
flashbuilder sdk:3.6:jdk:1.7,:tomcat:7:myeclipse:10.0 Flex dispatchEvent实例下载:点击打开链接 Flex dispatchEve ...
- Flex 布局实例
如图: 代码如下: <!DOCTYPE HTML> <html> <meta charset="utf-8"> <head> < ...
- flex布局实例demo全解
上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇> ...
- [css flex布局]实例一,本来还想挺简单的,弄了挺久呢,先写一部分
全是代码,直接拷走吧,看是不怎么好看的 参考:http://www.ruanyifeng.com/blog/search.html?cx=016304377626642577906%3Ab_e9ska ...
- Flex：实例
目的: 代码: <!--pages/index/index.wxml--> <view class="container"> <view class= ...
- Flex 布局教程实例
Flex 布局教程实例 一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 F ...
- Flex Socket与Java通信实例说明（转）
Flex Socket与Java通信实例说明(转) 这两天一直在flex的Socket ,现在终于懂了很多.由浅到深一步一步深入.慢慢体会实例,虽然实例都是在网上找的,但也经过了我的测试.我比较喜欢注 ...
- flex布局语法+实例
一.什么是flex布局 flex 是 flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 flex 布局.你可以将前端页 ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
随机推荐
- requests与urllib.request
requests很明显,在写法上与urllib.request不同,前者多一个 S.导入包时:import requestsimport urllib.requesturllib.request请求模 ...
- 机器学习 - 算法 - PCA 主成分分析
PCA 主成分分析 原理概述 用途 - 降维中最常用的手段 目标 - 提取最有价值的信息( 基于方差 ) 问题 - 降维后的数据的意义 ? 所需数学基础概念 向量的表示 基变换 协方差矩阵 协方差 优 ...
- Realsense D430 save
rs-save-to-disk.cpp // License: Apache 2.0. See LICENSE file in root directory. // Copyright(c) 2015 ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_13-课程预览功能开发-CMS页面预览接口测试
5.2 CMS页面预览测试 CMS已经提供了页面预览功能,课程预览功能要使用CMS页面预览接口实现,下边通过cms页面预览接口测试课 程预览的效果. 1.向cms_page表插入一条页面记录或者从cm ...
- Arduino---ESP8266 WIFI模块
一:Arduino安装ESP8266 https://www.arduino.cn/thread-76029-1-1.html(内容截图如下:最简单方法) 选用NodeMCU .0即可 二:简单测试 ...
- QML访问C++类内部
0.前提 C++类需要继承QObject,且有Q_OBJECT宏[所以QT自己的那么多类按道理上QML都是可以直接访问的,nb] 1.QML访问C++中的非private槽函数 可直接调用 信号也是 ...
- SM30维护视图屏蔽按钮
标准维护视图 GUI状态 ESLG 编辑按钮 AEND 达到效果 DATA: l_act TYPE char1, l_name TYPE dd02v-tabname. DATA: lt_vimex ...
- （四）UML之顺序图（时序图）
一.概念 顺序图是交互图的一种形式,它显示对象沿生命线发展,对象之间随时间的交互表示为从源生命线指向目标生命线的消息.顺序图能很好地显示那些对象与其它那些对象通信,什么消息触发了这些通信,顺序图不能很 ...
- 偶尔在网上看到的，相对比较好的c#端订单号生成规则
偶尔在网上看到的,相对比较好的c#端订单号生成规则 public class BillNumberBuilder{ private static object locker = new obj ...
- git 平时遇到的问题记录
1.git warning: LF will be replaced by CRLF in 解决办法 git config core.autocrlf false 2.git提交时如何忽略一些文件 h ...