Pages

Sunday, April 8, 2012

Thiết kế layout website nằm nang

Thông thường các website được thiết kế theo phương thằng đứng, có chiều dài(width) cố định và chiều cao(height) thay đổi, giống như sau :
Cấu trúc layout của một website nằm ngang có một chút khác biệt với chiều cao cố định và chiều dài thay đổi :
Làm thế nào để làm điều đó? rất đơn giản bạn hãy tạo ra một container layer giống như thế này :
<div id="container">...</div>
Trong CSS ta xác định style như sau :
#container{
width:3000px;
height:400px;
}
Bây giờ với layer #container hãy tạo một vài chỗ để thêm nội dung, Ví dụ bạn có thể dùng <ul> để thêm nội dung như hình:
 Mã HTML :
<div id="container">
<ul id=
"maincontent">
<li >Box 1</li>
<li >Box 2</li>
<li >Box 3</li>
<li >Box 4</li>
<li >Box ...</li>
</ul>
</div>
Mã CSS :
#maincontent{

border:0;
margin:0;
padding:0;
}
#maincontent li{line-style:none;
width:240px;
height
:380px;
padding
:10px;
float:left;
}
Thêm hình nền(background) với vị trí cố định trong CSS :
body{
background:url(mybg.jpg) no-repeat fixed;
}
                                                                                                                                      nguyenloi

No comments:

Post a Comment