Help Xin hướng dẫn setup bố cục các ảnh giống với hình

thuha123

Private
Tham gia
19/02/2022
Bài viết
6
Được Like
1
Xin chào mọi người!

Mình muốn hỏi về cách setup bố cục ảnh giống (hoặc gần giống) hình đính kèm.

Cảm ơn rất nhiều

2846A7B0-FE21-43B1-A4B4-D60B035B1169.jpeg
 

dangvanbac

Moderator
Thành viên BQT
Tham gia
19/04/2018
Bài viết
411
Được Like
163
Cái này bạn tạo ở phần thông báo, ở mục HTML, bạn copy CODE bên dưới. Ngoài ra bạn có thể tùy chỉnh kiểu khác, tìm hiểu HTML-CSS một chút là ok nhé.
Mã:
<div margin="-10px" style="background-color: rgb(127, 199, 179);" align="center">
                                                                                     
    <table class="tborder" style="width: 985px;" cellspacing="0" cellpadding="0" border="0" align="center">
                                                                                                                                                                                                                                                       <tbody>                                                                                                                                                                                                                                             </tbody> <tbody></tbody> <tbody></tbody>
        <tbody><tr style="">
                                                                                                                                                                                                                                                                 
            <td style="color:#FCFEF3;" class="tcat" colspan="3" align="center">
                                                                                                                                       <strong>  Các sự kiện đang diễn ra tại VnSharing</strong>                                                                                                                        
            </td>
                                                                                                                                                                                                                                                           
        </tr></tbody><tbody></tbody><tbody></tbody><tbody>                                                                                                                                                                                                                                             </tbody> <tbody></tbody> <tbody></tbody>
        <tbody><tr style="">
                                                                                                                                                                                                                                                           
            <td border="0" style="width: 10%;" align="left">
                                                                                                                                                                                                                 
                <div class="news_left">
                                                                                                              <script language="JavaScript">
<!--
/*
Random Image Link Script
By Website Abstraction (http://www.wsabstract.com)
and Java-scripts.net (http://www.java-scripts.net)
*/

function random_imglink(){
 var myimages=new Array()
 //specify random images below. You can have as many as you wish
 myimages[1]="https://i.imgur.com/FLlxtAE.png"
 myimages[2]="https://i.imgur.com/FLlxtAE.png"
 myimages[3]="https://i.imgur.com/FLlxtAE.png"
 myimages[4]="https://i.imgur.com/FLlxtAE.png"
 myimages[5]="https://i.imgur.com/FLlxtAE.png"
 myimages[6]="https://i.imgur.com/FLlxtAE.png"
 myimages[7]="https://i.imgur.com/FLlxtAE.png"


 var ry=Math.floor(Math.random()*myimages.length)

 if (ry==0)
    ry=1
    document.write('<img src="'+myimages[ry]+'" border=0>')
}

 random_imglink()
//-->
</script><img src="https://i.imgur.com/FLlxtAE.png" border="0">                                                                                        
                </div>
                                                                                                                                                                                                                               
            </td>
                                                                                                                                                                                                                                                           
            <td border="0" style="width: 90%;" valign="top" background="/https://i.servimg.com/u/f45/13/45/93/99/bgbook10.jpg" align="center">
                                                                                                                                        <br><a href="http://vnsharing.net/forum/showthread.php?t=715369"><img src="https://i.imgur.com/2hieErv.jpg" border="0"></a> <a href="http://vnsharing.net/forum/showthread.php?t=716691"><img src="https://i.imgur.com/RlEBfd9.jpg" border="0"></a> <br><br> <a href="http://vnsharing.net/forum/showthread.php?t=716697"><img src="https://i.imgur.com/WKxMFH2.jpg" border="0"></a> <a href="http://vnsharing.net/forum/showthread.php?p=15584432"><img src="https://i.imgur.com/nDC67Pm.jpg" border="0"></a> <br><br> <a href="http://vnsharing.net/forum/showthread.php?t=718000"><img src="https://2img.net/h/i1.minus.com/iTa6QY30VX7ob.jpg" border="0"></a> <a href="http://vnsharing.net/forum/showthread.php?t=718463"><img src="https://i.imgur.com/pzDj7pW.jpg" border="0"></a> <br><br> <a href="http://vnsharing.net/forum/showthread.php?t=718624"><img src="https://2img.net/h/i.imgbox.com/vsvrOoV4.jpg" border="0"></a>                                                                                                                        
            </td>
                                                                                                                                                                                                                                                           
        </tr></tbody><tbody></tbody><tbody></tbody><tbody>                                                                                                                                                                                                                                             </tbody>                                                                                                                                                                                                                                            
    </table>
                                                                                         
</div>
 

Đính kèm

  • 1.jpg
    1.jpg
    115 KB · Lượt xem: 14
  • 2.jpg
    2.jpg
    96.1 KB · Lượt xem: 13

thuha123

Private
Tham gia
19/02/2022
Bài viết
6
Được Like
1
Cái này bạn tạo ở phần thông báo, ở mục HTML, bạn copy CODE bên dưới. Ngoài ra bạn có thể tùy chỉnh kiểu khác, tìm hiểu HTML-CSS một chút là ok nhé.
Mã:
<div margin="-10px" style="background-color: rgb(127, 199, 179);" align="center">
                                                                                    
    <table class="tborder" style="width: 985px;" cellspacing="0" cellpadding="0" border="0" align="center">
                                                                                                                                                                                                                                                       <tbody>                                                                                                                                                                                                                                             </tbody> <tbody></tbody> <tbody></tbody>
        <tbody><tr style="">
                                                                                                                                                                                                                                                                
            <td style="color:#FCFEF3;" class="tcat" colspan="3" align="center">
                                                                                                                                       <strong>  Các sự kiện đang diễn ra tại VnSharing</strong>                                                                                                                       
            </td>
                                                                                                                                                                                                                                                          
        </tr></tbody><tbody></tbody><tbody></tbody><tbody>                                                                                                                                                                                                                                             </tbody> <tbody></tbody> <tbody></tbody>
        <tbody><tr style="">
                                                                                                                                                                                                                                                          
            <td border="0" style="width: 10%;" align="left">
                                                                                                                                                                                                                
                <div class="news_left">
                                                                                                              <script language="JavaScript">
<!--
/*
Random Image Link Script
By Website Abstraction (http://www.wsabstract.com)
and Java-scripts.net (http://www.java-scripts.net)
*/

function random_imglink(){
 var myimages=new Array()
 //specify random images below. You can have as many as you wish
 myimages[1]="https://i.imgur.com/FLlxtAE.png"
 myimages[2]="https://i.imgur.com/FLlxtAE.png"
 myimages[3]="https://i.imgur.com/FLlxtAE.png"
 myimages[4]="https://i.imgur.com/FLlxtAE.png"
 myimages[5]="https://i.imgur.com/FLlxtAE.png"
 myimages[6]="https://i.imgur.com/FLlxtAE.png"
 myimages[7]="https://i.imgur.com/FLlxtAE.png"


 var ry=Math.floor(Math.random()*myimages.length)

 if (ry==0)
    ry=1
    document.write('<img src="'+myimages[ry]+'" border=0>')
}

 random_imglink()
//-->
</script><img src="https://i.imgur.com/FLlxtAE.png" border="0">                                                                                       
                </div>
                                                                                                                                                                                                                              
            </td>
                                                                                                                                                                                                                                                          
            <td border="0" style="width: 90%;" valign="top" background="/https://i.servimg.com/u/f45/13/45/93/99/bgbook10.jpg" align="center">
                                                                                                                                        <br><a href="http://vnsharing.net/forum/showthread.php?t=715369"><img src="https://i.imgur.com/2hieErv.jpg" border="0"></a> <a href="http://vnsharing.net/forum/showthread.php?t=716691"><img src="https://i.imgur.com/RlEBfd9.jpg" border="0"></a> <br><br> <a href="http://vnsharing.net/forum/showthread.php?t=716697"><img src="https://i.imgur.com/WKxMFH2.jpg" border="0"></a> <a href="http://vnsharing.net/forum/showthread.php?p=15584432"><img src="https://i.imgur.com/nDC67Pm.jpg" border="0"></a> <br><br> <a href="http://vnsharing.net/forum/showthread.php?t=718000"><img src="https://2img.net/h/i1.minus.com/iTa6QY30VX7ob.jpg" border="0"></a> <a href="http://vnsharing.net/forum/showthread.php?t=718463"><img src="https://i.imgur.com/pzDj7pW.jpg" border="0"></a> <br><br> <a href="http://vnsharing.net/forum/showthread.php?t=718624"><img src="https://2img.net/h/i.imgbox.com/vsvrOoV4.jpg" border="0"></a>                                                                                                                       
            </td>
                                                                                                                                                                                                                                                          
        </tr></tbody><tbody></tbody><tbody></tbody><tbody>                                                                                                                                                                                                                                             </tbody>                                                                                                                                                                                                                                           
    </table>
                                                                                        
</div>
M lm được rồi, cảm ơn b ❤️❤️
 

Cua Rang Me

Private
Tham gia
28/06/2022
Bài viết
1
Được Like
0
Nhân tiện cho mình hỏi ké cách làm ảnh lật kèm lời nhắn giống bên trang chủ VnS với ạ. Mình mê quá mà mò mãi không ra. Mình cảm ơn nhiều lắm ạ!
 

Đính kèm

  • Untitled.png
    Untitled.png
    311.2 KB · Lượt xem: 7
  • Untitled1.png
    Untitled1.png
    174.8 KB · Lượt xem: 5

dangvanbac

Moderator
Thành viên BQT
Tham gia
19/04/2018
Bài viết
411
Được Like
163
Nhân tiện cho mình hỏi ké cách làm ảnh lật kèm lời nhắn giống bên trang chủ VnS với ạ. Mình mê quá mà mò mãi không ra. Mình cảm ơn nhiều lắm ạ!
Gửi bạn đoạn CODE:
Mã:
<link rel="stylesheet" href="https://vnsharing.site/forum/clientscript/vbulletin_css/style00010l/additional.css" />
<td border="0" width="10%" align="left">
<div id="vnsharing_ecard_flip_toggle" ontouchstart="this.classList.toggle('hover');" onclick="this.classList.toggle('hover');">
<div id="vnsharing_ecard_flipper">
<div id="vnsharing_ecard_front" style="background: rgba(0, 0, 0, 0) url(&quot;https://i.imgur.com/Zu8Hh1r.jpg&quot;) repeat scroll 0% 0%;" ")="" 0="" no-repeat;"=""></div>
<div id="vnsharing_ecard_back" style="background:#f8f8f8;">
<div id="vnsharing_ecard_title">Lời nhắn kèm:</div>
<p><a id="vnsharing_ecard_des" href="https://vnsharing.site/forum/showthread.php?t=36962" target="_blank">Chúc mừng sinh nhật vợ yêu, xin nhỗi vì trễ 1 ngày =))</a></p>
</div>
</div>
</div>
</td>

P/S: Bạn cần tìm hiểu HTML - CSS nhé, Google Search có nhiều, chịu khó đọc và tìm hiểu nhé.
 

Top Bottom