Semantic 导航条

Posted my4piano

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

?

?

效果如下:

技术分享

以上是关于Semantic 导航条的主要内容,如果未能解决你的问题,请参考以下文章

导航条

15Semantic-UI之导航

导航条——flash导航条

导航条

Bootstrap——导航条(navbar)

导航条——展开式导航条