导航栏上的标志

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

在我们的设计里,这个标志的显示会大一些 .. 我设置了这个 header 元素下面的 img ,也就是这个图像的样宽度..

不过又给它添加了一点内边距,这个宽度应该是图像的宽度,再加上左右两边儿的 8 个像素的边距 ..

也就是图像显示的实际的宽度应该减掉 16 像素 ... 这是浏览器默认的行为,我们可以去修改一下 .. 添加一个 box-sizing 属性,它的值可以设置成 content-box .. content 表示内容 .. 这样我们设置的这个宽度,应该就是内容的宽度,也就是这个图像的宽度...

我们再单独设置一下这个标志元素的对齐方式,在 content 这里,已经设置了 align-items ,让所有的子元素在 flex-end 位置上显示,这里就是底部 ..

我想让标志可以在垂直居中在导航栏上 .. 添加一个样式选择器 .. .header

在它里面用一下 align-selft ,单独去设置一下这个元素的对齐,可以设置成 center ,表示居中 ..

你会看到这个标志元素的微小的变化 ..

导航栏上的标志《 网页设计案例:导航栏 》

统计

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

社会化网络

关于

微信订阅号

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