<!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. jdk1.8 -- optional 的使用

    一.optional的介绍 Optional 是个容器:它可以保存类型T的值,或者仅仅保存null.Optional提供很多有用的方法,这样我们就不用显式进行空值检测. Optional 类的引入很好 ...

  2. Vue框架下实现导入导出Excel、导出PDF

    项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出 打印表格 经过技术选型,项目组一致决定通过 ...

  3. .Net Core 3.0原生Json解析器

    微软官方博客中描述了为什么构造了全新的Json解析器而不是继续使用行业准则Json.Net 微软博客地址:https://devblogs.microsoft.com/dotnet/try-the-n ...

  4. 【2019NOIP复习计划】

    (其实不应该这么叫的,应该是CSP-S了现在..) 重点关注的板子: 不知道为什么特别受出题人青睐的LCA(板子点这里) 配套练习:(紫题请自便)  (这题蓝的应该可以试试)  (对的这题也紫它还是道 ...

  5. Unable to find optional library: org.apache.http.legacy 错误

    在目录adt-bundle-windows-x86_64-20140702\sdk\platforms\android-20或者 C:\Users\Administrator\AppData\Loca ...

  6. mac电脑上从终端命令行进入电脑里U盘目录下

    一般Mac电脑上u盘都在 Volumes 目录下,所以进入u盘可按如下命令: cd /Volumes/u盘名称

  7. 移动端测试之APP安全测试

    现在APP测试已经是测试行业的一个重要分支,对APP测试技能和经验的要求也越来越高,看到一篇关于APP安全测试的总结,分享给需要的朋友.1.软件权限1)扣费风险:包括发送短信.拨打电话.连接网络等2) ...

  8. netty 自定义协议

    netty 自定义协议 netty 是什么呢? 相信很多人都被人问过这个问题.如果快速准确的回复这个问题呢?网络编程框架,netty可以让你快速和简单的开发出一个高性能的网络应用.netty是一个网络 ...

  9. ubuntu安装svn

    安装svn # sudo apt-get install subversion 创建svn仓库 # cd /root # mkdir svn # cd svn # svnadmin create re ...

  10. sqlserver 2008修改数据库表的时候错误提示“阻止保存要求重新创建表的更改”

    当用户在在SQL Server 2008企业管理器中更改表结构时,必须要先删除原来的表,然后重新创建新表,才能完成表的更改,如果强行更改会出现以下提示:不允许保存更改.您所做的更改要求删除并重新创建以 ...