• fans
  • 1036 reader
  • followers
Cách sử dụng div đúng cách
  • Tutorial Details
  • Độ khó: Trung Bìnhăn bản
  • Thời gian: 12:19 phút
  • File size: 22.55 MB
  • Yêu cầu: Phù hợp cho tất cả các đối tượng lập trình viên

Div là thẻ rất quan trọng trong thiết kế giao diện. Nó được sử dụng để thay thế hoàn toạn định dạng bảng trước đây. Tuy nhiên khi mới bắt đầu làm việc với CSS, chúng ta có xu hướng lạm dụng thẻ Div. Đôi khi vì muốn tạo được một thành phần nào đó mà bạn có thể sử dụng thẻ div nhiều hơn mức cần thiết. Trong bài này sẽ hướng dẫn bạn cách sử dụng thẻ div đúng cách và “tiết kiệm” nhất.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • Toàn

    Các bài hướng dẫn của anh rất bổ ích, Chúc anh luôn vui !!!!

  • huỳnh văn đông

    các video của anh rất hữu ích! em chúc anh càng ngày làm càng nhiều video hướng dẫn thiết kế! chúc anh zui zẻ ^^\

  • http://www.minipoggames.info poggames

    Cảm ơn a nhé! E rất thích cách nói chuyện của a, rất vui :D

  • thanh

    hay lam anh oi

  • Lê Tuấn Anh

    Cám ơn bài viết rất nhiều !

  • hoacomay124

    thực sự cảm ơn rất nhiều!

  • toan

    cảm ơn anh, video rất hay
    anh cho em hỏi anh xài chương trình gì, mà sửa css trực tiếp vậy

    • http://www.izwebz.com Demon Warlock

      Đọc faqs em ơi :D

    • Nhan. Nguyen Trong

      Mình thấy các video của anh admin khá hay, khá chi tiết, chân thành cảm ơn anh! Demon Warlock, chúc anh sức khỏe.

  • Demon Warlock

    Anh ko có keygen và izwebz không cung cấp crack, serial hoặc keygen cho phần mềm có bản quyền.

  • duc bui mi

    anh ơi.. anh có thể cho em keygen, code của cái chương trình anh viết trên video kia không… cám ơn anh nhiều

  • http://duongpho.net MrV2m

    @tran thi ngoc quuynh: Một giao diện ưa nhìn thì điều đầu tiên nhất là ý tưởng, trong ý tưởng sẽ có hình dạng tức layout của website, ngoài ra còn có màu sắc chủ đạo, màu sắc text, font chữ cũng hok kém phần quan trọng. Cho nên mỗi phần đều quan trọng như nhau, hok có cái này quan trọng hơn cái kia được. Theo mình là thế thôi, ý kiến cá nhân thôi nhá.
    http://duongpho.net

  • tran thi ngoc quuynh

    de thiet ke 1 giao dien dep dieu j la quan trong nhat

  • cancel

    Những bài viết của bạn rất hay, cảm ơn bạn nhiều lắm :X

  • masoi

    To DW: mình không coi được film trên web rồi. Mong bạn sửa lại.

  • http://megavnn.com.vn mega

    ah quên ^ ^ko op link stite:http://megavnn.com.vn

  • http://megavnn.com.vn mega

    cám ơn mod! bạn coi qua website mình dựng template cho joomla thế này có thiếu sót gì ko mong bạn chỉ giáo!

  • http://www.thegioithanhcong.com nguyễn tấn dũng

    anh demon oi,trang web của em http://www.thegioithanhcong.com em dung table bỏ vào div ,trong trình duyệt ff hay sẩi thì ok còn ie 6,7,8 bị bung tâble ra ngoai ,anh giúp em với ,thank trước .

  • Nguyễn Hoàng Dương

    Thực sự mình cũng gặp rất nhiều bạn mới làm sang phong cách web standard lạm dụng quá nhiều thẻ DIV, các bạn thực sự chưa hiểu hết về web standard.

    Theo mình làm việc thì web standard thực chất là kết hợp “tối thiểu” các thẻ HTML chuẩn với CSS để làm template. Mỗi thẻ đều có tính năng riêng, và nhiều thẻ bản thân nó đã có thể làm nhiều điều với sự hỗ trợ của css không cần phải DIV.

    Mình hay tận dụng tối đa CSS và giảm tối thiểu thẻ html sao cho dùng đúng chức năng:
    dùng làm liên kết (vẫn có thể làm các nút ảnh đẹp với chỉ riêng thẻ a không cần div)
    dùng khi nào cần đến ảnh
    dùng mọi lúc khi kết cấu dạng danh sách (ngang, dọc được tuốt)
    .. tận dụng cho các tiêu đề rất tốt
    dùng với các đoạn văn bản
    thi thoảng với những định dạng “phá cách” vào 1 nội dung nào đó (kết hợp khá tốt với các thẻ khác)
    và các thẻ liên quan nó chỉ dùng với các thành phần có dữ liệu dạng cột, hàng nhiều
    chỉ dùng khi tạo các region phân chia chính thôi.

    Và điều nữa là khi hiểu css rồi thì dùng Dreamweaver sẽ hỗ trợ rất tốt cho việc thiết kế web (theo mình cảm nhận trong quá trình làm việc) mình thì không khoái lắm những tool nhỏ lẻ, bởi vì Dreamweaver giúp mọi việc kết hợp lại với nhau rất tuyệt và nhanh chóng.

  • Vinh

    Em rất thích các tut của thày, dễ hiểu cực kỳ.
    Mong sẽ đựoc xem nhiều tut nữa .
    Cảm ơn thày

  • ailing

    em test lại oy` tại máy em chứ hok phaj~ tại wed..sorry anh^^!

  • ailing

    anh DW oy, em hok fullscreen dc T.T hok thấy j`hit ah`. lúc trước em xem bình thường, sao giờ dzo hok fullscreen ra dc

  • nhatnhat

    Xin cam on that nhieu

  • nothing1306

    Em thiệt là thương anh quá đi ah`, những clip của anh thật sự rất hữu ích, cho dù là cái này.
    P/s:
    #wrapper :D

  • AlanSmith

    Mấy cái này bạn xem lại các clip CSS của a DW lại đi hầu như hướng dãn hết rùi mà

  • http://bearsharks.com clackken.smith

    Vấn đề của bạn là bạn chưa xác định rõ mục đích thôi, nếu bạn khai báo Main và footer theo đúng thứ tự, thì cho dù các thẻ left hay right có cao đến đâu cũng không làm tràn footer của bạn. Về cái này bạn nên xem qua một số videos hướng dẫn từ PSD -> xHtml nhé

  • Nguyễn Anh Hiếu

    Anh ơi! cho em hỏi tẹo nhé. Em không hiểu tại sao trong một thẻ DIV lại vừa có id và vừa có class ạh. anh giải thích cho em hiểu nhé! Em mới học web nên không hiểu lắm.

    • http://www.izwebz.com Demon Warlock

      À! ví dụ em có 2 thẻ div muốn nó nhìn hoàn toàn giống nhau thì em có thể thêm class vào và chỉ style cho class đó thôi bởi vì class có thể xuất hiện được ở nhiều chỗ. Nhưng em lại muốn thẻ div đầu tiên có border dày hơn thẻ div thứ hai nên em có thể thêm ID vào thẻ đầu tiên để style chỉ cho thẻ đó. Chính vì thế người ta vừa có class vừa có ID.

      • Nguyễn Anh Hiếu

        Cám ơi anh nhiều! về sau có gì thắc mắc em sẽ hỏi sau:D

  • nguyen van huy

    Anh giúp em cái này :
    Trong trang web của em có các thẻ sau:

    #container
    #banner
    #navigation
    #main
    #left
    #center
    #right
    #footer

    Trong thẻ “main” thì các thẻ “left”,”center”,”right” có chiều cao thay đổi .
    Anh giúp em viết code cho thẻ “main”,”left”,”center”,”right” và “footer” để cho thẻ div(id =”footer”) luôn ở vị trí cuối trang web ngay cả khi chiều cao của các thẻ “left” ,”center”,”right” thay đổi.
    Em cảm ơn!

  • nguyen van huy

    Em định đưa các thẻ div lên mà nó không hiển thị trên bài viết

  • Moon Knight

    cảm ơn anh :)

  • Nguyễn Hữu Thành

    Thật sự không biết nói thế nào để cảm ơn bác IZWEBZ nữa, mấy video của bác thật sự là cực kỳ hay, em không thể diễn tả nổi khi xem và làm theo bác, rất hay.
    Mong bác mà còn tuyệt chiêu gì cho anh em xem nữa nhé
    Thank bác nhiều!

  • Kid304

    Video minh họa ví dụ rất dễ hiểu. Thanks !

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives