We will survive after 21/12/2012
Tìm kiếm Tùy Chỉnh

TỰ HỌC HTML FORUM

Chủ Đề
 
MỞ ĐẦU
MỘT SỐ TAG
HTML FORM
ĐỌC THÊM
xxhtml - div tag
Tháng Năm 30, 2009, 03:29:32 PM gửi bởi nvcnvn
thẻ div là một trong những thẻ khá là đặc biệt trong html, ngày càng được sử dụng nhiều hơn và được nhiều người đánh giá rất cao về mặt công dụng trình bày. Các lão làng trong thiết kế thường dùng các thẻ div rất nhiều thay vì các thẻ table.

Thẻ div thật ra là layer(lớp), thẻ div có thể chứa mọi thành phần html khác, nó đơn thuần giống như một tag body nhưng linh động hơn để hiểu tại sao gọi là lớp thì các bạn xem ví dụ này nhé, khoan hảy thắc mắc các thuộc tính bên trong, tìm mọi nơi trên top forum nhé.
Code: [Select]
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 77px; top: 78px" id="layer1">
anh yêu em nhiều lắm</div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: 126px; top: 38px" id="layer2">
<font color="#FF0000">tiền không có thì đừng có đòi yêu</font><p>
<font color="#FF0000">tiền tải nổi lên trên tình yêu thật sự</font>
</div>
Mình đặt code ví dụ ngay dưới đây, nhưng đây chính là điểm đặt biệt của thẻ div, nó xác định vị trí mà nó xuất hiện trên màng hình bất chấp nó ở đâu trên tài liệu. (trong các phần trươc thì ta đều thấy cái gì viết trước sẽ hiện ra trước)
anh yêu em nhiều lắm
tiền không có thì đừng có đòi yêu

tiền tải nổi lên trên tình yêu thật sự


Thuộc tính của thẻ div
Thẻ div có các thuộc tính cơ bản như :
id
width
height
title
style

trong đó thuộc tính style là thuộc tính đặc biệt nhất. Nói chung thì phần tử HTML nào cũng có tuộc tính Style, để hiểu rỏ thêm về vấn đề này các bạn hãy thử tìm hiểu về CSS, trong với gian tới, hocvui.net cũng sẽ cố gắng bổ sung mong được các bạn tiếp tục ùng hộ!
một ví dục ho thuộc tính style:
Code: [Select]
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left:537px; top:31px; background-color:#FFFF00" id="layer1">
</div>
Thật ra đa số các phần tử html đều có thuộc tính style, nhưng vì nó khá rắc rối và liên quan tới một khái niệm CSS nên mình sẻ dành riêng một mục dành riêng cho cái CSS này. Ngôn ngữ này mình sẽ giới thiêu với các bạn sau khi hoàn thành các chuyên trang về PHP và MySQL

Trong thẻ div này có nhiều  phần tử được ngăn cách nhau bởi dấu ;, giá trị của chúng nằm phía sau dấu : ở mỗi phần tử.
_width,height: khá quen thuộc, có lẽ cũng không cần ói tới, thẻ div mặc định vô hình , phải có thêm màu nền để thấy được kích thước của nó.
_background-color: hãy đặt giá trị màu vào sau dấu :
_background-image: ảnh nền cho tag div, mọi thứ hơi khác một chút, xem ví dụ:
Code: [Select]
background-image:url('/image003.png')_position:cung cấp điểm tham chiếu cho thẻ div.
  • position: absolute: điểm tham chiếu vị trí cho thẻ div là góc tái phía trên của cửa sổ trình duyệt
  • position: relative: tương tự nhưng tính từ phái bên phải
  • các thành phần top,left(từ trên xuống bao nhiêu, từ trái qua bao nhiêu) xác định vị trí của thẻ div ngoài ra còn có bottom và right, tuỳ mục đích mà bạn dùng tới.
_visibility: có hai giá trị: visiblehidden, bạn làm mọi việc để định dạng thẻ div, nhưng nếu để giá trị của thành phần này là hidden thì sẻ chằng ai trong thấy nó. Thường thì người ta dùng các scit như javascript hoặc vbscript để làm ẩn nó đi và xuất hiện lúc người ta muốn.
_z-index: bạn chồng hai thẻ div lên nhau bằng cách cho các phần tử chỉ vị trí nó giống hệt nhau, thẻ div nào có giá trị z-index lớn hơn thì sẽ ổi len trên. Nếu z-index mà là số âm, thì thẻ div sẻ chìm xuống dưới các phần tử html khác, thuộc tính này khá thú vị!

Phối hợp với javascript ta có thể khiến thẻ div ẩn hiện, ứng dụng này rất hay, các bạn hãy tìm hiểu thêm về javascript tại đây nhé: http://hocvui.net/javascript/



trên đây chỉ là một số yếu tố cơ bản mà mình biết được và trình bày với các bạn, mình sẽ cố gắng để hoàn thiện thông tin hơn nữa!
http://hocvui.net

Write Comment

Replies:

Trang: [1]

xx Re: html - div tag
Trả lời 1: Tháng Một 09, 2011, 03:14:03 PM gửi bởi Mkaka
Admins có thêm phần dạy CSS nữa thì trang web sẽ hoàn thiện hơn.Website này rất hay. :D

xx Re: html - div tag
Trả lời 2: Tháng Một 09, 2011, 04:36:14 PM gửi bởi nvcnvn
Đây cũng là ý định của mình, sau khi tái thiết lại cả diễn đàn mình sẽ thực hiện nhiều bài hướng dẫn mới hơn, cập nhật nhựng thay đổi mới nhất!
Trang: [1]
Bản quyền thuộc http://hocvui.net có copy đi đâu thì cũng để lại bản quyền nha!
 
 


Thích hợp với các trình dyệt:

Firefox - Opera- Google Chrome
iWin - iWin Online - iWin - iWin - Game Avatar - Game Avatar - Tai game Avatar - MGO - Long Tinh - Ninja School