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

随机推荐

osgViewer::Viewer::Windows
osg自带窗口去掉边框 #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #incl ...
利用IDEA上传文件到coding仓库使用git上传文件github
1.注册帐号 coding官网: https://coding.net/ github官网:https://github.com (以上根据自己需求注册,在下就不帖图了写步骤了) 2.下载 Git g ...
Lombok子类与父类的@Builder注解冲突
解决方法之一:去掉父类的@builder 缺点:父类不能使用Builder构造器模式来源:https://www.cnblogs.com/lori/p/10266508.html
Apache三种工作模式详解
Apache HTTP服务器被设计为一个强大的.灵活的能够在多种平台以及不同环境下工作的服务器.这种模块化的设计就叫做“多进程处理模块”(Multi-Processing Module,MPM),也叫 ...
localStorage 存储数组
let str = JSON.stringify(data.list); localStorage.setItem("options",str); let optionss=loc ...
第十八章并发登录人数控制——《跟我学Shiro》
目录贴:跟我学Shiro目录贴在某些项目中可能会遇到如每个账户同时只能有一个人登录或几个人同时登录,如果同时有多人登录:要么不让后者登录:要么踢出前者登录(强制退出).比如spring securi ...
【ARTS】01_34_左耳听风-201900701~201900707
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
iOS-NSString值为Unicode格式（字符串编码转换成中文编码）
+ (NSString *)replaceUnicode:(NSString *)unicodeStr { NSString *tempStr1 = [unicodeStrs ...
iOS算法题
1兔子算法题兔子可以跳一步2步或者3步,问跳到100有多少种跳法? // 兔子可以跳一步2步或者3步 // 问跳到100有几种跳法 /* 分析1 两个变量,X*2+Y*3=100. X最大为50,X ...
Python 动态规划算法
背包问题假设你是一个小偷,背一个可装4磅东西的背包.可盗窃的商品有如下3件: 音响,4磅,价值3000美元笔记本电脑,3磅,价值2000美元吉他,1磅,价值1500美元为了让盗窃的商品价值最高 ...

flex应用实例

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

随机推荐

热门专题