Đầu tiên các bạn viết đoạn HTML này vào cho mình
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
This is a header
<ul id="nav">
<li>
<a href="#" class="hasSub">Home</a>
<ul class="sub">
<li>Here</li>
<li>Here</li>
<li>Here</li>
<li>Here</li>
</ul>
</li>
<li>
<a href="#">News</a>
<ul class="sub">
<li>Here</li>
<li>Here</li>
<li>Here</li>
<li>Here</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<table id="content">
<tr>
<td id="contentLeft">
<div class="contentLeftItems">
hello world
</div>
<div class="contentLeftItems">
hello world
</div>
<div class="contentLeftItems">
hello world
</div>
<div class="contentLeftItems">
hello world
</div>
<h1>This is content Left</h1>
<h1>This is content Left</h1>
<td>
<td id="contentRight">
<div class="contentRightItems">
hello world
</div>
<h1>This is content Right</h1>
</td>
</tr>
</table>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
Ở đây các bạn thấy div #wrapper là div lớn nhất. Bao phủ toàn bộ trang web của chúng ta. Do đó ta cho nó rộng khoảng 90% của trình duyệt và thuộc tính css: margin: 0px auto; là để nó canh giữa trang web.
+ Tiếp theo #header là con của #wrapper cho nên ta set độ rộng 100% tức là nó sẽ giãn ra toàn bộ nội dung của cha nó tức là #wrapper (chính là 90% của trình duyệt). Ở đây 100% là 100% của thèn cha đang chứa nó nhé 🙂
+ Tương tự #content cũng là 100% của cha nó => nó bằng 90% kích thước của trình duyệt
+ #content-left là có độ rộng 70% của cha nó (tức là #content).
+ #content-right có độ rộng 30% độ rộng của cha nó.
Đến đây bạn đã hiểu nguyên tắc hoạt động của css theo phần trăm rồi chứ.. Hãy dán đoạn code Css bên dưới và thử phóng to, thu nhỏ trình duyệt xem nào.
*{ margin:0; padding:0}
#wrapper{
width:90%; /* do rong 90% do rong cua trinh duyet */
margin:0px auto;
min-width:235px; /* Tranh truong hop thu nho trinh duyet qua vo menu het */
}
#header{
width:100%;
height:50%;
background:#cccccc;
height:100%;
}
#nav{
list-style:none;
height:50%;
width:100%
}
#nav li{
display:inline-block;
position:relative;
}
#nav li ul.sub{
display:none;
background:#cacaca;
}
#nav li a.hasSub{
}
#nav li:hover .sub{
position:absolute;
top:20px;
left:0px;
display:block;
}
#content{
width:100%;
min-height:500px;
table-layout:fixed;
border-collapse:collapse;
}
#contentLeft{
width:70%;
min-height:500px;
background:green;
vertical-align:top;
}
#contentLeft .contentLeftItems{
width:99%;
margin:10px 0;
background:White;
min-height:200px;
border:1px solid #cacaca;
border-radius:5px;
}
#contentRight{
width:30%;
min-height:500px;
background:yellow;
vertical-align:top;
}
#contentRight .contentRightItems{
width:99%;
margin:10px 0;
background:White;
min-height:200px;
border:1px solid #cacaca;
border-radius:5px;
}
Các bạn có thắc mắc gì cứ để lại phía dưới comment nhé. 🙂
