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

Rank: 1
1# 跳轉到 » 正序看帖
打印
tT
rainbow發表於 2021-4-28 16:34 | 只看該作者

三合一信纸

本帖最後由 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


收藏 分享

Rank: 1
54#
rainbow發表於 2022-10-21 08:30 | 只看該作者
本帖最後由 rainbow 於 2022-10-21 08:45 編輯
背景图片原宽960，用 table 改为800宽，无法完整显示（左侧风筝被截掉了）。
 

 

 



  




改用section，缩小到800，仍可完整显示顶图。

大标题

作者


文字开始……。



  1. <center><div style="width:800px;background-color:#ddeedd"><section style="background-image:url('https://2img.net/h/img0.oldkids.cn/upload/12000/u11139/2011/03/29/blog_201103290951068.jpg');background-color:#ddeedd; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:141px"><p style="padding-top:40px" align=center><span style="FONT: bold 60px/140% Microsoft YaHei; COLOR: #62AF60; text-shadow: 3px 3px 3px #003300; letter-spacing:20px">大标题</span></p></section><section style="margin-top:0px; background-color:#ddeedd; width:800px;"><section style="width:800px"></section>
  2. <p align=center><span style="FONT: normal 30px/140% Microsoft YaHei; COLOR: #006600; letter-spacing:5px">作者</span></p><br>
  3. </section><section style="margin-top:0px; background-color:#ddeedd; width:800px;"><section style="width:800px">
  4. <p style="padding-left:30px; padding-right:30px" align=left>
  5. <span style="FONT: bold 30px/140% kaiti; COLOR: #005500">文字开始……。<br><br></span></p></section></section>
  7. <section style="background-image:url('https://2img.net/h/2img.net/h/img0.oldkids.cn/upload/12000/u11139/2011/03/29/blog_201103290951035.jpg');background-color:#ddeedd; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:183px; padding-bottom:-50px" align=right><section style="margin-bottom:0px"><img height="180" src="https://2img.net/h/img0.oldkids.cn/upload/12000/u11139/2011/03/29/blog_201103290951056.gif"  /></section></section>
  8. </div></center><br><br>
複製代碼


http://www.oldkids.cn/upload/12000/u11139/2011/03/29/blog_201103290951068.jpg http://www.oldkids.cn/upload/12000/u11139/2011/03/29/blog_201103290951035.jpg http://www.oldkids.cn/upload/12000/u11139/2011/03/29/blog_201103290951056.gif http://www.oldkids.cn/blog/blog_con.php?blogid=940149

TOP

Rank: 1
53#
rainbow發表於 2022-3-22 21:34 | 只看該作者

大标题

文字开始……。

TOP

Rank: 1
52#
rainbow發表於 2022-3-22 13:39 | 只看該作者

大标题

文字开始……。

TOP

Rank: 1
51#
rainbow發表於 2021-5-3 16:12 | 只看該作者

大标题

背景图原宽850px，框内插图最大宽度不得大于680px。



  1. <center><div style="width:800px;background-color:#315150"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_83.jpg');background-color:#315150; background-repeat:no-repeat;background-position: center top; background-size:contain; width:800px;height:109px"></section>
  2. <section style="margin-top:0px; background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_84.jpg');background-color:#315150; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:auto">
  3. <section style="margin-top:0px">
  4. <p style="padding-top:0px" align=center><span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #DCEAEA; text-shadow: 3px 3px 3px #800000; letter-spacing:10px">大标题</span></p>
  5. <p style="margin-top:20px; padding-left:60px; padding-right:60px" align=left><span style="FONT: bold 26px/140% kaiti; COLOR: #DCEAEA">背景图原宽850px，框内插图最大宽度不得大于680px。
  6. <br><br></span></p>
  7. <p style="padding-bottom:0px" align=center><img src="http://2img.net/h/i494.photobucket.com/albums/rr306/LIDIJA04/DIVIDERS/toow-11.gif" width=300></p>
  8. </section></section>
  9. <section style="margin-top:0px;"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_85.jpg');background-color:#315150; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:30px">
  10. </section></section></div></center>
  11. <br><br>
複製代碼

TOP

Rank: 1
50#
rainbow發表於 2021-5-3 15:24 | 只看該作者

大标题

背景图原宽850px，框内插图最大宽度不得大于680px。






  1. <center><div style="width:800px;background-color:#496278"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_80.jpg');background-color:#496278; background-repeat:no-repeat;background-position: center top; background-size:contain; width:800px;height:144px"><p style="padding-top:60px" align=center><span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #c7cbe8; text-shadow: 3px 3px 3px #000000; letter-spacing:10px">大标题</span></p></section>
  2. <section style="margin-top:-20px; background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_81.jpg');background-color:#496278; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:auto"><section style="margin-top:0px">
  3. <p style="margin-top:20px; padding-left:60px; padding-right:60px" align=left><span style="FONT: bold 26px/140% kaiti; COLOR: #c7cbe8">背景图原宽850px，框内插图最大宽度不得大于680px。
  4. <br><br><br><br><br>
  5. </span></p>
  6. </section></section><section style="margin-top:0px;"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_82.jpg');background-color:#496278; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:164px"><p style="padding-top:50px" align=center><img src="https://2img.net/h/img4.oldkids.cn/upload/2017/08/21/blog_20170821172428252.gif" width=300></p>
  7. </section></section></div></center>
  8. <br><br>
複製代碼

TOP

Rank: 1
49#
rainbow發表於 2021-5-3 12:52 | 只看該作者
本帖最後由 rainbow 於 2021-5-3 13:06 編輯

大标题

背景图原宽850px，框内插图最大宽度不得大于680px。







  1. <center><div style="width:800px;background-color:#4a2163"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_62.gif');background-color:#4a2163; background-repeat:no-repeat;background-position: center top; background-size:contain; width:800px;height:63px">
  2. </section>
  3. <section style="margin-top:0px; background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_63.gif');background-color:#4a2163; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:auto"><section style="margin-top:0px">
  4. <p style="padding-top:0px" align=center><span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #b173d6; text-shadow: 3px 3px 3px #0000ff; letter-spacing:10px">大标题</span></p>
  5. <p style="margin-top:20px; padding-left:60px; padding-right:60px" align=left><span style="FONT: bold 26px/140% kaiti; COLOR: #ffffc6">背景图原宽850px，框内插图最大宽度不得大于680px。
  6. <br><br><br><br>
  7. </span></p>
  8. <p style="padding-bottom:0px" align=center><img src="http://2img.net/h/img4.oldkids.cn/upload/260775000/u260773777/2011/10/10/blog_20111010104009373521.gif" width=300></p>
  9. </section></section><section style="margin-top:0px;"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_64.gif');background-color:#4a2163; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:61px">
  10. </section></section></div></center>
  11. <br><br>
複製代碼

TOP

Rank: 1
48#
rainbow發表於 2021-5-3 11:16 | 只看該作者

大标题

  背景图原宽850px，框内插图最大宽度不得大于620px。



  1. <center><div style="width:800px;background-color:#625b63"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_44.jpg');background-color:#625b63; background-repeat:no-repeat;background-position: center top; background-size:contain; width:800px;height:188px"><p style="padding-top:90px" align=center><span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #f4f2f7; text-shadow: 3px 3px 3px #0000ff; letter-spacing:10px">大标题</span></p></section>
  2. <section style="margin-top:0px; background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_45.jpg');background-color:#625b63; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:auto"><section style="margin-top:0px">
  3. <p style="margin-top:0px; padding-left:90px; padding-right:90px" align=left><span style="FONT: bold 26px/140% kaiti; COLOR: #f4f2f7">&emsp;&emsp;背景图原宽850px，框内插图最大宽度不得大于620px。<br><br>
  4. </span></p>
  5. </section></section><section style="margin-top:-20px;"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_46.jpg');background-color:#625b63; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:201px">
  6. <p style="padding-top:20px" align=center><img src="https://1.bp.blogspot.com/-76DXXFIrzlI/URrk6ZbldZI/AAAAAAAAFbA/ZvdoYU0pJv8/s1600/748.l.gif" height=90></p>
  7. </section></section></div></center>
  8. <br><br>
複製代碼

TOP

Rank: 1
47#
rainbow發表於 2021-5-3 10:08 | 只看該作者

大标题

背景图原宽850px，框内插图最大宽度不得大于710px。



  1. <center><div style="width:800px;background-color:#f6eaee"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_28.jpg');background-color:#f6eaee; background-repeat:no-repeat;background-position: center top; background-size:contain; width:800px;height:137px"></section><section style="margin-top:0px; background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_29.jpg');background-color:#f6eaee; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:auto"><section style="margin-top:-10px"><p style="padding-top:0px" align=center><span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #eec2d3; text-shadow: 3px 3px 3px #ff0080; letter-spacing:10px">大标题</span></p><p style="margin-top:20px; padding-left:45px; padding-right:45px" align=left><span style="FONT: bold 26px/140% kaiti; COLOR: #cc0033">背景图原宽850px，框内插图最大宽度不得大于710px。<br><br>
  2. </span></p>
  3. <p style="margin-bottom:-50px" align=center><img src="http://2img.net/h/img1.oldkids.cn/upload/2017/07/02/blog_20170702151720394.gif" height=80></p>
  4. </section></section><section style="margin-top:-20px;"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_30.jpg');background-color:#f6eaee; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:95px">
  5. </section></section></div></center>
  6. <br><br>
複製代碼

TOP

Rank: 1
46#
rainbow發表於 2021-5-3 09:47 | 只看該作者

大标题

背景图原宽850px，框内插图最大宽度不得大于680px。

TOP

Rank: 1
45#
rainbow發表於 2021-5-3 08:58 | 只看該作者
本帖最後由 rainbow 於 2021-5-3 08:59 編輯

大标题

背景图原宽850px，框内插图最大宽度不得大于700px。



  1. <center><div style="width:800px;background-color:#d3b4b2"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_22.jpg');background-color:#d3b4b2; background-repeat:no-repeat;background-position: center top; background-size:contain; width:800px;height:192px"></section><section style="margin-top:0px; background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_23.jpg');background-color:#d3b4b2; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:auto"><section style="margin-top:-10px"><p style="padding-top:0px" align=center><span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #c54e61; text-shadow: 3px 3px 3px #800000; letter-spacing:10px">大标题</span></p><p style="margin-top:20px; padding-left:50px; padding-right:50px" align=left><span style="FONT: bold 26px/140% kaiti; COLOR: #800000">背景图原宽850px，框内插图最大宽度不得大于700px。<br><br>
  2. </span></p>
  3. </section></section><section style="margin-top:0px;"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_24.jpg');background-color:#d3b4b2; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:132px"><p style="margin-top:0px" align=center><img src="http://dl10.glitter-graphics.net/pub/85/85690d2dk5mgsrv.gif" height=70></p>
  4. </section></section></div></center>
  5. <br><br>
複製代碼

TOP

Rank: 1
44#
rainbow發表於 2021-5-3 08:27 | 只看該作者
本帖最後由 rainbow 於 2021-5-3 08:39 編輯

大标题

背景图原宽800px，框内插图最大宽度不得大于740px。



  1. <center><div style="width:800px;background-color:#ede7d1"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_4.jpg');background-color:#ede7d1; background-repeat:no-repeat;background-position: center top; background-size:contain; width:800px;height:65px"></section><section style="margin-top:0px; background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_5.jpg');background-color:#ede7d1; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:auto"><section style="margin-top:-10px"><p style="padding-top:0px" align=center><span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #d0c49a; text-shadow: 3px 3px 3px #800000; letter-spacing:10px">大标题</span></p><p style="margin-top:20px; padding-left:30px; padding-right:30px" align=left><span style="FONT: bold 26px/140% kaiti; COLOR: #800000">背景图原宽800px，框内插图最大宽度不得大于740px。<br><br>
  2. </span></p>
  3. <p align=center><img src="http://dl10.glitter-graphics.net/pub/85/85690d2dk5mgsrv.gif" width-300></p>
  4. </section></section><section style="margin-top:-30px;"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_6.jpg');background-color:#ede7d1; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:63px"></section></section></div></center>
  5. <br><br>
複製代碼

TOP

Rank: 1
43#
rainbow發表於 2021-5-2 23:11 | 只看該作者
本帖最後由 rainbow 於 2021-5-2 23:22 編輯

大标题

背景图原宽800px，框内插图最大宽度不得大于540px。



  1. <center><div style="width:800px;background-color:#b1d2cb"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_1.jpg');background-color:#b1d2cb; background-repeat:no-repeat;background-position: center top; background-size:contain; width:800px;height:250px"></section><section style="margin-top:0px; background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_2.jpg');background-color:#b1d2cb; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:auto"><section style="margin-top:-20px"><p style="padding-top:0px" align=center><span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #379f9e; text-shadow: 3px 3px 3px #123535; letter-spacing:10px">大标题</span></p><p style="margin-top:20px; padding-left:130px; padding-right:130px" align=left><span style="FONT: bold 26px/140% kaiti; COLOR: #123535">背景图原宽800px，框内插图最大宽度不得大于540px。
  2. </span></p>
  3. <p align=center><img src="http://dl.glitter-graphics.net/pub/2130/2130961pppwv8xc8x.gif"></p>
  4. </section></section><section style="margin-top:-40px;"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2922/22744442_3.jpg');background-color:#b1d2cb; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:182px"></section></section></div></center>
  5. <br><br>
複製代碼

TOP

Rank: 1
42#
rainbow發表於 2021-5-2 22:13 | 只看該作者
本帖最後由 rainbow 於 2021-5-2 22:43 編輯

大标题

背景图原宽710px，改成800宽边框。



  1. <center><div style="width:800px;background-color:#d1d8e0"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2915/22733048_72.jpg');background-color:#d1d8e0; background-repeat:no-repeat;background-position: center top; background-size:contain; width:800px;height:176px"></section><section style="margin-top:0px; background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2915/22733048_73.jpg');background-color:#d1d8e0; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:auto"><section style="margin-top:-10px"><p style="padding-top:0px" align=center><span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #f9f9fb; text-shadow: 3px 3px 3px #353535; letter-spacing:10px">大标题</span></p><p style="margin-top:20px; padding-left:60px; padding-right:60px" align=left><span style="FONT: bold 26px/140% kaiti; COLOR: #353535">背景图原宽710px，改成800宽边框。<br><br>
  2. </span></p>
  3. <p align=center><img src="https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2915/22733048_75.jpg" width=350></p>
  4. </section></section><section style="margin-top:-10px;"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2915/22733048_74.jpg');background-color:#ebebeb; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:118px"></section></section></div></center>
  5. <br><br>
複製代碼

TOP

Rank: 1
41#
rainbow發表於 2021-5-2 21:12 | 只看該作者

大标题

背景图原宽710px，改成800宽边框。



  1. <center><div style="width:800px;background-color:#ebebeb"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2915/22733048_69.jpg');background-color:#ebebeb; background-repeat:no-repeat;background-position: center top; background-size:contain; width:800px;height:154px"></section><section style="margin-top:0px; background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2915/22733048_70.jpg');background-color:#ebebeb; background-repeat:repeat-y;background-position: center top; background-size:contain; width:800px;height:auto"><section style="margin-top:-10px"><p style="padding-top:0px" align=center><span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #6c727e; text-shadow: 3px 3px 3px #353535; letter-spacing:10px">大标题</span></p><p style="margin-top:20px; padding-left:40px; padding-right:40px" align=left><span style="FONT: bold 26px/140% kaiti; COLOR: #353535">背景图原宽710px，改成800宽边框。<br><br>
  2. </span></p>
  3. </section></section><section style="margin-top:-10px;"><section style="background-image:url('https://2img.net/h/image50.360doc.com/DownloadImg/2012/03/2915/22733048_71.jpg');background-color:#ebebeb; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px;height:185px"></section></section></div></center>
  4. <br><br>
複製代碼

TOP

1234
返回列表