<!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. js 中json遍历 添加 修改 类型转换

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. Ural 1248 Sequence Sum 题解

    目录 Ural 1248 Sequence Sum 题解 题意 题解 程序 Ural 1248 Sequence Sum 题解 题意 给定\(n\)个用科学计数法表示的实数\((10^{-100}\s ...

  3. 【数据库-SQL Server】IDispatch error #3092

    使用msado15.tlh,链接Microsoft SQL Server,执行语法(syntax)的时候出现IDispatch error #3092的错误. 1.语法错误 (1)保证语法正确,有些数 ...

  4. ES6——入门学习指南

    ES6的简介: ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序 ...

  5. Django-djangorestframework-渲染模块

    目录 渲染模块 渲染模块的效果 源码分析 如何自定义配置使用渲染类 自定义渲染模块 渲染模块 可以根据用户请求 URL 或 用户可接受的类型,筛选出合适的 渲染组件. reponse 数据 json ...

  6. 【树上异或和计数】czr 太弱啦

    [题目]: 给一棵树,求异或和为k的路径个数. [题解]: 很遗憾比赛时做不出来,后来看别人题解做出来的.用于记录博客所用. 然后进行Dfs,得到从根节点到某一个节点的异或值,计算方案时只需要在map ...

  7. WP8的新功能-通过一个程序来启动另一个程序

    Wp8对原来的WP7做了大量的优化...其中一个就包括Protocol Association,也就是通过uri来打开另外一个程序,这也就是说,我们可以做一个程序来启动另外一个程序了,如微信,QQ之类 ...

  8. 泛型和DataTable的属性

    泛型转DataTable public DataTable ToDataTable<TResult>(this IEnumerable<TResult> value) wher ...

  9. 【原型模式】--重写原型对象prototype的影响

    //[原型模式]--重写原型对象prototype的影响 2014-12-12//定义构造函数function Person() { }//直接指定构造函数的原型为一个对象(为了简化逐个给原型添加成员 ...

  10. vue中非父子组件的传值bus的使用

    非父子之间的组件传值,可以使用vuex.简单的状态管理,也可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定 ...