html5网页前端设计笔记,Web 开发学习笔记(6) --- 前端开发之 HTML5

语义化标签的例子

html

Title

This is header

This is nav

article

aside

footer

css

*{

/*padding: 0px;

margin: 0px;*/

}

header{

width: 100%;

height: 100px;

background-color: red;

}

nav{

width: 100%;

height: 36px;

background-color: green;

}

main{

width: 100%;

height: 240px;

background-color: #ccc;

}

main > article{

width: 80%;

height: 100%;

background-color: purple;

float: left;

}

main > aside{

width: 20%;

height: 100%;

background-color: pink;

float: right;

}

footer{

width: 100%;

height: 80px;

background-color: skyblue;

}