搭建框架
1.css样式
* {
margin: 0;
padding: 0;
}
body {
background-color: brown;
}
#box {
margin: 0 auto;
width: 1200px;
height: 900px;
}
header {
width: 1000px;
height: 60px;
border-bottom: 1px solid #ccc;
margin-top: 30px;
margin: 0 auto;
background-color: aliceblue;
}
h2 {
height: 60px;
line-height: 60px;
text-align: center;
}
nav {
width: 1000px;
height: 60px;
margin: 0 auto;
background-color: aliceblue;
}
section {
width: 1000px;
height: 510px;
margin: 20px auto;
background-color: aliceblue;
}
aside {
float: left;
width: 430px;
height: 400px;
margin: 20px 20px;
background-color: rgb(97, 97, 97);
}
article {
float: left;
width: 510px;
height: 400px;
margin: 20px 0;
background-color: rgb(97, 97, 97);
}
hgroup {
width: 480px;
height: 60px;
margin: 0 auto;
background-color: rgb(141, 22, 22);
}
p {
width: 480px;
height: 140px;
margin: 20px auto;
background-color: rgb(141, 22, 22);
text-align: center;
line-height: 120px;
}
span {
font-weight: 600;
font-size: 25px;
}
footer {
width: 1000px;
height: 60px;
border-bottom: 1px solid #ccc;
margin-top: 10px;
margin: 0 auto;
background-color: aliceblue;
}
2.html框架
<div id="box">
<h2>body</h2>
<header>
<h2>header</h2>
</header>
<nav>
<h2>nav</h2>
</nav>
<section>
<h2>section</h2>
<aside>
<h2>aside</h2>
</aside>
<article>
<h2>article</h2>
<hgroup>
<h2>hgroup</h2>
</hgroup>
<p><span>p</span></p>
<hgroup>
<h2>dialog</h2>
</hgroup>
</article>
</section>
<footer>
<h2>footer</h2>
</footer>
</div>
3.搭建效果