motecaca
Admin
Tham gia ngày : 04/12/2010
Điểm : 11050
Cảm ơn : 15
Sinh nhật : 29/12/1995
Đến từ : Hà Nội
 |  Tiêu đề: Cách tạo 1 Menu đơn giản  Sat Jun 04, 2011 2:13 pm | |
| Cách tạo 1 Menu đơn giản
Sau đây là cách để tạo một Menu đơngiản. Các bạn hãy
chú ý thật kĩ nha
Các bạn có thể xem menu demo ở đây: [You must be registered and logged in to see this link.]
1.
Tạo một Menu ngang
Link1 Link2 Link3 Link4
Để tạo 1 Menu ngang các bạn
dùng code sau:
Mã:
HTML Code:
<html>
</head>
<body>
<table
style="text-align: left; width: 588px; height: 24px;" border="2"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td
style="height: 10px; width: 100px; text-align: center; background-color: mã màu;color: mã màu link"><a
href="đường dẫn link 1">Link1</a></td>
<td
style="height: 10px; width: 100px; text-align: center; background-color: mã màu;"><a
href="đường dẫn link 2">Link2</a></td>
<td
style="height: 10px; width: 100px; text-align: center; background-color: mã màu;"><a
href="đường dẫn link 3">Link3</a></td>
<td
style="height: 10px; width: 100px; text-align: center; background-color: mã màu;"><a
href="đường dẫn link 4">Link4</a></td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
Trong đó:
*
width: chiều rộng của menu. height: chiều dài của menu.
* border: viền của
menu ( ở đây dặt giá trị 0 menu sẽ không hiện viền ).
* cellpadding ,
cellspacing: độ dày viền của menu.
* style="height: 10px; width: 100px;
background-color: mã màu;": phần này là đặt các thuộc tính cho từng cột của menu
. Riêng phần : background-color là phần đặt màu nền cho menu các bạn có thể dùng
hoặc xóa đi tùy thích.
* color: mã màu: màu cho link liên kết.
* center:
căn giữa cho link, các bạn cũng có thể đặt: left, right,
Các bạn để ý
đến phần mình tô chữ đỏ:
Mã:
Code:
style="height: 10px; width: 100px; color: mã màu; background-color: mã màu;">
href="đường dẫn link1">Link1
Các bạn muốn menu có bao nhiêu cột
thì chèn bấy nhiêu đoạn trên vào.
Nếu các bạn muốn chèn hình ảnh trước mỗi
link liên kết thì dùng đoạn sau:
Mã:
Code:
<td
style="height: 10px; width: 100px; color: mã màu; background-color: mã màu; text-align: center;"><img
src="link ảnh"><a
href="đường dẫn link 1">Link1</a></td>
<td
1. Tạo một Menu
dọc
Link1
Link2
Link3
Link4
Tạo một menu dọc cũng tương
tự như menu ngang thôi, các bạn dùng code sau:
Mã:
Code:
<html>
</head>
<body>
<table
style="text-align: left; background-color: rgb(255, 0, 0); width: 111px; height: 92px;"
border="2" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td
style="background-color: rgb(204, 51, 204);"><img
src="https://2img.net/h/i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Icon/26.gif"><a
href="http://f%3Fffd"><span
style="color: rgb(255, 255, 255);">Link1</span></a></td>
</tr>
<tr>
<td
style="background-color: rgb(204, 51, 204);"><img
src="https://2img.net/h/i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Icon/26.gif"><a
href="http://%3F%3F%3Fng+d%3Fn+link"><span
style="color: rgb(255, 255, 255);">Link2</span></a></td>
</tr>
<tr>
<td
style="background-color: rgb(204, 51, 204);"><img
src="https://2img.net/h/i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Icon/26.gif"><a
href="http://%3F%3F%3Fng+d%3Fn+link"><span
style="color: rgb(255, 255, 255);">Link3</span></a></td>
</tr>
<tr>
<td
style="background-color: rgb(204, 51, 204);"><img
src="https://2img.net/h/i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Icon/26.gif"><a
href="http://%3F%3F%3Fng+d%3Fn+link"><span
style="color: rgb(255, 255, 255);">Link4</span></a></td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
Các thuộc tính cũng tương tự như thank menu
ngang.
Các bạn chú ý sự khác nhau giữa code ngang và dọc là :
Menu dọc ta
sẽ thêm <tr>....<tr> ra ngoài các thẻ <td>...<td>. Cứ
mỗi khi bạn muốn menu có 1 cột mới thì thêm vào đó 1 thẻ
<tr>...<tr>! Mục đích sẽ giúp cho menu của chúng ta xuống dòng thế
thôi !
| |
|
