CSS是前端开发中必不可少的一部分,它可以控制网页的样式和布局。今天我们来聊一下CSS只运用于header的一些技巧。
header { background-color: rgba(0,0.5); color: #fff; padding: 20px; Box-shadow: 0 0 10px rgba(0,0.5); text-align: center; }
在上面的代码中,我们使用了header选择器,它表示只在header标签中生效。我们为header添加了一个半透明的黑色背景,白色文字和阴影效果。我们还使用了text-align来让header中的内容居中显示。
如果我们想要在header中添加一个logo,可以使用如下代码:
header { background-color: #fff; height: 100px; display: flex; align-items: center; justify-content: center; } header img { height: 80%; }
在上面的代码中,我们使用了display: flex来让header中的内容在垂直和水平两个方向上居中显示。我们还使用了align-items和justify-content来设置logo的位置。需要注意的是,我们为header指定了一个固定高度,这是因为我们的logo要铺满header,如果header的高度不固定,就无法实现这一效果。
总结一下,我们可以使用CSS来控制header的样式和布局,并实现一些常见的效果,如半透明背景、居中显示和logo等等。希望这篇文章能够帮助你更好地掌握CSS的技巧。