THÀNH VIÊN TRỰC TUYẾN

1 khách và 0 thành viên

Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • Tài nguyên dạy học

    Hỗ trợ trực tuyến

    • (984443970)

    Điều tra ý kiến

    Bạn thấy trang này như thế nào?
    Đẹp
    Đơn điệu
    Bình thường
    Ý kiến khác

    Ảnh ngẫu nhiên

    Tinh_ca_mua_xuan__fm.mp3 Nhung_anh_sao_nho_mp3.mp3 Nhac_co_doi.mp3 P10300971.flv P1030101.flv P1030097.flv Co_xuyen.jpg Audio_009CHUAN.mp3 Dat_nuoc_tinh_yeump31.mp3 Quang_binh_que_ta_oimp31.mp3 Quang_binh_que_ta_oimp3.mp3 Dat_Nuoc_Tinh_Yeu__Beat.mp3 Dat_nuoc_tinh_yeump3.mp3 Loi_to_tinh_ong_buommp3.mp3 Bac_chau_1.jpg Bac_chau_in_208x_298_copy.jpg 01_Track_119.mp3 Audio_006.mp3 Baner_Tet_1.swf QUE_HUONG_HAT_C_NGA.mp3

    LIÊN KẾT WEB

    Menu bên trái

    Quý vị chưa đăng nhập hoặc chưa đăng ký làm thành viên, vì vậy chưa thể tải được các tài liệu của Thư viện về máy tính của mình.
    Nếu chưa đăng ký, hãy nhấn vào chữ ĐK thành viên ở phía bên trái, hoặc xem phim hướng dẫn tại đây
    Nếu đã đăng ký rồi, quý vị có thể đăng nhập ở ngay phía bên trái.
    Gốc > CODE CHO WEBSITE >

    Code chia Module thành nhìu cột

     Chia module thành nhìu cột là công việc cần thiết mà bạn phải bít để biến giao diện blog của mình ngày càng chuyên nghiệp. Sau đây là phần hướng dẫn chi tiết công việc hữu ích này .

       
    Đầu tiên là phải tạo 1 module đã ( cái nài đừng nói ko bik nha ^^!, trong mục 
    Yahoo Plus + Hướng dẫn có rồi đấy )

       Tiếp theo, các bạn cho cái Module nó nằm ra vị trí ở giữa trang, thía cho nó to còn chia đc nhìu, ko thì cho lên top hoặc dưới bottom cũng đc :D

    Đây là code chia cái module ra làm 2 cột:
    -------------------------------

    <table style="width: 600px;"  border="1">
      <tr>
        <td style="width: 350px;text-align:left;" >
            Nội dung cột 1 
        </td>
        <td  style="width: 350px;text-align:left;" >
            Nội dung cột 2
        </td>
      </tr>
    </table>

    -----------------------------------

    VD:
               

       Nội dung cột 1       Nội dung cột 2    


    Cái này cơ bản thì nó có viền ở xung quanh, nếu mún xóa viền đi, các bạn sửa cái border=0 là đc.
    Để chèn nội dung vào các bạn chèn tương tự như sau:
    ----------------------------------------------------------
    <table border="1" style="width: 600px"  >
      <tr>
        <td style="width: 350px;text-align:left;">
            <img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>
            <img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>
            
        </td>
        <td  style="width: 350px;text-align:left;">
            <img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>
            <img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>
        </td>
      </tr>
    </table>
    ----------------------------------------------------------
    Ví dụ:
             

        Tiêu đề bài viết 1
         Tiêu đề bài viết 2
       
        Tiêu đề bài viết 1
         Tiêu đề bài viết 2
       

    Các bạn để ý, đoạn
      <img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif"> 
    là hình ngôi sao ở trước các tiêu đề, các bạn mún thay = cái gì cũng đc.
    Còn đoạn này
    <a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a>
    là để liên kết tới bài viết của bạn
    có cấu trúc 
    <a href="link bai viet">Tiêu đề bài viết </a>
    Các bạn có thể thay sao cho phù hợp
    Còn cái 
    <br>  là để xuống dòng.
    Mình viết cái nài theo cách cực đơn giản để các bạn dễ hỉu + dễ làm :D
    Còn nếu mún pro hơn thì kết hợp ít CSS nữa thì sẽ đẹp + gọn hơn :D


    Có 1 cái nữa là, nếu dùng code cơ bản như này, thì khi nội dung cột 1 dài hơn cột 2 hoặc ngược lại thì cái cột có nội dung ngắn hơn sẽ bị hiển thị tụt xuống ( ra giữa cột). Nếu muốn lúc nào vị trí của các bài viết cũng ở trên top của cột thì các bạn thêm cái này vào:

    valign="top"
    Vậy sau khi thêm sẽ đc cái này
    -------------------------------------------------
    <table border="1" style="width: 600px"  >
      <tr>
        <td style="width: 350px;text-align:left;""  valign="top">
            Nội dung cột 1
        </td>
        <td  style="width: 350px;text-align:left;""  valign="top">
            Nội dung cột 2
        </td>
      </tr>
    </table>
    -------------------------------------------------

    Trên này code để chia module thành 2 cột.
    Vậy nếu muốn chia thêm cột thì sao ?
    VD là 3 cột
    các bạn chỉ cần chèn thêm  1 đoạn nữa 
    -------------------------------------------------
        <td  style="width: 200px;text-align:left;""  valign="top">
            Nội dung cột 3
        </td>
    -------------------------------------------------
    là đc.
    nếu muốn độ rộng các cột ngang nhau thì các bạn chia cái % đều ra là đc.
    -------------------------------------------------
    <table border="1" style="width: 600px"  >
      <tr>
        <td style="width: 200px;text-align:left;""  valign="top">
            Nội dung cột 1
        </td>
        <td  style="width: 200px;text-align:left;""  valign="top">
            Nội dung cột 2
        </td>
        <td  style="width: 200px;text-align:left;""  valign="top">
            Nội dung cột 3
        </td>
      </tr>
    </table>
    -------------------------------------------------

    Vậy là đc 3 cột rồi nhé:
    VD:

                   

             Nội dung cột 1               Nội dung cột 2               Nội dung cột 3    

    Nhắn tin cho tác giả
    Nguyễn Kim Cương @ 11:13 26/05/2012
    Số lượt xem: 282
    Số lượt thích: 0 người
     
    Gửi ý kiến

    TÌM KIẾM ĐA NĂNG
    Về trang chủ: Tại đây Violet

    Giaodien