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

最新推荐文章于 2023-08-18 15:52:21 发布

梁同学与Android

最新推荐文章于 2023-08-18 15:52:21 发布

阅读量3.9k

点赞数

分类专栏： H5 文章标签： header &amp;lt;header&amp;gt;标签为什么不能改变背景颜 h5 css

本文链接：https://blog.csdn.net/qq_43290288/article/details/102769324

版权

H5 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

今天在写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标签不能改变背景颜色的原因是因为没有设置高度或者是内边距。
还有一点，小伙伴们要记住，如果哪个标签设置背景颜色之后没有效果的话，给他一个高度或者内边距试试

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

梁同学与Android

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
<header>标签为什么不能改变背景颜色呢？

今天在写HTML5标准布局的时候，遇到了一个这样的问题，header标签不能够改变背景颜色，之后在网上查了之后，找到了问题的所在。代码实例如下:<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head>&l...
复制链接

扫一扫