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, ...
随机推荐
- angular点击事件和表单事件
<div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> <b ...
- QML异常：Cannot anchor to an item that isn't a parent or sibling
翻译: 无法定位到不是父项或同级项的项 QML的anchor必须定位父级对象或者同级对象,不能定位到其他如:同级对象的子对象
- Qt编写自定义控件55-手机通讯录
一.前言 前面几篇文章中的控件基本上难度系数接近0,甚至有凑控件数量的嫌疑,这次必须来一个强悍的控件,本控件难度系数在所有控件中排前五,代码量也不少,头文件都550行,实现文件1600行,为什么这么多 ...
- spring boot入门学习---热部署
1.maven文件 2.application.properties文件配置
- PAT 甲级1057 Stack (30 分)（不会，树状数组+二分）*****
1057 Stack (30 分) Stack is one of the most fundamental data structures, which is based on the prin ...
- LeetCode_27. Remove Element
27. Remove Element Easy Given an array nums and a value val, remove all instances of that value in-p ...
- Apache三种工作模式详解
Apache HTTP服务器被设计为一个强大的.灵活的能够在多种平台以及不同环境下工作的服务器.这种模块化的设计就叫做“多进程处理模块”(Multi-Processing Module,MPM),也叫 ...
- 微信小程序--TabBar不出现
今天打算开始实战一个微信小程序项目,一开始就踩坑了,正确设置了TabBar,但是TabBar就是不能显示出来,后面才找到原因,这里记录下: app.json正确代码: { "pages&qu ...
- 游戏协议模拟测试工具（TcpEngine）使用简介
功能介绍 在有的网络开发需要走二进制流协议场景,比如网络游戏开发,在开发阶段,前端和后端协商好协议后就分别开发.在开发写代码的时候,有时需要对端发送一条完整的协议过来触发一下自己的代码,进行单步调试或 ...
- 【ARM-Linux开发】如何使用opkg在RicoBoard上在线安装软件包
类似于debian的apt-get,Redhat的yum类似,嵌入式Linux平台可以使用opkg实现在线安装软件包的功能,在我们提供的matrix文件系统中,已经包含了opkg工具,但是还没有配置一 ...