用户登录

先在导航栏添加一个菜单图标 .. 打开项目的 index.html .. 把它放在 content 这个元素的里面 .. 先添加一个包装 .. 加上一个 menu-icon 类 ..

里面用一个 Material design 里面的小图标 .. 一个小 i 标签 .. 加上一个 material-icons 类 .. 包装的文字是 menu ..

现在导航栏上面会显示一个菜单小图标 ..

然后打开 navbar 样式 ..

设置一下 menu-icon 的样式 .. 用一个 align-selft,这个属性属于 css 里的 flexbox .. 把它的值设置成 cetner .. 让它垂直居中在导航栏上 ..

然后设置一下 menu-icon 下面的小 i 元素 .. 用一个 cursor 属性,设置一下鼠标指针的样式,值可以是 pointer .. 提示用户这个菜单小图标是可以点的 ..

这个菜单小图标我只想让它在小尺寸的设备上显示 .. 所以可以去创建一个媒体查询,让它在大尺寸的设备隐藏起来 ..

这个媒体查询的样式不能嵌套在这个 .ui.navbar 里面 .. 在它的外面 ... 输入一个 ..

@media only screen and (min-width: 767px) .. 在大于等于 767 像素的 screen 类型的设备上 ..

里面用一个 .ui.navbar .. 再嵌套一下 .menu-icon .. 用一下 display 属性 .. 把它的值设置成 none ,意思就是不显示 ..

再到浏览器上试一下 ..

现在没有显示菜单小图标 ... 因为窗口的宽度大于 767 像素 ..

调整一下窗口的宽度 ... 宽度小于 767 像素以后,就会显示这个菜单小图标了 ..

移动设备上的导航栏:样式 1《 网页设计案例:移动导航 》

统计

13559
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点