h5标准布局

最新推荐文章于 2021-12-24 19:52:32 发布

梁同学与Android

最新推荐文章于 2021-12-24 19:52:32 发布

阅读量1.8k

点赞数 3

分类专栏： H5 文章标签： h5 HTML5 标准布局 css

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

版权

H5 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

效果图

HTML5标准布局
在这里插入图片描述

结构代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<article>
	<header>
		<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>
		<b>section</b>
		<article>
			<b>article</b>
			<header><b>header</b></header>
			<p><b>p标签pppppp</b></p>
			<footer><b>footer</b></footer>
		</article>
	</section>

	<aside><b>aside</b></aside>

	<footer><b>footer</b></footer>

</article>
</body>
</html>

效果实现

<!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%;
		margin-top:-19px;
	}
	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;
	}
	section{
		height:300px;
		width:60%;
		margin-top:10px;
		margin-left:8px;
		background-color:#0611D5;
		float:left;
	}
	aside{
		height:300px;
		width:36%;
		margin-top:10px;
		margin-right:8px;
		background-color:#0611D5;
		float:right;
	}
	article{
		height:83%;
		width:97%;
		background-color:#0611D5;
		border: solid white 1px;
		margin-left:5px;
		margin-top:10px;
		padding-top:10px;

	}
	</style>
<body>
<article style="background-color:#00ff14;width:50%;margin:auto;height:516px;position:relative;">

<header style="padding:8px;">
	<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 style="text-align:center;padding-top:10px">
	<b>section</b>
	<article>
		<b>article</b>
		<header style="background-color:#03f3b0;height:35px;margin:5px;padding-top:10px;border:solid 2px black"><b>header</b></header>
		<p style="background-color:#03f3b0;height:105px;margin:5px;padding-top:10px;border:solid 2px black"><b>p标签pppppp</b></p>
		<footer style="background-color:#03f3b0;margin:5px;height:30px;padding-top:7px;border:solid 2px black"><b>footer</b></footer>
	</article>
</section>

<aside style="text-align:center;padding-top:10px"><b>aside</b></aside>

<footer style="text-align:center;background-color:#0611D5;height:50px;position:absolute;bottom:5px;width:98%;margin-left:8px;"><b>footer</b></footer>

</article>
</body>
</html>

梁同学与Android

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
1
评论
h5标准布局

下面我们来看一张图片：HTML5标准布局结构代码为:<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><article> <header> ...
复制链接

扫一扫