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, ...
随机推荐
- osg fbx模型删除模型中的某几个节点，实现编辑模型的功能
fbx model element count:80 三维视图: {三维} 4294967295 osg::MatrixTransform1 基本墙 wall_240 [361750] 4294967 ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_12-SpringSecurityOauth2研究-JWT研究-生成私钥和公钥
3.6.3 JWT入门 Spring Security 提供对JWT的支持,本节我们使用Spring Security 提供的JwtHelper来创建JWT令牌,校验JWT令牌 等操作. 3.6.3. ...
- java读取request中的xml
java读取request中的xml 答: // 读取xml InputStream inputStream; StringBuffer sb = new StringBuffer(); inpu ...
- SUBMIT标准程序取ALV数据
示例1: 调用J3RFLVMOBVEDH ,取物料的期初/ 期末庫存数.金额 FORM frm_call_j3rflvmobvedh. DATA: lr_bukrs TYPE RANGE OF buk ...
- kubeadm 安装kubernetes1.6.2
准备工作 安装依赖 yum install -y wget vim net-tools epel-release 修改内核参数 cat <<EOF > /etc/sysctl.d/k ...
- Java使用Apache Commons Exec运行本地命令行命令
首先在pom.xml中添加Apache Commons Exec的Maven坐标: <!-- https://mvnrepository.com/artifact/org.apache.comm ...
- 第二十二章 集成验证码——《跟我学Shiro》
目录贴:跟我学Shiro目录贴 在做用户登录功能时,很多时候都需要验证码支持,验证码的目的是为了防止机器人模拟真实用户登录而恶意访问,如暴力破解用户密码/恶意评论等.目前也有一些验证码比较简单,通过一 ...
- （生鲜项目）07. api view实现商品列表页
第一步: 环境配置 1. DRF官网: https://www.django-rest-framework.org/ 仔细查看自己当前的python版本以及django版本是否支持DRF, 然后就看看 ...
- Mybatis表关联一对多、多对一、多对多
项目工程结构如下: 1. 搭建MyBatis框架环境 首先需要引入两个包:mybatis.jar 和 sqljdbc42.jar包 若分页需要导入两个包:pagehelper-5.1.0.jar 和 ...
- OpenCV Python 4.0安装
1.安装OpenCV-Python 如果你是第一次使用OpenCV Python开发包,想要安装OpenCV Python4.0只要执行如下命令行即可: pip install opencv-pyth ...