Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Nhờ mọi người giúp mình đoạn Code để tạo đường kẻ dọc trong HTML

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi anhtuan1006, 29/6/16.

Lượt xem: 19,860

  1. anhtuan1006 Thành viên cấp 2

    Mọi người giúp mình đoạn Code để tạo ra đường kẻ dọc giống hình dưới đây với, mình xin cảm ơn.

    ...
  2. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Không biết tại sao không thể chèn ảnh vào bài viết bên trên.

    Mình bổ sung thêm hình ảnh nhé:
  3. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Sao mình không đăng được ảnh nên vậy các bạn
  4. Phạm Điền

    Phạm Điền Thành viên cấp 2

    úp ảnh qua host khác xem, nhớ cấu trúc cặp thẻ chèn ảnh [ img] link ảnh [ / img] (không có dấu cách)[​IMG]
    anhtuan1006 thích bài viết này
  5. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Đây bạn ơi, bạn vào link này xem giúp mình với:
    Code:
    http://laptrinh.vn/d/9355-nho-moi-nguoi-tao-giup-minh-duong-ke-doc-nhu-hinh-duoi-day.html
  6. rajnlove

    rajnlove Thành viên cấp 2

    sao ko upanh len web chia sẻ mà lại attack lên web kia. muốn xem full bắt login

    chia theo hình khối thì trong ảnh chia làm 2 khối trái và phải
    vậy thỉ thêm vào class or style thông số bord
    nếu cột trái thì border-right: 1px dashed #D3D3D3;
    còn nếu cột phải thì thay right = left
    anhtuan1006 thích bài viết này
  7. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Cảm ơn Rajnlove nhiều , mình sẽ thử xem sao
  8. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Bạn Ranjlove ơi, không được bạn à, bạn hiểu nhầm ý của mình rồi. Mình cần câu lệnh sao để : có thể tùy chọn được độ dài của đường kẻ dọc ấy ( tức là muốn nó dài bao nhiêu thì tùy ý đó bạn ).

    Bạn xem giúp mình với nhé
  9. rajnlove

    rajnlove Thành viên cấp 2

    cái bảng đó bạn dùng table hay div
  10. rajnlove

    rajnlove Thành viên cấp 2

    D7hZZxm.png

    ý bạn là như thế này ?

    nếu vậy bạn tham khảo code bên dưới mình làm qua qua thôi
    HTML:
    <div class="wrapper">
            <div class="header">logo banner </div>
           
            <div class="content">
            <div class="left">TT - de mo canh cua tin tuc asdasdasdasdasdasd</div>
            <div class="right">
            <h4>Tin Tức</h4>
            <p>de mo canh cua tin tucde mo canh cua tin tucde mo canh cua tin tucde mo canh cua tin tucde mo canh cua tin tucde mo canh cua tin tuc</p>
            </div>
            <div class="cl"></div>
    </div>
    
            <div class="footer">Copyright © 2016 </div>
        </div>
        <Style>
        .wrapper {
        background: white;
        color: #4e5665;
        margin-bottom: 10px;
        border: 1px solid blue;
        border-radius: 3px;
    }
    .header{    background: blue;color:white;
        font-weight: 500;
        padding: 10px;
        border-bottom: 1px solid blue;text-align: center;
        font-weight: bold;
       }
       .content {background: white;    color: #565656;}
       .left{float:left;    border-right: 1px solid blue;
        height: 150px;
        width: 30%;}
       .right{float:right;width: 69%;}
       .cl{clear: both;}
        .footer{
            background: blue;color:white;
        font-weight: 500;
        padding: 10px;
        border-top: 1px solid blue;text-align: center;
        font-weight: bold;
        }
        <Style>
    anhtuan1006 thích bài viết này
  11. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Cảm ơn Rajnlove đã nhiệt tình giúp đỡ nhưng vẫn chưa đúng với ý mình mong muốn. Mình xin trình bày cụ thể thế này cho bạn hiểu:
    Đầu tiên mình tạo 1 thẻ Div lớn, sau đó trong Div lớn đó mình tạo ra 3 thẻ Div con là:
    + Div top : Dùng để tạo phần khung màu xanh ở trên.
    +Div body: Phần trắng ở phía giữa
    +Div bottom: Dùng để tạo phần khung màu xanh ở phái dưới.

    Sau đó trong Div body mình lại chia ra làm 2 Div nhỏ là:
    - Div left: phía bên trái
    - Div right: nằm phía bên phải

    thành 2 mục ghi tin tức khác nhàu như trong hình bạn thấy rồi đó. Bình thường thì mình cũng biết tạo đường phân cách giữa 2 phần này bằng cách viết thẻ Boder, nhưng như vậy thì đường kẻ sẽ kéo dài từ trên xuống dưới mà như trong hình của mình gửi lên thì nó chỉ vượt quá dòng W3 ... một chút thôi chứ khong phải kéo tận xuống dưới .
    Bạn xem kĩ lại cái hình nha.:
    Code:
    https://i.imgur.com/8lC8Z0A.png
    Bạn giúp mình với nhé !
    Chỉnh sửa lần cuối: 2/7/16
  12. rajnlove

    rajnlove Thành viên cấp 2

    neu vậy thì bạn thên thẻ pading vào nữa là tự động nó sẽ căn khoảng cách ra mà ?
    anhtuan1006 thích bài viết này
  13. VietCine.Com

    VietCine.Com Mới đăng kí

    anhtuan1006 bạn chỉ cần dữ nguyên code củ và thêm thuộc tính
    height: chiều dài bạn muốn;
    overflow: hidden;
    là ok nhé bạn
    anhtuan1006 thích bài viết này
  14. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Mình gửi Code lên các bạn chèn thêm vào giúp mình với nghen:
    HTML:
    <style type="text/css" media="all">
      #top{
         height:50px; width:800px;
         font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
         color:#FFF;
         font-size:36px;
         text-align:center;
         background-color:#009;
    
         }
      #main{
         height:200px; width:800px;
         }
             #left{
                 height:200px; width:165px;
                  text-align:justify;
                 float:left;
                 padding-left:15px; padding-right:20px;
                 height:150px;
                 overflow:hidden;
                 }
             #right{
                 height:200px; width:581px;
                 float:left;
                 padding-left:15px;
                 
                 }
     #bottom{
         height:50px; width:800px;
         text-align:center;
         color:#FFF; font-weight:300;
         line-height:50px;
         background-color:#009;
       
    
        }
    </style>
    </head>
    
    <body>
    
        <div style="height:300px; width:800px; border:solid thin #00F">
           
            <div id="top">Tin hot nhất trong ngày</div>
           
            <div id="main">
             
                  <div id="left">
                    <p>TT - Để mở cánh cửa thép dày cộp dẫn vào tầng hầm chi nhánh ngân hàng Sociestes tại thành phố Nice(Pháp), hai chiếc chìa khóa phải được tra vào hai ổ khóa đặt ở những vị trí khác nhau. Sicieste đã rất tự hào về ...</p>
                  </div>
                 
                  <div id="right">
                    <p><span style="font-size:24px; font-weight:800">Tin tức</span></br>
                    TT - Ngày 7-4, UBND huyện Đức Trọng (Lâm Đồng) cho biết đã ra quyết định kỷ luật cảnh cáo đối với hai trường công an xã Đa Quyn và Tà Năng vì thiếu tinh thần trách nhiệm trong công tác quản lý.</br></br>
                    W3School - The Largest Web Developer Site On The Next !</p>
                  </div>
               
            </div>
           
            <div id="bottom">Copy Right</div>
        </div>
       
    </body>
    </html>
    
  15. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Bạn Rajnlove, bạn VietCine.Com ơi lại giúp mình với ....mình vẫn chưa làm được
  16. rajnlove

    rajnlove Thành viên cấp 2

    s1gOYkV.png
    mình thấy ổn theo ý bạn rồi mà nhỉ ?
    anhtuan1006 thích bài viết này
  17. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Rajnlove ơi, như hình bạn gửi lên thì có giống với của mình đâu bạn, bạn đã xem kỹ cái ảnh mình gửi ở link của bài #11 chưa ?
  18. rajnlove

    rajnlove Thành viên cấp 2

    thì nó đã căn giữa và kéo dài theo khung ? . @@!
    anhtuan1006 thích bài viết này
  19. coids

    coids Thành viên cấp 2

    Muốn độ dài như ý thì set height cho nó là xong.
    anhtuan1006 thích bài viết này
  20. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    i240qXL.png
    Code:
    <html>
    <head>
    <style type="text/css" media="all">
    #top {
        height:50px;
        width:800px;
        font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
        color:#FFF; font-size:36px; text-align:center; background-color:#009;
    }
        #main{
        height:200px;
        width:800px; }
    
    #left {
        height: 250px;
        width: 165px;
        text-align: justify;
        float: left;
        padding-left: 15px;
        padding-right: 20px;
        overflow: hidden;
    }
    #right{
        width: 581px;
        float: left;
        padding-left: 15px;
        border-left: 1px solid;
    }
    #bottom{
        height:50px;
        width:800px;
        text-align:center;
        color:#FFF; font-weight:300;
        line-height:50px;
        background-color:#009;
    } </style>
    </head>
    <body>
    <div style="height:300px; width:800px; border:solid thin #00F">
    <div id="top">Tin hot nhất trong ngày</div>
    <div id="main">
    <div id="left">
    <p>TT - Để mở cánh cửa thép dày cộp dẫn vào tầng hầm chi nhánh ngân hàng Sociestes tại thành phố Nice(Pháp), hai chiếc chìa khóa phải được tra vào hai ổ khóa đặt ở những vị trí khác nhau. Sicieste đã rất tự hào về ...</p>
    </div>
    <div id="right">
    <p><span style="font-size:24px; font-weight:800">Tin tức</span></br> TT - Ngày 7-4, UBND huyện Đức Trọng (Lâm Đồng) cho biết đã ra quyết định kỷ luật cảnh cáo đối với hai trường công an xã Đa Quyn và Tà Năng vì thiếu tinh thần trách nhiệm trong công tác quản lý.</br></br> W3School - The Largest Web Developer Site On The Next !</p>
    </div>
    </div>
    <div id="bottom">Copy Right</div>
    </div>
    </body>
    </html>
    
    anhtuan1006 thích bài viết này

Ủng hộ diễn đàn