用户登录

现在订阅年付会员多送 6 个月,重订、续订多送 12 个月(最后 5 天)。订阅 →

现在我们去做一下边栏的样式 .. 在这个边栏元素的上面,可以添加一个 visible 类 .. 这样会让这个边栏显示出来 ..

边栏里面的主要内容就是一个菜单 .. 在下面的 navbar 里面,找到这个菜单 .. 先手工复制一份 .. 把它粘贴到边栏的容器里面 ..

打开我们为边栏创建的样式文件 .. 添加一个选择器 .ui.sidebar .. 在我们的设计里边栏的背景是白色的 ..

这里用一个 background 属性 .. 颜色是 #fff ,表示白色 .

再设计一下在边栏上的菜单的样式 .. 菜单容器上有个 .menu 类,可以用它作为这块样式的选择器 ..

先用一个 display,设置成 flex ..

flex-direction 可以设置成 column ..

再用一个 text-align 把文字的对齐方式设置成 right .. 让它右对齐 ..

然后去处理菜单里面的项目 ... 选择器是 .menu .item .. 用一个 padding,在元素的四周添加点内边距 ..

再用一个 padding-right ,让菜单项右边的内边距大一些 .. 设置成 24px ..

再设置一下字号 ... font-size .. 18px .. color ,文字的颜色是 #000 ,表示黑色 ..

&.active ,在激活菜单项的上面除了 item 类还有个 active 类 .. 用一个 background ,背景颜色设置成 #f8f8f8 ..

鼠标悬停的时候菜单项也会有一种样式 .. &:hover , 把 backgroud 的值设置成 #fbfbfb ..

现在你看到的,就是我们做好的边栏 ...

边栏:样式《 网页设计案例:移动导航 》

统计

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

社会化网络

关于

微信订阅号

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