Semantic 导航条

<!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>

效果如下：

时间： 2024-08-24 19:41:04

Semantic 导航条的相关文章

Android 导航条效果实现（六） TabLayout+ViewPager+Fragment

TabLayout 一.继承结构 public class TabLayout extends HorizontalScrollView java.lang.Object ? android.view.View ? android.view.ViewGroup ? android.widget.FrameLayout ? android.widget.HorizontalScrollView ? android.support.design.widget.TabLayout 二.TabLayou

css -- 导航条

1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a hre

淘宝分类导航条；纯css实现固定导航栏

效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

Bootstrap组件之导航条

.navbar--设置nav元素为导航条组件: .navbar-default--指定导航条组件为默认主题: .navbar-inverse--指定导航条组件为黑色主题: .navbar-fixed-top--设置导航条组件固定在顶部: .navbar-fixed-bottom--设置导航条组件固定在底部: .container-fluid--设置宽度充满父元素,即为100%: .navbar-header--主要指定div元素为导航条组件包裹品牌图标及切换按钮: .navbar-toggle-

Bootstrap导航条

前面的话导航条(navbar)和导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.本文将详细介绍Bootstrap导航条基础导航条在Bootstrap框架中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条是在应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开

Bootstrap（标准顶部导航条）

<!DOCTYPE html><html lang="en"><head> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <tit

导航条效果

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt

iOS：导航条滚动透明度随着tableView的滚动而变化

来源:HelloYeah 链接:http://www.jianshu.com/p/b8b70afeda81 下面这个界面有没有觉得很眼熟.打开你手里的App仔细观察,你会发现很多都有实现这个功能.比如美团外卖的首页模块,新浪微博的个人详情页面.要怎么样才能快速的实现这个功能呢!那下面由笔者来告诉你如何三行代码,集成这个功能... 原理介绍: 要想把一个view设计成透明的我们一下子就会想到两种方案,设置view的alpha值为0,或者设置view的backgroundColor为clearCol

导航条菜单制作总结

整理自慕课网 http://www.imooc.com/view/6 制作垂直导航条时若不想增加导航块的长度可用text-indent:20px;进行缩进导航条菜单制作总结1.用无序列表构建菜单:ul/li2.垂直菜单转变为水平菜单:float:left:3.在制作圆角菜单时,背景图片贴在<a>标签上: -------> 雪碧图的应用--- background-position4.在制作改变高度的伸缩菜单时,实现高度向上延伸的技巧: ----> margin-top用负值:5.