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：实例
目的: 代码:  <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, ...

随机推荐

Android绘图通用第三方控件
https://github.com/ddanny/achartengine CodePull requests 2SecurityInsights Charting library fo ...
EasyUI动态生成菜单
业务需求:不同角色有不同的权限,我们根据角色加载页面时展示不同的菜单.在easyUI中,菜单一般采用手风琴accordion组件进行展示,一级菜单下可以加载二级菜单,效果如下: 普通用户看到的菜: 管 ...
bat 脚本之使用函数
bat 脚本之使用函数摘自:https://blog.csdn.net/peng_cao/article/details/73999076 2017年06月30日 15:06:37 pengcao ...
web手工项目02-注册功能输入分析，处理，输出方法-测试用例及缺陷编写-首页轮播图和购物车
web手工项目第二天笔记昨日回顾搭建测试环境(WAMP,phpStudy,tpshop项目文件) 熟悉项目(四个步骤,三个来源) 项目测试流程(需求评审,测试计划与方案,测试用例设计与评审,测试执 ...
Python项目开发之CMDB理解与分析
CMDB的由来--ITIL ITIL就是IT基础架构库(Information Technology Infrastructure Library, ITIL,信息技术基础架构库),由英国政府部门CC ...
iOS-AVPlayer
MPMoviePlayerController足够强大,几乎不用写几行代码就能完成一个播放器,但是正是由于它的高度封装使得要自定义这个播放器变得很复杂,甚至是不可能完成.例如有些时候需要自定义播放器 ...
React16+配置打包目录
在学习react的时候,肯定最终都要用脚手架,对比了手写配置webpack(比较费劲).generator-react-webpack(打不开官方文档……),最终还是选择了react官方的create ...
react做的简单的选项卡
### 首先安装react的脚手架 cnpm install create-react-app -g 只需要在电脑下载安装一次即可 ###创建项目 create-react-ap ...
推特Twitter视频下载的2种方法
Twitter上面的小视频越来越受欢迎了,其实,从社会发展的角度看,短视频的流行是一种必然的趋势.首先,智能手机和高速网络的普及,让人们的碎片化时间得以利用.坐地铁.吃饭的时间,点开一个视频段子.学一 ...
Egret入门学习日记 --- 问题汇总
问题1: 图片无法拖入到 EXML 文件的问题在日记第六篇有记载:https://www.cnblogs.com/dmc-nero/p/11188975.html 位于 3.6节内容. 问题2 ...

flex应用实例

flex应用实例的更多相关文章

随机推荐

热门专题