HTML5: Khung giao diện web

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<style>

article, aside, footer, header, section{

display:block;

text-align:center;

}

#total{

width:900px;

margin:0px auto;

position:relative;

}

#logo, #banner, aside, article, footer, article header{

border:green thin solid;

box-sizing:border-box;

float:left;

}

#logo,#banner,#total > footer{

height:100px;

padding-top:35px;

}

#logo{

width:25%;

}

#banner{

width:75%;

}

aside,article{

height:200px;

}

aside{

width:20%;

padding-top:90px;

}

article{

width:60%;

}

footer{

width:100%;

}

article header,article footer{

width:100%;

height:50px;

padding-top:15px;

}

article article{

width:100%;

height:100px;

padding-top:40px;

}

</style>

</head>

<body>

<section id="total">

<header><section id="logo">Header>>Section-Logo</section><section id="banner">Header>>Section-Banner</section></header>

<nav></nav>

<section>

   <aside>Aside</aside><article><header>Article>>Header</header><article>Article-Article</article><footer>Article>>Footer</footer></article><aside>Aside</aside>

</section>

<footer>Footer</footer>

</section>

</body>

</html>

 

» Tiếp: Practical 1
« Trước: width & height
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!