<!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. 我的c++学习(10)this指针

    问题:当在对象的外部访问该对象的公有成员时,必须指明是哪一个对象.但是当我们用对象的成员函数来访问本对象的成员时,在成员函数中只要给出成员名就可以实现对该对象成员的访问.再进一步可用同一个类创建很多个 ...

  2. BZOJ2454 : TopCoder SRM 463 RabbitPuzzle

    每种状态最多只有三种后继状态:中间往左跳,中间往右跳,两边往中间跳. 如果把它们分别看成左儿子.右儿子.父亲的话,那么会得到一些二叉树. 取出起始状态和终止状态往上跳$k$步的所有状态,其他状态我们只 ...

  3. linux install StarDict

    1. sudo apt-get install stardict 2. Downloads from: http://abloz.com/huzheng/stardict-dic/zh_CN/ 3. ...

  4. scala and machine learning

    http://download.csdn.net/album/detail/3376 scala and machine learning

  5. .Net 4.5 的async 和await 的简单理解使用

    原文地址:http://www.cnblogs.com/HJL-Blog/p/4432632.html 所谓的异步编程是利用CPU空闲时间和多核的特性,它所返回的Task或Task<TResul ...

  6. HTML 5 音频(audio)

     audio 元素支持三种音频格式 IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis   √ √ √   MP3 √     √ ...

  7. MySQL模糊查询

    第一种最土的方法:使用like语句第二种用全文索引 有两种方法,第一种最土的方法:使用like语句第二种听涛哥说用全文索引,就在网上搜一下: 如何在MySQL中获得更好的全文搜索结果 mysql针对这 ...

  8. Lua系统库

    Lua为了保证高度的可移植性,因此,它的标准库仅仅提供了非常少的功能,特别是和OS相关的库.但是Lua还提供了一些扩展库,比如Posix库等.对于文件操作而言,该库仅提供了os.rename函数和os ...

  9. 重新用delphi7写东西

    晚上开始写通讯录的程序,又对表进行点修改.重新开始用delphi7很不习惯,太不好用了. TArecord=record Const UserName=’YHName’; ..... End; 这个在 ...

  10. SQL JOIN\SQL INNER JOIN 关键字\SQL LEFT JOIN 关键字\SQL RIGHT JOIN 关键字\SQL FULL JOIN 关键字

    SQL join 用于根据两个或多个表中的列之间的关系,从这些表中查询数据. Join 和 Key 有时为了得到完整的结果,我们需要从两个或更多的表中获取结果.我们就需要执行 join. 数据库中的表 ...