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, ...
随机推荐
- Tomcat重启Shell脚本
--测试通过 vim restart_tomcat.sh#!/bin/bash# Filename: restart_tomcat.sh# Description: Restart tomcat# D ...
- Build Telemetry for Distributed Services之OpenCensus：Tracing2（待续）
part 1:Tracing1 Sampling Sampling Samplers Global sampler Per span sampler Rules References
- MySQL中创建存储过程示例
在这个示例中需要用到一张名为test_table的表,我们使用show create table test_table查看表的创建过程: CREATE TABLE `test_table` ( `id ...
- 报错： Domain=NSCocoaErrorDomain Code=3000 "未找到应用程序的“aps-environment”的权利字符串"
Code=3000 "未找到应用程序的“aps-environment”的权利字符串" 解决办法 push,即远程通知,教材的资料较少,想实践的话,只能每年花99美元买苹果开发者帐 ...
- springboot-mybatis-pagehelper(分页插件)
依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://m ...
- 【miscellaneous】视频浓缩摘要简介
视频摘要,就是以自动或者半自动的方式,通过分析视频的结构和内容存在的时空冗余,从原始视频中提取有意义的片段,将它们以某种特点的方式重新组合成紧凑的.能够充分表现视频语义内容的浓缩视频. 一.静态视频摘 ...
- opencv-windows安装教程
一.下载opencv 下载链接: https://opencv.org/releases/ 二.运行exe 运行exe(其实是解压),将压缩包解压到相应目录,如: D:\Program Files ( ...
- leetCode:reverseInteger 反向整数 【JAVA实现】
反向整数 给定一个 32 位有符号整数,将整数中的数字进行反转,如果超出整数的最大或者最小范围返回0 更多文章查看个人博客 个人博客地址:反向整数 方法一 利用StringBuilder的revers ...
- EMR的fair-scheduler.xml
cat /etc/ecm/hadoop-conf/fair-scheduler.xml <?xml version="1.0"?> <allocations> ...
- 2、1 昨天讲列表缓存，为了让列表更新，我们需要在增、删、改方法之前加 @CacheEvict(value="list",allEntries = true)
package com.bw.service; import java.util.List; import javax.annotation.Resource; import org.springfr ...