Semantic UI 之菜单 menu

最新推荐文章于 2021-12-27 22:52:31 发布

梁云亮

最新推荐文章于 2021-12-27 22:52:31 发布

阅读量1.6k

点赞数 1

分类专栏： # Semantic UI 文章标签： Semantic UI 菜单 menu

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/107931223

版权

Semantic UI 专栏收录该内容

36 篇文章 7 订阅

订阅专栏

网页代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>菜单</title>
        <link rel="stylesheet" href="semantic-ui/semantic.min.css">
        <script type="text/javascript" src="js/jquery3.3.1.js"></script>
        <script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
    </head>
    <body>
        <div class="ui stackable menu">   <!-- ①  -->
            <div class="header item">
                <img src="imgs/lyl.jpg" alt="" class="ui avatar image">
            </div>
            <a href="" class="item">课程</a>
            <a href="" class="item">博客</a> 
            <a href="" class="item active">社区</a>
            <div class="item">
                <div class="ui icon input">
                    <input type="text" placeholder="搜索……">
                    <i class="search icon"></i>
                </div>
            </div>
            <div class="right item">
                <a href="" class="ui primary button">注册/登录</a>
            </div>
        </div>
    </body>
</html>

最外层div的stackable属性用来设置适应小屏幕。

效果

在这里插入图片描述

为菜单指定不同的样式

只需要修改编号 ① 处的代码即可：

secondary menu

<div class="ui stackable secondary menu">

效果：
在这里插入图片描述

pointing menu

<div class="ui stackable pointing menu">

效果：
在这里插入图片描述

secondary pointing menu

<div class="ui stackable secondary pointing menu">

效果：
在这里插入图片描述

text menu

<div class="ui stackable text menu">

效果：
在这里插入图片描述

垂直菜单

<div class="ui stackable vertical menu">

效果：
在这里插入图片描述

top fixed menu

<div class="ui stackable top fixed menu">

效果：
在这里插入图片描述

bottom fixed menu

<div class="ui stackable bottom fixed menu">

效果：
在这里插入图片描述

梁云亮

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Semantic UI 之菜单 menu

网页代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>菜单</title> <link rel="stylesheet" href="semantic-ui/semantic.min.css"> <script type="text/javascript
复制链接

扫一扫