Các bạn chưa cần thắc mắc làm sao để có thể hiển thị danh sách các bài viết hay là thêm các widget như thế nào. Chúng ta sẽ đi từ những cái cơ bảo nhất. Trong bài này, mình sẽ làm mẫu với boosmcuj trang web gồm 1 khung header, 1 main content bên phải và 1 sidebar bên trái nhé!
Vậy chúng ta cần những ID, Class nào cho 1 trang web như thế này? Cứ đơn giản mà nghĩ thôi.
- Chúng ta sẽ cần 1 Class/Id bao quanh toàn bộ trang web. Ở đây mình lấy là wrapper nhé!
- Tiếp đến là 1 Class/Id cho phần header. Mình chọn luôn là header cho tiện.
- Lại tiếp tục chọn 1 Class/Id cho phần main content, mình lấy main-wrapper.
- Cuối cùng là dành cho sidebar? Thôi thì lấy sidebar-wrapper vậy.
Như vậy là chúng ta đã xác định được những yếu tố cần thiết rồi. Bây giờ chúng ta sẽ tiến hành code thôi nào. Sau 1 hồi gõ code và viết CSS thì ta sẽ được như sau:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>
Tiêu đề trang web
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin><![CDATA[
.wrapper {
width: 800px;
margin: 0 auto;
}
.header {
width: 100%;
min-height: 90px;
background: #4d90fe;
}
.main-wrapper {
width: 70%;
float:left;
min-height: 300px;
background: #f0c36d;
}
.sidebar-wrapper {
width: 30%;
float:right;
min-height: 300px;
background: #f9edbe;
}
]]></b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
<div class='wrapper'>
<div class='header'>
Đây là nội dung hiển thị trong phần Header
</div>
<div class='main-wrapper'>
Đây là nội dung hiển thị trong phần Main Content
</div>
<div class='sidebar-wrapper'>
Đây là nội dung hiển thị trong phần Sidebar
</div>
</div>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
Các bạn có thể thêm những phần kahsc cho trang web nữa nhé! Mình thì chỉ làm nấy thôi!
Các bạn có thể xem DEMO tại đây: http://huongdanthietketempalte-2.blogspot.com/
Các bạn có thể xem DEMO tại đây: http://huongdanthietketempalte-2.blogspot.com/
Author: HIRIN MOTION
2 Comments Đăng nhận xét
test
test reply luôn