HTML5新增的几个容器模块

时间：2019-01-01 21:08:38 阅读：183 评论：0 收藏：0 [点我收藏+]

标签：outline 块元素 section apu text 主题 ati ext black

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

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

现在这里来教大家怎么使用

<!DOCTYPE html>

<head>

<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>

<header>我是网页的头部</header>

<nav> 我是左边的导航栏</nav>

<aside>我是右边的导航栏</aside>

<article>我是主体内容</article>

<section>我是右边的侧边栏</section>

</div>

</div>

</body>

</html>

HTML5新增的几个容器模块

标签：outline 块元素 section apu text 主题 ati ext black

原文地址：https://www.cnblogs.com/tian-520/p/TianYong.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行