<!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. Dijstra_优先队列_前向星

    Dijstra算法求最短路径 具体实现方式 设置源点,将源点从原集u{}中取出并放入新建集s{} 找出至源点最近的点q从原集取出放入新集s{} 由q点出发,更新所有由q点能到达的仍处于原集的点到源点的 ...

  2. 怎么保证 redis 和 db 中的数据一致

    你只要用缓存,就可能会涉及到缓存与数据库双存储双写,你只要是双写,就一定会有数据一致性的问题,那么你如何解决一致性问题? 首先需要考虑到:更新数据库或者更新缓存都有可能失败,在这种前提下分析业务带来的 ...

  3. 图数据库-Neo4j-常用算法

    本次主要学习图数据库中常用到的一些算法,以及如何在Neo4j中调用,所以这一篇偏实战,每个算法的原理就简单的提一下. 1. 图数据库中常用的算法 PathFinding & Search 一般 ...

  4. sql server的循环语句

    WITH TEST_CTEAS(SELECT id,position,Parentid,Cast(Parentid AS NVARCHAR(4000)) AS PATHFROM op_client_s ...

  5. PBE加密 .net 实现

    using System; using System.Security.Cryptography; using System.Text; namespace Demo { internal class ...

  6. iview-admin部署linux nginx报500错误的问题记录

    遇到个新服务器部署iview-admin之后 在nginx配置文件有个user配置项 这里需要配置为root或者可以读取本地文件的用户 站点配置如下 server { listen ; server_ ...

  7. Oracle 以及 PLSQL安装

    今天重装系统遇到oracle 安装的问题咯 ,oracle安装过程中很多疑难杂症咯 1如果之前装过,记得去删除注册表的Oracle 相关的文件 ,请百度有很多教程咯 2这个必须要勾选的!因为的是11g ...

  8. K2 BPM_携手东航物流，领跑全球航空物流业_全球领先的工作流引擎

    现代物流产业正在世界范围内广泛兴起,物流产业已成为各个国家国民经济发展的动脉和基础产业.随着物流新格局的加速形成,商业竞争的核心要素已经从传统的对资产资源的占有,演化为对资本.人才与技术的争夺,流量. ...

  9. 7.SpringMVC 配置式开发-ModelAndView和视图解析器

    ModelAndView 1.Model(模型) 1.model的本质就是HashMap,向模型中添加数据,就是往HashMap中去添加数据 2.HashMap 是一个单向查找数组,单向链表数组 3. ...

  10. 学习手写vue，理解原理

    class Compiler{ constructor(el,vm){ // 判断el属性 是不是 一个元素, 如果不是就获取 this.el = this.isElementNode(el)?el: ...