- Tham gia
- 28/02/2015
- Bài viết
- 17,142
- Được Like
- 12,745
Hướng dẫn tạo layout giao diện ba cột cho website
Bài viết này mình sẽ bắt đầu hướng dẫn các bạn layout một giao diện hoàn chỉnh. Ở bài này mình sẽ hướng dẫn layout một giao diện ba cột đơn giản bằng HTML và CSS.
Dưới đây hình ảnh giao diện ba cột sau khi chúng ta tiến hành xong việc layout bằng HTML và CSS.
Giao diện trên gồm có những phần sau đây:
HTML
Bước 1: Mình sẽ tạo một thẻ <div> cho khối Top Head và gắn cho nó một id=”top” nhé.
Bước 2: Tiếp tục tạo một thẻ <div> cho khối Main và mình sẽ gán cho nó một id=”main”.
Khối Main là khối chứa các khối con khác. Cụ thể là ba khối: Left Menu, Main Info và Right Menu. Như vậy chúng ta sẽ lần lượt tạo ba thẻ <div> cho ba khối Left Menu, Main Info và Right Menu nằm trong thẻ <div> của khối Main nhé. Ở ba khối này mỗi khối chúng ta sẽ gán cho nó một id cụ thể là: id=”left”, id=”info”, id=”right”.
Bước 3: Chúng ta còn thiếu khối Footer nên ở bước này chúng ta sẽ tạo một thẻ <div> chứa khối footer nhé và cũng sẽ gán cho nó một id=”footer”.
Sau đây chúng ta sẽ ghép tất cả ba bước trên thành một file index.html hoàn chỉnh nhé.
Hiện tại bây giờ chúng ta mới chỉ hoàn thành xong phần code HTML mà thôi. Để có được một layout hoàn chỉnh và đẹp như hình trên thì chúng ta sẽ phải dùng tới CSS để chỉnh sửa và định dạng cho phần HTML này. Như vậy thì việc các bạn và mình phải làm là mở file style.css để định dạng cho phần giao diện của chúng ta thôi.
Khi mình tạo các thẻ <div> để chứa các khối thì mình đã gán cho mỗi thẻ một id cụ thể rồi nên giờ mình sẽ tiến hành viết các lệnh CSS nhé. Cũng giống như phần HTML ở đây mình cũng sẽ chia ra từng bước một rồi sau đó ghép chúng lại với nhau để cho các bạn dễ hình dung nhé.
Ở đây mình sẽ tiến hành viết CSS luôn cho từng khối chứ không giải thích từng dòng lệnh các bạn nhé.
CSS
Trước tiên thì chúng ta sẽ định dạng cho toàn bộ site và phần thẻ <body> nhé.
Tiếp theo chúng ta sẽ đi định dạng cho từng khối.
Bước 1: CSS cho khối Top Head
Bước 2: CSS cho khối Main: Khối này sẽ chứa ba khối con bên trong nó.
Bước 3: CSS cho khối Left Menu: Khối này sẽ nằm bên trái nên chúng ta sẽ dùng câu lệnh float cho nó.
Bước 4: CSS cho khối Main Info: Khối này nằm giữa hai khối Left Menu và Right Menu.
Bước 5: CSS cho khối Right: Khối này sẽ nằm bên phải nên chúng ta sẽ dùng câu lệnh float cho nó.
Bước 6: CSS cho khối Footer: Khối này nằm dưới ba khối cùng nổi (float) nên chúng ta phải xóa float bằng lệnh clear trong CSS nhé.
Dưới đây là phần CSS mình sẽ ghép các bước trên lại với nhau nhé. Chúng ta sẽ có một file style.css như sau:
Sau khi các bạn đã viết code cho hai file index.html và style.css thì các bạn chạy file index.html để xem thành quả nhé. Nhưng nhớ là dẫn file style.css vào file index.html nhé. Trên đây là mình đã hướng dẫn các bạn tạo một giao diện layout dạng ba cột đơn giản. Nếu các bạn một layout các dạng khác thì hãy chỉnh sửa lại chút nhé.
Chúc các bạn thành công.
Bài viết này mình sẽ bắt đầu hướng dẫn các bạn layout một giao diện hoàn chỉnh. Ở bài này mình sẽ hướng dẫn layout một giao diện ba cột đơn giản bằng HTML và CSS.
Dưới đây hình ảnh giao diện ba cột sau khi chúng ta tiến hành xong việc layout bằng HTML và CSS.
- Top Head
- Left Menu
- Main Info
- Right Menu
- Footer
HTML
Bước 1: Mình sẽ tạo một thẻ <div> cho khối Top Head và gắn cho nó một id=”top” nhé.
Mã:
<div id="top">Top Head</div>Bước 2: Tiếp tục tạo một thẻ <div> cho khối Main và mình sẽ gán cho nó một id=”main”.
Mã:
<div id="main"><div>Khối Main là khối chứa các khối con khác. Cụ thể là ba khối: Left Menu, Main Info và Right Menu. Như vậy chúng ta sẽ lần lượt tạo ba thẻ <div> cho ba khối Left Menu, Main Info và Right Menu nằm trong thẻ <div> của khối Main nhé. Ở ba khối này mỗi khối chúng ta sẽ gán cho nó một id cụ thể là: id=”left”, id=”info”, id=”right”.
Mã:
<div id="main">
<div id="left">Left Menu</div>
<div id="info">Main Info</div>
<div id="right">Right Menu</div>
</div>Bước 3: Chúng ta còn thiếu khối Footer nên ở bước này chúng ta sẽ tạo một thẻ <div> chứa khối footer nhé và cũng sẽ gán cho nó một id=”footer”.
Mã:
<div id="footer">Footer</div>Sau đây chúng ta sẽ ghép tất cả ba bước trên thành một file index.html hoàn chỉnh nhé.
Mã:
<div id="top">Top Head</div>
<div id="main">
<div id="left">Left Menu</div>
<div id="info">Main Info</div>
<div id="right">Right Menu</div>
</div>
<div id="footer">Footer</div>Hiện tại bây giờ chúng ta mới chỉ hoàn thành xong phần code HTML mà thôi. Để có được một layout hoàn chỉnh và đẹp như hình trên thì chúng ta sẽ phải dùng tới CSS để chỉnh sửa và định dạng cho phần HTML này. Như vậy thì việc các bạn và mình phải làm là mở file style.css để định dạng cho phần giao diện của chúng ta thôi.
Khi mình tạo các thẻ <div> để chứa các khối thì mình đã gán cho mỗi thẻ một id cụ thể rồi nên giờ mình sẽ tiến hành viết các lệnh CSS nhé. Cũng giống như phần HTML ở đây mình cũng sẽ chia ra từng bước một rồi sau đó ghép chúng lại với nhau để cho các bạn dễ hình dung nhé.
Ở đây mình sẽ tiến hành viết CSS luôn cho từng khối chứ không giải thích từng dòng lệnh các bạn nhé.
CSS
Trước tiên thì chúng ta sẽ định dạng cho toàn bộ site và phần thẻ <body> nhé.
Mã:
*{
margin:0px;
}
body{
font:12px verdana;
width:780px;
margin:auto;
background:#FFF;
}Tiếp theo chúng ta sẽ đi định dạng cho từng khối.
Bước 1: CSS cho khối Top Head
Mã:
#top{
background:#0099FF;
color:#FFFFFF;
height:120px;
line-height:120px;
text-align:center;
font-weight:900;
}Bước 2: CSS cho khối Main: Khối này sẽ chứa ba khối con bên trong nó.
Mã:
#main{
width:780px;
height:400px;
}Bước 3: CSS cho khối Left Menu: Khối này sẽ nằm bên trái nên chúng ta sẽ dùng câu lệnh float cho nó.
Mã:
#left{
float:left;
width:150px;
height:400px;
line-height:400px;
color:#FFF;
text-align:center;
font-weight:900;
background:#066;
}Bước 4: CSS cho khối Main Info: Khối này nằm giữa hai khối Left Menu và Right Menu.
Mã:
#info{
float:left;
width:480px;
height:400px;
line-height:400px;
text-align:center;
font-weight:900;
}Bước 5: CSS cho khối Right: Khối này sẽ nằm bên phải nên chúng ta sẽ dùng câu lệnh float cho nó.
Mã:
#right{
float:left;
width:150px;
height:400px;
line-height:400px;
text-align:center;
color:#FFF;
font-weight:900;
background:#066;
}Bước 6: CSS cho khối Footer: Khối này nằm dưới ba khối cùng nổi (float) nên chúng ta phải xóa float bằng lệnh clear trong CSS nhé.
Mã:
#footer{
clear:left;
height:100px;
line-height:100px;
color:#FFFFFF;
text-align:center;
font-weight:900;
background:#333333;
}Dưới đây là phần CSS mình sẽ ghép các bước trên lại với nhau nhé. Chúng ta sẽ có một file style.css như sau:
Mã:
*{
margin:0px;
}
body{
font:12px verdana;
width:780px;
margin:auto;
background:#fff;
}
#top{
background:#0099FF;
color:#FFFFFF;
height:120px;
line-height:120px;
text-align:center;
font-weight:900;
}
#main{
width:780px;
height:400px;
}
#left{
float:left;
width:150px;
height:400px;
line-height:400px;
color:#FFF;
text-align:center;
font-weight:900;
background:#066;
}
#info{
float:left;
width:480px;
height:400px;
line-height:400px;
text-align:center;
font-weight:900;
}
#right{
float:left;
width:150px;
height:400px;
line-height:400px;
text-align:center;
color:#FFF;
font-weight:900;
background:#066;
}
#footer{
clear:left;
height:100px;
line-height:100px;
color:#FFFFFF;
text-align:center;
font-weight:900;
background:#333333;
}Sau khi các bạn đã viết code cho hai file index.html và style.css thì các bạn chạy file index.html để xem thành quả nhé. Nhưng nhớ là dẫn file style.css vào file index.html nhé. Trên đây là mình đã hướng dẫn các bạn tạo một giao diện layout dạng ba cột đơn giản. Nếu các bạn một layout các dạng khác thì hãy chỉnh sửa lại chút nhé.
Chúc các bạn thành công.
Nguồn: tuhocphp.com
Bài viết liên quan
Bài viết mới
