免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

三合一信纸

本帖最後由 rainbow 於 2021-10-10 09:27 編輯

大标题


此背景图原宽只有720px,今用代码将其放大制作成800宽的三合一边框。



  1. <center><div style="width:800px;background-color:#ffffff"><!--所有背景颜色按照原图颜色更改--><section style="background-image:url('https://2img.net/h/img0.oldkids.cn/uploads/diary/200808/21220058233.gif');background-color:#ffffff; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:111px"><!--图片高度须按原图比例压缩--></section><section style="margin-top:0px; background-color:#fcfcd0; width:772px;"><p style="padding-top:20px" align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #E37602; text-shadow: 3px 3px 3px #800000; letter-spacing:20px">大标题</span><!--标题位置和颜色须自行调整--></p><br>
  2. <section style="width:772px; text-align:center"><p style="padding-left:40px; padding-right:30px" align=left><span style="FONT: bold 30px/140% kaiti; COLOR: #800000">文字开始……。
  3. <br>
  4. </span></p></section></section><section style="margin-top:0px;"><p align=center><img src="https://2img.net/h/img0.oldkids.cn/uploads/diary/200808/21220206110.gif" style="width: 100%;"></p></section></section></div></center><br><br>
複製代碼


《大标题》


文字开始……。



https://2img.net/h/i.postimg.cc/NFyyCqrZ/jz-t-f6f7ff.gif
https://2img.net/h/i.postimg.cc/0QXMC2rp/jz-b-f6f7ff.gif


 
大 标 题

文字开始……。
 


  1. <center><br><br>
  2. <div style="background-color:#2b9be5; width:800px">
  3. <table cellspacing="0" cellpadding="0" width="100%" align="center">
  4. <tbody>
  5. <tr>
  6. <td>
  7. <table cellspacing="0" cellpadding="0" width="800" background="https://2img.net/h/s20.postimg.cc/4ds82akgt/image.jpg" title="3in1/L1.jpg" align="center" height="157">
  8. <tbody>
  9. <tr>
  10. <td>
  11. &nbsp;
  12. </td>
  13. </tr>
  14. </tbody>
  15. </table>
  16. <table cellspacing="0" cellpadding="0" width="800" background="https://2img.net/h/s20.postimg.cc/qe8kix34t/L2b.jpg" title="3in1/L2b.jpg" align="center">
  17. <tbody>
  18. <tr>
  19. <td >
  20. <div style="font-weight:bold;font-size:60px;color:#800000;line-height:150%;font-style:normal;font-family:SimHei" align=center>大 标 题</div><br>
  21. <div style="padding-left:90px; padding-right:70px; font-family:KaiTi_GB2312; COLOR: #fcfcfc; FONT-SIZE: 24px; line-height:150%; font-weight:bold" align=left>文字开始……。</div>
  22. </td></tr></tbody></table>
  23. <table cellspacing="0" cellpadding="0" width="800" background="https://2img.net/h/s20.postimg.cc/a4ieg0sgt/L3a.jpg" title="3in1/L3a.jpg" align="center" height="155">
  24. <tbody>
  25. <tr>
  26. <td>&nbsp;
  27. </td></tr></tbody></table>
  28. </td></tr></tbody></table></div></center>
  29. <br><br>
複製代碼

TOP

本帖最後由 rainbow 於 2021-4-28 17:32 編輯

 大标题

  文字开始






  1. <center><div style="width:800px">
  2. <table align="center" background="https://i.imgur.com/E4wrIub.jpg" border="0" cellpadding="0" cellspacing="0" height="203" width="800"><tbody><tr><td style="padding-bottom:10px" valign=bottom>
  3. <p align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #800080; text-shadow: 3px 3px 3px #000000; letter-spacing:20px">&emsp;大标题</span></p>
  4. </td></tr></tbody></table>
  5. <table align="center" background="https://i.imgur.com/DQSjp9B.jpg" border="0" cellpadding="0" cellspacing="0" width="800"><tbody><tr><td style="padding:60px 20px">
  6. <p align=left><span style="FONT: bold 30px/140% kaiti; COLOR: #cc0033">&emsp;&emsp;文字开始</span></p><br><br>
  7. </td></tr></tbody></table>
  8. <table align="center" background="https://i.imgur.com/siZe4Q5.jpg" border="0" cellpadding="0" cellspacing="0" height="203" width="800"><tbody><tr><td valign=top>
  9. <p align=center><img src="https://i.imgur.com/0qSWCmF.gif" width=400><br>
  10. <audio controls autoplay="autoplay" loop="loop" hidden="true" src="http://other.web.nc01.sycdn.kuwo.cn/resource/n3/24/21/1411205537.mp3"></audio></p>
  11. </td></tr></tbody></table>
  12. </div></center>
  13. <br><br>
複製代碼


TOP

本帖最後由 rainbow 於 2021-4-28 18:43 編輯

 大标题

  文字开始





  1. <center>
  2. <div style="width:800px;background-color:#e5e5e5">
  3. <table align="center" background="https://2img.net/h/i.postimg.cc/ZnNknYjR/3in1-blackrose-t.jpg" border="0" cellpadding="0" cellspacing="0" height="203" width="800"><tbody><tr><td style="padding-bottom:10px" valign=bottom>
  4. <p align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #8C8C8C; text-shadow: 3px 3px 3px #000000; letter-spacing:20px">&emsp;大标题</span></p>
  5. </td></tr></tbody></table>
  6. <table align="center" background="https://2img.net/h/i.postimg.cc/zBVYmFgT/3in1-blackrose-m.jpg" border="0" cellpadding="0" cellspacing="0" width="800"><tbody><tr><td style="padding:60px 20px">
  7. <p align=left><span style="FONT: bold 30px/140% kaiti; COLOR: #000000">&emsp;&emsp;文字开始</span></p><br><br>
  8. </td></tr></tbody></table>
  9. <table align="center" background="https://2img.net/h/i.postimg.cc/xChD9Nvh/3in1-blackrose-b.jpg" border="0" cellpadding="0" cellspacing="0" height="203" width="800"><tbody><tr><td valign=top>
  10. </td></tr></tbody></table>
  11. </div></center><br><br>
複製代碼


TOP

本帖最後由 rainbow 於 2021-4-29 08:50 編輯

  大标题

用section把920宽的大图背景缩小到800。







  1. <center>
  2. <div style="width:800px;background-color:#ffcc9a">
  3. <section style="background-image:url('http://2img.net/h/img4.oldkids.cn/upload/9000/u7276/2012/04/09/blog_20120409083559828701.jpg');background-color:#ffcc9a; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:203px">
  4. <p style="padding-top:90px" align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #FF6924; text-shadow: 3px 3px 3px #800000; letter-spacing:20px">&emsp;&nbsp;大标题</span></p>
  5. </section>
  6. <section style="margin-top:-15px; background-image:url('http://2img.net/h/img4.oldkids.cn/upload/9000/u7276/2012/04/09/blog_20120409083611550235.jpg');background-color:#ffcc9a; background-repeat:repeat-y;background-position: center top; background-size:cover; width:800px;">
  7. <section style="width:800px">
  8. <p style="padding-left:70px; padding-right:70px" align=left><span style="FONT: bold 26px/140% kaiti; COLOR: #993300">
  9. 文字开始……。<br><br>
  10. <br><br>
  11. <br><br>
  12. </span></p>
  13. </section></section>
  14. <section style="margin-top:-15px;"><p align=center><img src="http://2img.net/h/img2.oldkids.cn/upload/9000/u7276/2012/04/09/blog_20120409083630211142.jpg" style="width: 100%;"></p></section>
  15. </section>
  16. </div></center><br><br>
複製代碼


TOP

本帖最後由 rainbow 於 2021-4-28 22:39 編輯

大标题


此背景图原宽只有700px,今用代码将其放大制作成800宽的三合一边框。






  1. <center><div style="width:800px;background-color:#b1d9a4"><!--所有背景颜色按照原图颜色更改--><section style="background-image:url('https://2img.net/h/image12.360doc.com/DownloadImg/2010/07/0700/3918863_11.jpg');background-color:#b1d9a4; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:80px"><!--图片高度须按原图比例压缩--></section><section style="margin-top:0px; background-image:url('https://2img.net/h/image12.360doc.com/DownloadImg/2010/07/0700/3918863_25.jpg');background-color:#b1d9a4; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;"><p style="padding-top:10px" align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #009900; text-shadow: 3px 3px 3px #000000; letter-spacing:20px">大标题</span><!--标题位置和颜色须自行调整--></p><br>
  2. <section style="width:800px"><p style="padding-left:70px; padding-right:70px" align=left><span style="FONT: bold 30px/140% kaiti; COLOR: #005500">文字开始……。
  3. <br><br><br>
  4. </span></p></section></section><section style="margin-top:-25px;"><p align=center><img src="https://2img.net/h/image12.360doc.com/DownloadImg/2010/07/0700/3918863_13.jpg" style="width: 100%;"></p></section></section></div></center><br><br>
複製代碼


TOP

大标题


  此背景图原宽只有780px,今用代码将其制作成800宽的三合一边框。



  1. <center><div style="width:800px;background-color:#294c22">
  2. <section style="background-image:url('https://2img.net/h/image67.360doc.com/DownloadImg/2013/12/0803/37298893_28.jpg');background-color:#294c22; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:129px"></section>
  3. <section style="margin-top:-20px; background-image:url('https://2img.net/h/image67.360doc.com/DownloadImg/2013/12/0803/37298893_29.jpg');background-color:#294c22; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;">
  4. <p style="margin-top:20px" align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #E2F1DF; text-shadow: 3px 3px 3px #53A046; letter-spacing:20px">大标题</span></p><br>
  5. <section style="width:800px"><p style="padding-left:60px; padding-right:60px" align=left><span style="FONT: bold 30px/140% kaiti; COLOR: #ffffff">
  6. 文字开始……。<br><br>
  7. </span></p></section></section>
  8. <section style="margin-top:-25px;">
  9. <section style="background-image:url('https://2img.net/h/image67.360doc.com/DownloadImg/2013/12/0803/37298893_31.jpg');background-color:#294c22; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:129px">
  10. <p style="padding-top:30px" align=center><img src="https://2img.net/h/image67.360doc.com/DownloadImg/2013/12/0803/37298893_30.jpg" style="width: 300px;"></p></section></section></section></div></center><br><br>
複製代碼


TOP

本帖最後由 rainbow 於 2021-4-28 22:19 編輯

大标题


  此背景图原宽只有640px,今用代码将其制作成800宽的三合一边框。



  1. <center><div style="width:800px;background-color:#1465a4">
  2. <section style="background-image:url('https://2img.net/h/i.postimg.cc/k5SZ8QHy/37298893-1.jpg');background-color:#1465a4; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:157px"><p style="padding-top:80px" align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #f9db83; text-shadow: 3px 3px 3px #57AAEA; letter-spacing:20px">大标题</span></p></section>
  3. <section style="margin-top:-20px; background-image:url('https://2img.net/h/i.postimg.cc/ZRhQL9tz/37298893-2.jpg');background-color:#1465a4; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:303px"><!--文章长时须把303改为auto-->
  4. <section style="width:800px"><p style="padding-left:80px; padding-right:80px" align=left><span style="FONT: bold 30px/140% kaiti; COLOR: #ffffff"><br>
  5. 文字开始……。<br><br>
  6. </span></p></section></section>
  7. <section style="margin-top:-25px;">
  8. <section style="background-image:url('https://2img.net/h/i.postimg.cc/4xqqmLWd/37298893-3.jpg');background-color:#1465a4; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:209px">
  9. <p style="padding-top:30px" align=center><img src="https://2img.net/h/i230.photobucket.com/albums/ee206/cats4723/3-1.gif" style="width: 300px;"></p>
  10. </section></section></section></div></center><br><br>
複製代碼


TOP

大标题

         

文字开始……。



  1. <center><div style="width:800px">
  2. <table cellspacing="0" cellpadding="0" width="800" background="https://s2.ax1x.com/2019/03/23/AG8ZQS.png" align="center" height="169">
  3. <tbody>
  4. <tr>
  5. <td style="padding-bottom:0px" valign=bottom><p align=center><span style="FONT: bold 50px/140% Microsoft YaHei; COLOR: #0098ca; text-shadow: 3px 3px 3px #000000; letter-spacing:10px">大标题</span></p>
  6. </td>
  7. </tr></tbody></table>
  8. <table cellspacing="0" cellpadding="0" width="800" background="https://s2.ax1x.com/2019/03/23/AG8ARf.png" align="center">
  9. <tbody>
  10. <tr>
  11. <td valign=top>         
  12. <p style="padding:0px 50px 0px 80px" align=left><span style="FONT: normal 24px/140% Microsoft YaHei; COLOR: #003399">文字开始……。</span></p>
  13. </td></tr></tbody></table>
  14. <table cellspacing="0" cellpadding="0" width="800" background="https://s2.ax1x.com/2019/03/23/AG8Fit.png" align="center" height="118">
  15. <tbody>
  16. <tr>
  17. <td>
  18. <p align=center>
  19. </p>
  20. </td></tr></tbody></table>
  21. </div></center>
  22. <br><br>
複製代碼


TOP

本帖最後由 rainbow 於 2021-4-28 22:38 編輯

大标题


此背景图原宽只有690px,今用代码将其用以制作成800宽的三合一边框。



  1. <center><div style="width:800px;background-color:#e2f2ff"><!--所有背景颜色按照原图颜色更改--><section style="background-image:url('https://2img.net/h/image67.360doc.com/DownloadImg/2013/12/0803/37298893_25.jpg');background-color:#e2f2ff; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:139px"><!--图片高度须按原图比例压缩--></section><section style="margin-top:0px; background-image:url('https://2img.net/h/image67.360doc.com/DownloadImg/2013/12/0803/37298893_26.jpg');background-color:#e2f2ff; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;"><p style="margin-top:0px" align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #BDE2FF; text-shadow: 3px 3px 3px #003399; letter-spacing:20px">大标题</span><!--标题位置和颜色须自行调整--></p><br><section style="width:800px"><p style="padding-left:70px; padding-right:70px" align=left><span style="FONT: bold 30px/140% kaiti; COLOR: #003399">文字开始……。
  2. </span></p></section></section><section style="margin-top:0px;"><p align=center><img src="https://2img.net/h/image67.360doc.com/DownloadImg/2013/12/0803/37298893_27.jpg" style="width: 100%;"></p></section></section></div></center><br><br>
複製代碼


TOP

本帖最後由 rainbow 於 2021-4-28 22:29 編輯

大标题

  此背景图原宽只有700px,今用代码将其制作成800宽的三合一边框。

  用section制作三合一信纸(又称三图信纸、三合一边框),可以不受素材图片的宽度,以适应不同网站的宽度限制,比用table制作更为灵活方便。



  1. <center><div style="width:800px;background-color:#4e6e6d"><section style="background-image:url('https://2img.net/h/image67.360doc.com/DownloadImg/2013/12/0803/37298893_16.jpg');background-color:#4e6e6d; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:180px"><p style="padding-top:90px" align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #E1EAEA; text-shadow: 3px 3px 3px #000000; letter-spacing:20px">大标题</span></p></section>
  2. <section style="margin-top:-0px; background-image:url('https://2img.net/h/image67.360doc.com/DownloadImg/2013/12/0803/37298893_17.jpg');background-color:#4e6e6d; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:auto"><section style="width:100%"><p style="padding-left:90px; padding-right:90px" align=left><span style="FONT: bold 30px/140% kaiti; COLOR: #ffffff">
  3. 文字开始……。
  4. <br><br>
  5. </span></p></section></section><section style="margin-top:-0px;"><p align=center><img src="https://2img.net/h/image67.360doc.com/DownloadImg/2013/12/0803/37298893_18.jpg" style="width: 100%;"></p></section></section></div></center><br><br>
複製代碼


TOP

本帖最後由 rainbow 於 2021-4-28 22:29 編輯

大标题


此背景图原宽为920px,不用table,今改用section缩小至800宽。



  1. <center><div style="width:800px;background-color:#567f0b"><section style="background-image:url('https://2img.net/h/img1.oldkids.cn/upload/9000/u7025/2012/08/18/blog_20120818212733844511.gif');background-color:#567f0b; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:203px">
  2. </section>
  3. <section style="margin-top:0px; background-image:url('https://2img.net/h/img4.oldkids.cn/upload/9000/u7025/2012/08/18/blog_20120818212734038653.gif');background-color:#567f0b; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:203px"><section style="margin-top:0px; width:100%"><p align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #D8F69C; text-shadow: 3px 3px 3px #000000; letter-spacing:20px">大标题</span></p><br>
  4. <p style="padding:0px 100px" align=left><span style="FONT: bold 30px/140% kaiti; COLOR: #ffffff">
  5. 文字开始……。
  6. </span></p></section></section><section style="margin-top:0px;background-image:url('https://2img.net/h/img3.oldkids.cn/upload/9000/u7025/2012/08/18/blog_20120818211143369672.gif');background-color:#567f0b; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:203px"><!--文章长时须把203改为auto--><p style="padding-top:20px" align=center><img src="http://img0.liveinternet.ru/images/attach/c/6/90/687/90687954_razd49.gif" width=400></p></section></section></div></center><br><br>
複製代碼


TOP

大标题

文字开始……。



  1. <center><div style="width:800px;background-color:#ebb5ab"><section style="background-image:url('https://2img.net/h/img4.oldkids.cn/upload/9000/u7276/2012/04/09/blog_20120409115006154302.jpg');background-color:#ebb5ab; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:203px"><p style="padding-top:80px" align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #ff0080; text-shadow: 3px 3px 3px #800000; letter-spacing:20px">大标题</span></p></section>
  2. <section style="margin-top:0px; background-image:url('https://2img.net/h/img3.oldkids.cn/upload/9000/u7276/2012/04/09/blog_20120409115018594566.jpg');background-color:#ebb5ab; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:203px"><!--文章长时须把203改为auto--><section style="margin-top:-30px; width:100%"><p style="padding:0px 70px 0px 70px" align=left><span style="FONT: bold 30px/140% kaiti; COLOR: #cc0033">文字开始……。
  3. </span></p></section></section><section style="margin-top:0px;background-image:url('https://2img.net/h/img3.oldkids.cn/upload/9000/u7276/2012/04/09/blog_20120409115036922691.jpg');background-color:#ebb5ab; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:203px"><p style="padding-top:20px" align=center><img src="https://2img.net/h/img4.oldkids.cn/upload/260805000/u260802608/2015/08/12/blog_20150812154948768195.gif" width=400></p></section></section></div></div></center><br><br>
複製代碼


TOP

大标题


这里开始填写文字内容……。
此背景图片原宽为920px,做成800宽的三合一边框。



  1. <center><div style="width:800px;background-color:#65cc33"><section style="background-image:url('http://2img.net/h/img1.oldkids.cn/upload/9000/u7276/2012/04/11/blog_20120411091010973303.jpg');background-color:#65cc33; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:203px"><!--图片高度须按原图比例缩小--><p style="padding-top:100px" align=center><span style="FONT: bold 60px/110% Microsoft YaHei; COLOR: #ffff33; text-shadow: 3px 3px 3px #002200; letter-spacing:20px">大标题</span><!--标题位置须自行调整--></p></section><section style="margin-top:-20px; background-image:url('https://2img.net/h/img1.oldkids.cn/upload/9000/u7276/2012/04/11/blog_20120411091022463981.jpg');background-color:#65cc33; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px; height:203px"><!--文章长时须把203改为auto--><section style="margin-top:-20px; width:800px"><p style="padding-left:70px; padding-right:70px" align=left><span style="FONT: bold 30px/140% kaiti; COLOR: #002200"><br>
  2. 这里开始填写文字内容……。<br>
  3. 此背景图片原宽为920px,做成800宽的三合一边框。
  4. </span></p></section></section><section style="margin-top:-25px;"><p align=center><img src="https://2img.net/h/img4.oldkids.cn/upload/9000/u7276/2012/04/11/blog_20120411091039156205.jpg" style="width: 100%;"></p></section></section></div></center><br><br>
複製代碼


TOP

本帖最後由 rainbow 於 2021-4-28 23:03 編輯

大标题


文字开始……。




  1. <center>
  2. <div style="width:800px; background-color:#d7e7f7">
  3. <table border="0" cellspacing="0" cellpadding="0" width="800">
  4. <tbody>
  5. <tr>
  6. <td height="108" background="https://2img.net/h/s2.ax1x.com/2019/04/25/EeM7mq.png" valign=bottom>
  7. <p align=center><span style="FONT: bold 50px/140% Microsoft YaHei; COLOR: #005500; letter-spacing:10px">大标题</span>
  8. </p>
  9. </td>
  10. </tr>
  11. <tr>
  12. <td width="800" background="https://2img.net/h/s2.ax1x.com/2019/04/25/EeMH00.png">
  13. <br>
  14. <p style="padding-left:60px; padding-right:60px" align=left>
  15. <span style="FONT: bold 26px/140% kaiti; COLOR: #003300">文字开始……。</span></p><br>
  16. </td></tr>
  17. <tr>
  18. <td height="134" background="https://2img.net/h/s2.ax1x.com/2019/04/25/EeMoXn.png" valign=top>
  19. <p align="center"><img src="https://2img.net/h/img4.oldkids.cn/upload/260778000/u260776675/2011/08/05/blog_201108050651385.gif" height=70></p>
  20. </td></tr></tbody></table>
  21. </div></center>
  22. <br><br>
複製代碼


TOP

返回列表