免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
1234
返回列表 發帖

Rank: 1
10# 跳轉到 »
rainbow發表於 2021-4-28 18:55 | 只看該作者
本帖最後由 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">文字开始……。
  3. </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

Rank: 1
9#
rainbow發表於 2021-4-28 18:53 | 只看該作者

大标题
　　　　　　　　　

文字开始……。



  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

Rank: 1
8#
rainbow發表於 2021-4-28 18:48 | 只看該作者
本帖最後由 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

Rank: 1
7#
rainbow發表於 2021-4-28 18:46 | 只看該作者

大标题


  此背景图原宽只有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

Rank: 1
6#
rainbow發表於 2021-4-28 18:45 | 只看該作者
本帖最後由 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

Rank: 1
5#
rainbow發表於 2021-4-28 18:36 | 只看該作者
本帖最後由 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

Rank: 1
4#
rainbow發表於 2021-4-28 17:24 | 只看該作者
本帖最後由 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

Rank: 1
3#
rainbow發表於 2021-4-28 17:23 | 只看該作者
本帖最後由 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

Rank: 1
2#
rainbow發表於 2021-4-28 16:55 | 只看該作者
 
大 标 题

文字开始……。
 


  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

1234
返回列表