菜单样式

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

再去添加一个选择器 ..

.menu

用一个 margin-left .. 给它添加一个左边儿的外边距 .. 值可以是 56px ..

然后再去设计一下菜单项的样式 .. 选择器可以使用 .menu .item .. 表示在 .menu 元素里面出现的 .item 元素 ..

先用一下 display 属性 .. 设置成 inline-block ... 让元素成为 inline 类型的块级元素 .. 这种块级元素会在同一排显示 ..

默认情况下 ... a 标签并不是块级元素,它属于行内元素 ..

再设置一下菜单项文字的大小 .. font-size .. 设置成 18px .. 然后是它的颜色 .. 用的是 color 属性,它的值是黑色 ..

再添加一个左边的外边距 .. margin-left .. 24px ... 右边也要有个边距 .. 用的是 margin-right .. 值同样可以是 24px ..

然后在添加一个下边儿的内边距,padding 表示内边距,padding-bottom 表示元素下边儿的内边距 .. 值可以是 32px

再用一个 padding-top ,添加一个上边儿的内边距 .. 值可以是 24px ..

激活菜单项的上面有个 .active 类,我们可以单独为这个类添加点特别的样式,让带这个类的菜单项的样式跟其它的菜单项的样式区分一下 ..

样式选择器可以是 .menu .item.active .. 元素上要包含 .item.active 这两个类,并且这个元素在 .menu 元素的里边儿..

在我们的设计里激活菜单项的下面有一个黑色的边框 .. 设置这种样式用的属性是 border-bottom ,表示下边的边框 .. 它的值是一个组合值 .. 2px solid #000 ,表示边框的大小是 2px ,solid 表示实线,#000 表示边框的颜色 ..

菜单样式《 网页设计案例:导航栏 》

统计

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

社会化网络

关于

微信订阅号

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