<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="../../../public/semantic/dist/semantic.min.css">

 

    </head>

 

    <div class="ui attached stackable menu">

        <div class="ui container">

            <a class="item">

                <i class="home icon"></i>Home

            </a>

            <a class="item">

                <i class="grid layout icon"></i>Browser

            </a>

            <a class="item">

                <i class="mail icon"></i>Messages

            </a>

            <div class="ui simple dropdown item">

                More

                <i class="dropdown icon"></i>

                <div class="menu">

                    <a class="item"><i class="edit icon"></i>Edit Profile</a>

                    <a class="item"><i class="globe icon"></i>Choose Language</a>

                    <a class="item"><i class="setting icon"></i>Account</a>

                </div>

            </div>

            <div class="right item">

                <div class="ui input">

                    <input placeholder="Serch..." type="text"></input>

                </div>

            </div>

        </div>

    </div>

 

    <script src="../../../public/common/js/jquery.min.js"></script>

    <script src="../../../public/semantic/dist/semantic.min.js"></script>

    </body>

 

</html>

 

 

效果如下：

Semantic 导航条的更多相关文章

  1. Bootstrap之导航条

    基本导航条 <!-- navbar-inverse相反颜色风格 --> <!-- navbar-static-top去除圆角 --> <!-- navbar-fixed- ...

  2. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  3. JQM （功能栏、导航条）

    在Mobile中导航条的基本结构: <div data-role="navbar"> ul>li>a </div> 其中含有“行(grid)”和 ...

  4. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  5. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  6. 1.bootstrap练习笔记-导航条

    bootstrap练习笔记 1.关于导航栏   官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...

  7. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  8. iOS10 导航条，这个二狗子变了...踩坑

    1.iOS10导航透明要转换一个透明image UIImage *image = IsDeviceVersionIOS10 ? [WeUtils imageWithColor:[UIColor cle ...

  9. 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

    转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...

随机推荐

  1. 【转帖】sysbench的安装和做性能测试

    iMySQL | 老叶茶馆 sysbench的安装和做性能测试 http://imysql.cn/node/312 我仿照这个学的 但是 需要用更新的版本才可以.   By yejr on 14 六月 ...

  2. Proxy 和aop

    Proxy 就是代理,意思就是 你不用去做,别人代替你去处理 先来个静态代理 public interface Hello { void say(String name); } 被代理类 public ...

  3. 网络编程之异步IO

    Linux的I/O模型有下面几种:1. 同步阻塞I/O: 用户进程进行I/O操作,一直阻塞到I/O操作完成为止.2. 同步非阻塞I/O: 用户程序可以通过设置文件描述符的属性O_NONBLOCK,I/ ...

  4. 机器猫css

    <html> <head>  <title>机器猫</title>  <style>   div{    width: 30px;    h ...

  5. MyBatis 源码篇-DataSource

    本章介绍 MyBatis 提供的数据源模块,为后面与 Spring 集成做铺垫,从以下三点出发: 描述 MyBatis 数据源模块的类图结构: MyBatis 是如何集成第三方数据源组件的: Pool ...

  6. Java lesson09Homework

    1.   上转型对象的定义是什么?阐述自己对上转型对象的理解,用文字描述. 上转型:父类声明,子类实例化 叫做上转型. (自己的理解)上转型对象可以利用父类中的全员变量和方法,当子类进行全员变量隐藏或 ...

  7. set-cookie中的SameSite属性

    原文:set-cookie中的SameSite属性 再见,CSRF:讲解set-cookie中的SameSite属性 2016-04-14 13:18:42 来源:360安全播报 作者:暗羽喵 阅读: ...

  8. [JZOJ3521]道路覆盖--状压DP

    题目链接 略略略 分析 首先一看到使得最低的高度最高就想到了二分,于是就转化成了一个是否可行的问题 发现这个\(k\)都很小,考虑使用状态压缩DP 但是我一开始发现似乎并不好设计状态...如果这个\( ...

  9. java代码实现mock数据

    废话不多说,直接上代码. /** * 发get请求,获取文本 * * @param getUrl * @return 网页context */ public static String sendGet ...

  10. SQL优化的总结和一些避免全盘扫描的注意事项

    1.应尽量避免在 where 子句中使用 != 或 <> 操作符,否则将引擎放弃使用索引而进行全表扫描. 2.应尽量避免在 where 子句中使用 or 来连接条件,如果一个字段有索引,一 ...