<!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. HanLP-基于HMM-Viterbi的人名识别原理介绍

    Hanlp自然语言处理包中的基于HMM-Viterbi处理人名识别的内容大概在年初的有分享过这类的文章,时间稍微久了一点,有点忘记了.看了 baiziyu 分享的这篇比我之前分享的要简单明了的多.下面 ...

  2. Kettle无法打开文件资源库

    问题: Kettle无法打开文件资源库. 问题描述: 新建文件资源库之后,资源库路径中有中文路径.退出kettle之后,再次进去发现没有了右上角的connect按钮了. 原因: kettle的repo ...

  3. javaweb中关于转发与重定向的写法

    转发: RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/main.jsp"); rd.forward(r ...

  4. 常见三种加密（MD5、非对称加密，对称加密）

    转载. https://blog.csdn.net/SSY_1992/article/details/79094556 任何应用的开发中安全都是重中之重,在信息交互异常活跃的现在,信息加密技术显得尤为 ...

  5. JVM学习（一）Java虚拟机运行时数据区域

    一.Java内存区域 1.运行时数据区域 根据<Java 虚拟机规范(Java SE 7 版)>规定,Java 虚拟机所管理的内存包括以下几个运行时数据区域: 1.1 程序计数器 程序计数 ...

  6. windows scala helloworld例子详解

    [学习笔记] windows scala helloworld例子详解: 在操作系统中,我们的Test3.scala会生成Test3.class,然后class文件被虚拟机加载并执行, 这一点和jav ...

  7. Windows应急响应常见命令

    ---恢复内容开始--- 1.查看所有连接的PID netstat -ano 2.过滤特定端口 netstat -ano | findstr “443” 3.查看占用443端口的进程 tasklist ...

  8. xtrabackup原理，整库，单表，部分备份恢复

    物理备份xtrabackup原理 Percona XtraBackup(简称PXB)是 Percona 公司开发的一个用于 MySQL 数据库物理热备的备份工具,支持 MySQl(Oracle).Pe ...

  9. shell习题第17题：检测磁盘

    [题目要求] 写一个shell脚本,检测所有磁盘分区使用率和inode使用率并记录到以当天日期命名的日志文件里,当发现某个分区容量或者inode使用量大于85%时候,发邮件提醒 [核心要点] df d ...

  10. golang glog

    原文链接:https://blog.csdn.net/u010857876/article/details/79094942 Flush log 产生后,会暂存在内存的buffer中.只有显示的调用 ...