Một trang web phổ biến giữa các nhà thiết kế bố trí được bố trí 3 cột. Nó cho phép rất nhiều tính linh hoạt cho các nội dung trình bày. Nó thường được dùng để bổ sung các liên kết cho các chuyên mục bên trái và các nhà tài trợ lót lên xuống ở bên phải cột tay. Trong thiết kế trang web này, chúng tôi sẽ hướng dẫn sử dụng tuyệt đối vị trí để thiết lập một cơ bản 3 cột trang web với một tiêu đề cho biểu tượng. Ví dụ này sẽ sử dụng trên định dạng và địa điểm liên kết trong cột trái, cơ quan, nội dung ở giữa và các nhà tài trợ hoặc bổ sung nội dung cho các bên cột bên phải.
Bố cục với ba mục Tiêu đề - Absolute Định vị
Nếu bạn không có một trình soạn thảo HTML bạn có thể tạo một tập tin văn bản bằng cách sử dụng WordPad và thêm những dòng mã:
<html>
<head>
<title> 3 cột bố trí </ title>
</ head>
<body>
</ body>
Lưu và tên nó là 3column.html. Để giảm bớt clutter giữa thẻ đầu, chúng tôi sẽ đính kèm một bên ngoài CSS stylesheet. Tạo thêm một tập tin văn bản và lưu nó và tên 3column.css. Hãy chắc chắn rằng để cả hai tác phẩm trong cùng một thư mục khi bạn tải chúng lên máy chủ của bạn. Để đính kèm một bên ngoài CSS stylesheet nơi này dòng mã dưới tiêu đề đầu giữa các thẻ: <link href=”3column.css” rel=”stylesheet” type=”text/css” />. Toàn bộ mã cho đến nay hình như đây:
<html>
<head>
<title> 3 cột bố trí </ title>
<link href=”3column.css” rel=”stylesheet” type=”text/css” />
</ head>
<body>
</ body>
</ html>
Hãy bắt đầu thiết lập trang web của chúng tôi. Giữa các cơ thể tạo ra các thẻ tiêu đề khu vực và các cột cho các nội dung bằng cách thêm các dòng mã: {lưu ý: Tôi đã thêm một số dummy Quyết định nội dung văn bản vào diện tích mà tôi đã nhận từ www.lipsum.com}.
<div id=”header”> <h1> 3 với mục Bố cục Tiêu đề </ h1> </ div>
<div id=”links”> <ul>
<li> <a href=”#”> Liên kết 1 </ a> </ li>
<li> <a href=”#”> Liên kết 2 </ a> </ li>
<li> <a href=”#”> Liên kết 3 </ a> </ li>
<li> <a href=”#”> Liên kết 4 </ a> </ li>
<li> <a href=”#”> Liên kết 5 </ a> </ li>
</ ul>
</ div>
<div id=”content”> <h5> Tiêu đề đối với một số nội dung </ H5>
<p>Thử hiết kế web trong đoạn chích dẫn. </ p>
</ div>
<div id=”sponsors”>
<ul>
<li> <a href=”#”> Tài trợ 1 </ a> </ li>
<li> <a href=”#”> Tài trợ 2 </ a> </ li>
<li> <a href=”#”> Tài trợ 3 </ a> </ li>
<li> <a href=”#”> Tài trợ 4 </ a> </ li>
<li> <a href=”#”> Tài trợ 5 </ a> </ li>
</ ul>
</ div>
Vì chúng tôi không có thêm bất cứ điều gì để stylesheet nào được nêu ra, nên bố trí của bạn trông giống như sau:
Bố cục với ba mục Tiêu đề - Absolute Định vị hình ảnh 2
Trước khi chúng tôi bắt đầu styling các cột, thêm dòng này vào mã 3column.css stylesheet:
body {
margin-top: 0px;
}
Điều này sẽ di chuyển tất cả mọi thứ cho đến đầu trang cạnh của overriding mặc định lề. Tiếp theo, hãy bắt đầu styling tiêu đề bằng cách thêm các dòng vào 3column.css stylesheet:
# header {
background-color: màu xanh lá cây;
height: 100px;
text-align: center;
padding-top: 20px;
}
# header h1 {
margin-right: tự động;
margin-left: tự động;
text-align: center;
font-size: 2em;
color: # FFFFFF;
}
Thông báo của chúng tôi đặt margin-giá trị hàng đầu để theo 0px # header h1. Điều này là bởi vì một số các trình duyệt như firefox sẽ đẩy mạnh ngay từ đầu trang, vì vậy chúng tôi phải thêm một 0px để ghi đè lên mặc định lề. Chúng tôi cũng đã thêm đầu trang padding của 20px div vào tiêu đề để chúng tôi có thể đẩy tiêu đề xuống vào giữa tiêu đề.
Tiếp theo, chúng tôi align hai bên cột. Thêm các dòng để 3column.css của bạn:
# link {
width: 150px;
vị trí: tuyệt đối;
trái: 0px;
top: 28px;
margin-top: 135px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: # 0066CC;
margin-left: 15px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: # 0066CC;
}
# {#sponsors
width: 150px;
vị trí: tuyệt đối;
top: 28px;
bên phải: 0px;
margin-top: 135px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: # 0066CC;
margin-right: 15px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: # 0066CC;
}
Chúng tôi thiết lập giá trị của các đường liên kết tới # trái: 0px # và các nhà tài trợ vào cột bên phải: 0px. Khi sử dụng tuyệt đối vị trí, bạn phải thiết lập những giá trị này như thế này để chúng sẽ luôn luôn đi xe lên mép chống lại của họ. Sau đó, chúng tôi có thể sử dụng lề trái và phải để đẩy nó ra khỏi The Edge chỉ một chút. Trong trường hợp này 15px. Lề đầu trang, nơi đặt thành 135px để đẩy nó ra khỏi khu vực đầu và vào cơ thể, nơi chúng tôi muốn họ.
Tiếp theo, chúng tôi thêm lề cho nội dung div vào trung tâm nó ở giữa phong cách và các <h5> tiêu đề của chúng tôi liking:
# content {
margin-left: 175px;
margin-right: 175px;
}
# content H5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
text-align: center;
text-decoration: underline;
}
Có rất nhiều cách khác nhau để theo phong cách trang web này bằng cách thêm các hình ảnh (s), màu sắc, hình ảnh và tùy chỉnh bằng cách thêm logo của bạn vào tiêu đề. Chỉ cần thử nghiệm và vui chơi!
