用户登录

回到编辑器,再去做一下导航栏在小尺寸的设备上的显示 ..

先写一个媒体查询 .. @media only screen and (max-width: 767px) {}

意思就是在小于等于 767 像素的 screen 类型的媒体上,应用一些样式 ..

.ui.navbar ... 嵌套一个 .header > img .. 设置一下导航栏上的图像标志的宽度 .. 设置成 56px ..

然后把菜单隐藏起来 .. 这个选择器可以是 .content .menu .. 用一下 display 属性,值是 none ,表示不显示 ..

之前我们设置过 search-icon ,就是这个搜索元素的 flex-grow 属性,它的值我们设置成了 1,这样这个元素会占用导航栏上面剩下的宽度 ..

现在我们要平均一下导航栏上的每个元素占用的宽度 .. 所以这里先把这个搜索元素的 flex-grow 的值设置成默认的 0 .. 这样导航栏上的子元素都平等了 ..

再添加一个样式 .content .. 里面用一下 justify-content .. 这个属性也属于 css 的 flexbox . 它可以设置 flexbox 里面的子元素的对齐的方式 .. 这里我们把它的值设置成 space-between .. 意思就是把容器多余的宽度平均分配到元素之间 ..

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

统计

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

社会化网络

关于

微信订阅号

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