Lập Trình

[Series Web Bán Hàng] Bài 2: Tạo khung bố cục cho Web

Written by AnonyHome
· 1 min read >

Chào các bạn đến với bài 2 trong series web bán hàng bằng php chức năng đơn giản của AnonyHome
Trong bài này chúng ta sẽ cùng nhau tạo bố cục cho Website.

[Series Web Bán Hàng] Bài 2: Tạo khung bố cục cho Web AnonyHome

– Tạo một Folder ban_hang trong thư mục htdocs trong xampp của bạn.
– Tạo một file index.php trong Folder ban_hang bạn vừa tạo ở trên.
– Mở file index.php ra bằng một trình soạn thảo bất kỳ. Ở đây mình dùng Sublime Text nhé.
– Bạn sao chép đoạn code sau và dán vào file index ở trên:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Website bán hàng</title>
</head>
<body>
<center>
<table width="990px" border="1">
<tr>
<td colspan="3">Banner</td>
</tr>
<tr>
<td colspan="3">Menu ngang</td>
</tr>
<tr>
<td width="170px">Cột trái</td>
<td width="650px">Cột giữa</td>
<td width="170px">Cột phải</td>
</tr>
<tr>
<td colspan="3">Footer</td>
</tr>
</table>
</center>
</body>
</html>

Ở phần này mình sử dụng thẻ table, tr, td để tạo khung bố cục cho Website. Mình tạo một bảng có độ rộng là 990px và gồm có 4 hàng và 3 cột.
– Hàng thứ nhất mình sẽ để chứa banner.
– Hàng thứ 2 mình sẽ để chứa các menu ngang.
– Hàng thứ 3 sẽ chia làm 3 cột. Và sẽ là phần chính của website.
– Hàng thứ 4 sẽ dùng để chứa footer.
Tiếp theo các bạn lưu file index lại và chạy thử trên một trình duyệt bất kỳ và kết quả nhận được như sau:

[Series Web Bán Hàng] Bài 2: Tạo khung bố cục cho Web AnonyHome

Kết thúc bài 1. Ý kiến thắc mắc vui lòng để lại vào phần bình luận bên dưới. Hẹn gặp các bạn trong bài tiếp theo.

Written by AnonyHome
Fullstack Developer ! Profile

Leave a Reply

Your email address will not be published. Required fields are marked *

KHÓA HỌC JAVA CƠ BẢN FREE
Cùng tham gia khóa học Java cơ bản miễn phí tại kênh Youtube của AnonyHome Team
NHẤN NÚT ĐĂNG KÝ KÊNH BÊN DƯỚI ĐỂ CÙNG HỌC LẬP TRÌNH MIỄN PHÍ
ĐĂNG KÝ KÊNH ĐỂ CÙNG HỌC LẬP TRÌNH MIỄN PHÍ