HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5新增的几个容器模块大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。


H5新增的几个容器块元素
1、header:用户表示页面或某个区域的头部
2、nav:用于表示导航栏
3、aside:用于表示跟周围主题相关的附加信息
4、article:用于表示一个整体的一部分主题

5、section:表示右边的侧边栏
6、footer:用于表示页面或某个区域的脚注

在这里来教大家怎么使用

<!DOCTYPE html>
<html lang="en">

<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 内联样式表 -->
<style>
* {
margin: 0;
padding: 0;
}

.Box {
width: 80%;
text-align: center;
font-size: 30px;
margin: 10px auto;
}

header {
width: 100%;
height: 100px;
outline: 1px solid red;
line-height: 100px;
}

.Box1 {
width: 100%;
position: relative;
height: 550px;
}

nav {
width: 70%;
height: 50px;
outline: 1px solid black;
position: absolute;
left: 0px;
top: 0px;
line-height: 50px;
}

aside {
width: 30%;
height: 50px;
outline: 1px solid blue;
position: absolute;
right: 0px;
top: 0px;
line-height: 50px;
}

article {
width: 70%;
height: 500px;
outline: 1px pink solid;
position: absolute;
left: 0px;
top: 50px;
line-height: 500px;
}

section {
width: 30%;
height: 500px;
outline: 1px yellow solid;
position: absolute;
right: 0px;
top: 50px;
line-height: 500px;
}

footer {
width: 100%;
height: 100px;
outline: 1px solid rebeccapurple;
line-height: 100px;
}
</style>
</head>

<body>
<div class="Box">
<header>我是网页的头部</header>
<div class="Box1">
<nav> 我是左边的导航栏</nav>
<aside>我是右边的导航栏</aside>
<article>我是主体内容</article>
<section>我是右边的侧边栏</section>
</div>
<footer>我是底部</footer>
</div>
</body>

</html>

大佬总结

以上是大佬教程为你收集整理的HTML5新增的几个容器模块全部内容,希望文章能够帮你解决HTML5新增的几个容器模块所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。