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, ...
随机推荐
- 简略描述：一个 url 从输入按下回车键，到页面展示出来，都经历了什么？
首先,在输入网址按下回车以后,这个时候DNS服务器会通过当前的网址去解析网址的 ip: 在查找到真的 IP 以后,这个时候浏览器会向 web 服务器发起一个 tcp 连接请求(三次握手): 第一次:建 ...
- python小白之数组索引
索引 numpy中的数组索引形式和Python是一致的.如: np.arange(10) print x[2] #单个元素,从前往后正向索引.注意下标是从0开始的. print x[-2] #从后 ...
- c语言 正则表达式 IP地址
#include <stdio.h> #include <string.h> #include <regex.h> #define SUBSLEN 10 /* 匹配 ...
- osg qt fbx
void TeslaManage::loadModelFile(QString &filename) { file_node = osgDB::readNodeFile(std::string ...
- mybatis bind exception
springboot 项目 搜了半天 网上的解决方法千篇一律,最终问题 原因 ,yml 文件路径问题 mybatis: mapper-locations: classpath:com/yang/f ...
- Python SciPy库——插值与拟合
插值与拟合 原文链接:https://zhuanlan.zhihu.com/p/28149195 1.最小二乘拟合 实例1 # -*- coding: utf-8 -*- import numpy a ...
- laravel console handle 传参方法
<?php namespace App\Console\Commands; use Illuminate\Console\Command; use App\Libs\wxpay\CLogFile ...
- 【Leetcode_easy】812. Largest Triangle Area
problem 812. Largest Triangle Area solution: class Solution { public: double largestTriangleArea(vec ...
- laravel的workflow流程插件
原文地址:https://github.com/brexis/laravel-workflow
- Navicat安装及使用
一.安装Navicat 1.下载安装文件:navicat11.0.17_premium_cs_x86.exe(32位) 2.Oracle 的 Instance Client:instantclient ...