header标签为什么不能改变背景颜色呢？

今天在写HTML5标准布局的时候，遇到了一个这样的问题，header标签不能够改变背景颜色，之后在网上查了之后，找到了问题的所在。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">h3{background-color:#0611D5;padding: 15px;text-align: center;}nav{float:left;background-color:#5FA08F;width: 100%;}nav ul{list-style-type: none;display:flex;}nav ul li{float:left;border: solid 2px;background-color: #09CCEC;margin-left:90px;padding-left:12px;padding-right:12px;}nav ul li a{color:red;}</style>
<body><div
<header style="background-color:#00ff14;width:50%;margin:auto;"><h3>HTML5页面-header</h3><nav><ul><li><a href="#">首页</a></li><li><a href="#">百度</a></li><li><a href="#">搜狗</a></li><li><a>nav</a></li></ul></nav>
</header><section><article><header></header><p></p><footer></footer></article>
</section>
<aside></aside><footer></footer>
</body>
</html>

效果图如下:

给header设置高度height或者内边距padding之后

1.截取修改的代码(单独加内边距):

1.单独加内边距之后的效果:

2.截取修改的代码(加高度):

2.加高度后的效果

所以，总的来说，如果header标签不能改变背景颜色的原因是因为没有设置高度或者是内边距。
还有一点，小伙伴们要记住，如果哪个标签设置背景颜色之后没有效果的话，给他一个高度或者内边距试试

如果这边文章对你有帮助的话，记得点赞哦！

header标签为什么不能改变背景颜色呢？相关推荐

vue项目使用svg渲染地图并添加点击事件，动态改变背景颜色
需求: ui给了一张地图的svg,需要前端渲染出来并添加对应的点击事件,选中区域,背景颜色需要改变实现思路: 1.拿到需要渲染的 svg图片,把其中path的值赋值过来,所有数据一起组成一个新的js ...
Html table 页实现点击选中tr行改变背景颜色
Html table 页实现点击选中tr行改变背景颜色 table 表格展示数据时没有选中的效果,如果对展示数据做了一些操作会导致不太容易分辨,所以选中效果就很重要,而这个事件需要作用于整个 ...
Java背景颜色怎么设成随机的_JS实现随机改变背景颜色
JS实现随机改变背景颜色 JS实现随机改变背景颜色使用Js实现随便点击页面某位置就能改变页面背景颜色的功能 function changeBg(){//改变背景颜色的函数 var bgColor=& ...
Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...
VC6,SDI视图改变背景颜色的方法
不怎么时髦,还在用VC6,无聊瞎写的............ SDI视图改变背景颜色分两步吧,效果还是很好的. 首先在CXXView类的OnDraw添加颜色. void CDigimizerView: ...
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片首先要想获取多条数据要用到v-for循环,写到循环就必须写:key 话不多说上代码重点就是:style="{background: ...
Pyqt5 在表格中单元格设置下拉框，并根据选项改变背景颜色
关于怎么在表格中单元格设置下拉框,并根据选项改变背景颜色 def table_combox_init(self):combox_statePlm_jria_list = ['', '无', 'O', ...
在DX12中使用imgui 入门教程立方体旋转+改变背景颜色
入门imgui第一天,把遇到的问题和参考两位大佬写的教程,总结了一下,写了下来,若有错误欢迎指正参考文章: [记录]DirectX12 添加ImGui组件 - 知乎 (zhihu.com) Dire ...
Aptana3 改变背景颜色
aptana3的默认背景颜色是黑色,字体是白色. 在windows- >preferences- >aptana- >themes 里选其主题,就可以改变背景颜色了.
html5单击修改背景色,js实现点击ul/li等改变背景颜色
今天项目遇到了标题所说的问题,找到一篇很高效的例子,值得学习. Change.html body li{ list-style-type: none; } 文字文字文字 function g(x) { ...

header标签为什么不能改变背景颜色呢？

header标签为什么不能改变背景颜色呢？相关推荐

最新文章

热门文章