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, ...

随机推荐

【原创】主机不能访问虚拟机CentOS7中的站点
主机不能访问虚拟机CentOS7中的站点 ================================ 虚拟机上装好了centos7,并配好了nginx+php+mysql,但是本机就是无法访问. ...
osg HUD 前景色
#ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...
算法习题---4.4信息解码（UVa213）
一:题目消息编码方案要求在两个部分中发送一个被编码的消息.第一部分:称为头,包含消息的字符.第二部分包含一个模式表示信息.你必须写一个程序,可以解码这个消息. (一)题目详细你的程序的编码方案的 ...
mysql 1577、1548错误解决方案
mysql 1577.1548错误解决方案 1.mysql版本: 5.5.12 2.问题原因: 使用Navicat导出数据库的提示 :1577 – Cannot proceed because sy ...
【转】Selenium-xpath详解
1.XPATH是什么 XPATH是一门在XML文档中查找信息的语言,XPATH可用来在XML文档中对元素和属性进行遍历,主流的浏览器都支持XPATH,因为HTML页面在DOM中表示为XHTML文档.X ...
python中简化的验证码功能
验证码一般用来验证登陆.交易等行为,减少对端为机器操作的概率,python中可以使用random模块,char()内置函数来实现一个简单的验证码功能. import random def veri_c ...
win7下docker环境安装
最近公司涉及到对docker容器引擎的使用,所以就在网上各种搜索,由于是win7系统,所以在使用上更是麻烦,遇到各种错误就是无法成功启动docker,经过两天的各种尝试下,终于安装成功,在此记录一下使 ...
WPF窗体应用程序开发
1.Window:登录窗口.主窗体.消息框 2.UserControl:业务界面.消息框(如果使用UC来实现,则需要做特殊的处理,比如中断功能如何处理?)(显示一个UC,必须将其添加到容器中,所以&l ...
MySQL 5.7 源码中的目录结构
MySQl Server的源码可以直接去Github浏览. 这里我们选择5.7版本的:https://github.com/mysql/mysql-server/tree/5.7 也可以通过: git ...
macpro锁屏后没有进入睡眠
使用命令pmset -g查看,如图,钉钉阻止了屏幕的睡眠,找了下钉钉的配置,也没有发现有关的内容,重启钉钉后问题解决 displaysleep 10 (display sleep prevented ...

flex应用实例

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

随机推荐

热门专题