<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

.navigation {

    list-style: none;

    margin:;

    background: deepskyblue;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-flex-flow: row wrap;

    justify-content: flex-end

}

.navigation a {

    text-decoration: none;

    display: block;

    padding: 1em;

    color: white

}

.navigation a:hover {

    background: #00AEE8

}

@media all and (max-width:800px) {

    .navigation {

        justify-content: space-around

    }

}

@media all and (max-width:600px) {

    .navigation {

        -webkit-flex-flow: column wrap;

        padding: 0

    }

    .navigation a {

        text-align: center;

        padding: 10px;

        border-top: 1px solid rgba(255, 255, 255, 0.3);

        border-bottom: 1px solid rgba(0, 0, 0, 0.1)

    }

    .navigation li:last-of-type a {

        border-bottom: none

    }

}

    </style>

</head>

<body>

<ul class="navigation">

      <li><a href="#">Home</a></li>

      <li><a href="#">About</a></li>

      <li><a href="#">Products</a></li>

      <li><a href="#">Contact</a></li>

</ul>

</body>

</html>

分别对800,600做了不同的处理

flex自适应小例子的更多相关文章

  1. Windows下 flex + bison 小例子

    .下载flex和bison,网址是http://gnuwin32.sourceforge.net/packages/flex.htm 和http://gnuwin32.sourceforge.net/ ...

  2. springmvc入门的第一个小例子

    今天我们探讨一下springmvc,由于是初学,所以简单的了解一下 springmvc的流程,后续会持续更新... 由一个小例子来简单的了解一下 springmvc springmvc是spring框 ...

  3. java即时通信小例子

    学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...

  4. Runtime的几个小例子（含Demo）

    一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.)           1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数);  [runti ...

  5. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  6. INI配置文件分析小例子

    随手写个解析INI配置字符串的小例子 带测试 #include <iostream> #include <map> #include <string> #inclu ...

  7. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  8. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  9. js小例子（标签页）

    运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...

随机推荐

  1. ubuntu更新软件源

    更新源方法: 1. 打开终端.单击主菜单中的“应用程序 - 附件 - 终端”. 2. 修改更新服务器列表.请在终端中执行下面的两条命令: sudo cp /etc/apt/sources.list / ...

  2. linux yum安装jdk

    >>>>>>>>>> 实例: yum安装jdk 1.查看当前的jdk版本,并卸载 (注1:rpm -qa ###解释:查询所有安装的rpm包 ...

  3. 2015ACM/ICPC亚洲区沈阳站

    5510 Bazinga 题意:给出n个字符串,求满足条件的最大下标值或层数 条件:该字符串之前存在不是 它的子串 的字符串 求解si是不是sj的子串,可以用kmp算法之类的. strstr是黑科技, ...

  4. 一把鼻涕一把泪 搭建公网ftp服务器

    至于为什么要搭建公网ftp服务器,就当我心血来潮吧. ftp开源工具很多,咱用的是filezilla服务器.后来为了方便搭建web服务器,就改成了集成工具xampp.客户端工具也是filezilla ...

  5. 简述UIScrollView的属性和用法

    contentOffset 默认CGPointZero,用来设置scrollView的滚动偏移量.       // 设置scrollView的滚动偏移量       scrollView.conte ...

  6. 【CodeVS2800】 送外卖 最短路+状压DP

    首先求出各点之间的最短路,floyed即可,注意是0-n. 然后考虑状压,f[i][j]表示状态为i时访问j点时的最短路和,1表示访问,0表示未访问,然后第j个点所在的位置就是(1<<j) ...

  7. js性能优化-事件委托

    js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...

  8. hibernate 的SessionFactory的getCurrentSession 与 openSession() 的区别

    1 getCurrentSession创建的session会和绑定到当前线程,而openSession不会. 2 getCurrentSession创建的线程会在事务回滚或事物提交后自动关闭,而ope ...

  9. oracle 数据库 时间差 年数、月数、天数、小时数、分钟数、秒数

    declare l_start date := to_date('2015-04-29 01:02:03', 'yyyy-mm-dd hh24:mi:ss'); l_end date := to_da ...

  10. DEV 等待窗口

    DevExpress.Utils.WaitDialogForm dlg = , )); System.Threading.Thread.Sleep(); dlg.Close();