语义标签
<header>头部</header>
<nav>导航</nav>
<main>
<article>左边</article>
<aside>右边</aside>
</main>
<footer>底部</footer>
关于css部分>解析
<main>的子标签<article>
示例代码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
header{
width: 100%;
height: 100px;
background-color: red;
}
nav{
width: 100%;
height: 36px;
background-color: green;
}
main{
width: 100%;
height: 500px;
background-color: #333333;
}
main>article{
width: 80%;
height:100%;
background-color: peru;
float: left;
}
main>aside{
width: 20%;
height:100%;
background-color: seagreen;
float: left;
}
footer{
width: 100%;
height:100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<header>头部</header>
<nav>导航</nav>
<main>
<article>左边</article>
<aside>右边</aside>
</main>
<footer>底部</footer>
</body>
</html>
实现效果
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
