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

随机推荐

使用java自带线程池
java提供自带的线程池,而不需要自己去开发一个自定义线程池了. 线程池类ThreadPoolExecutor在包java.util.concurrent下 ThreadPoolExecutor ...
mysql无法导入函数和存储过程解决方法
1. mysql> SET GLOBAL log_bin_trust_function_creators = 1; 2. 系统启动时 --log-bin-trust-function-creat ...
Go项目部署到服务器
-bash: ./main: cannot execute binary file 将 go build main.go 生成的文件上传到服务器后,./main 运行后出新的报错 env GOOS=l ...
demo rabbitmq topic（主题模式），fanout(广播模式)，轮询分发，确认接收Ack处理
//durable = true 代表持久化交换机和队列都要为true ,持久代表服务重启,没有处理的消息依然存在 //topic 根据不同的routkey 发送和接收信息 //fanout 广播模 ...
《Fluid Engine Development》学习笔记3-光滑粒子流体动力学
用粒子表示流体最热门的方法就是就是光滑粒子流体动力学(Smoothed Particle Hydrodynamics (SPH).) 这种方法模糊了流体的边界,用有限数量的粒子代表流体,该方法的基本思 ...
Kotlin教程
Kotlin是一种静态类型的编程语言,由JetBrains开发.如果你有Java的基础知识,你很快就能学会Kotlin.这个Kotlin教程是为初学者设计的,因此即使您不了解Java,也可以理解Kot ...
CF1227C Messy
思路: 构造题.首先把字符串变成“(((((...)))))”的样子,再根据k的取值变成“()()()...((...))”的样子即可. 实现: #include <bits/stdc++.h& ...
高级UI-RecyclerView拖拽和侧滑
RecyclerView强大的地方在于高度的可定制,正式由于此优点,现在的项目大多使用RecyclerView,这里我们仿照QQ的功能,实现RecyclerView的拖拽和侧滑功能功能说明上下拖拽 ...
[转帖]Chrome中默认非安全端口
Chrome,你这坑人的默认非安全端口 https://www.cnblogs.com/soyxiaobi/p/9507798.html 之前遇到过这个总结的比之前那篇要好呢. 今天用chrome打 ...
windows 下安装ElasticSearch方法
1.https://www.oracle.com/technetwork/java/javase/downloads/jdk12-downloads-5295953.html 在此页面下载安装JDK1 ...

flex应用实例

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

随机推荐

热门专题