导航栏上的搜索

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

现在我需要让这个搜索小图标在导航栏的右侧显示 .. 先给它添加一个包装元素 .. 可以用一个 div 标签,上面加上一个 search-icon 类 ..

现在这个带 search-icon 类的元素跟上面的 menu 还有 header 是兄弟 ... 它们的爸爸是这个带 content 类的元素 ..

再去设计一下这个 search-icon 的样式 .. 在 navbar 里面,添加一个样式选择器, .search-icon ..

回到浏览器 .. 检查一下导航栏上的元素,导航栏里面的标志,菜单,还有搜索小图标,它们的宽度都是各自的内容宽度 ..

它们都属于 content 的子元素 .. 我要让这个搜索占用 content 里面剩下的所有的宽度 .. 现在它的宽度就是它里面包装的这个小图标的宽度 ..

在这个元素里,用一下 flex-grow 属性,设置一下增加的值 .. 可以设置成 1 ,默认它的值应该是 0 ,现在 content 里面包装的 header 还有 menu 的 flex-grow 的值是默认的 0

这个搜索元素的 flex-grow 的值是 1 ,这样就会把 content 元素剩下的宽度交给这个搜索元素 ..

然后再设置一下文字的对齐方式 ... 用的是 text-align ,值设置成 right ...

现在这个搜索元素里的小图标就会靠右显示了 . 再让它垂直居中在这个导航栏上 ..

用一下 align-selft ,设置成 center ..

现在我们的导航栏在桌面设备上的样式就基本做好了 ...

导航栏上的搜索《 网页设计案例:导航栏 》

统计

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

社会化网络

关于

微信订阅号

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