用户登录

现在这个在页头上显示的工具栏里面只有一个项目,我们再给它添加一个,找到 toolbar 这个容器,复制一份它里面的这个 toolbar__item 元素。

这样顶部工具栏会出现两个叠加到一块儿的项目。这里我们要让它们水平排列。 回到项目,在 assets/css 里面,新建一个样式表,名字叫 toolbar.css。

在这个 layout 文档里,链接刚才创建的这个 toolbar 这个样式表。 把这个样式表标签放在编辑器的上面。 在这个样式表里,设计一下 toolbar 这个类的样式,把 display 属性设置成 flex,让它变成一个 flexbox, 这样这个容器里包装的元素默认就会水平排列了。

我们可以试着把这个 flex-direction 的值是 column, 如果 flex 的方向是 colum,它里面的元素就会叠加到一块儿,默认这个属性的值应该是 row ,这样元素就会水平排列。

下面再给工具栏项目添加点样式,这些项目的上面都有一个 toolbar__item 类,用它作为样式选择器,里面用 margin-left ,在元素的左边添加点外边距,大小是 24 像素。

通常这些工具按钮项目里面都会用到链接,找到其中一个工具栏项目,在里面添加一个 a 标签,地址是 #,同样在下面这个项目里也添加一个 a 标签,地址也是 # 号。

回到浏览器,打开浏览器的开发者工具,打开 Elements 选项卡,选中页面上工具栏上的某个项目里的这个 a 标签,因为这个 a 标签是个行内元素,所以在它里面没有内容的时候它的宽度与高度的值都是 0 。

这里我希望它的宽高是包装它的这个容器的宽还有高。所以可以把这个 a 元素转换成区块元素。

在 toolbar 这个样式表里,设置一下 .toolbar__item 下面的 a 标签的样式,把 display 属性的值设置成 block,这样这个元素就会成为一个块级元素。 然后用 height ,把元素的高度设置成 100% 。

回到浏览器,观察一下这个工具栏项目里的 a 标签,你会发现,这次它的宽度还有高度就是包装它的这个容器的宽度还有高度。

页面布局(CSS):页头区域里的工具栏《 从设计到代码:布局设计 》

统计

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

社会化网络

关于

微信订阅号

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