哥哥's profile§☆还猪窝☆§素材库BlogLists Tools Help

Blog


    20/04/2005

    『网志背景图教程』

    资料来源:能量魔法
    修改整理:还猪哥哥

    网志背景图教程
    1. 到目前为止仅适用Microsoft Internet Explorer 。
    2. 使用半透明背景主题的Spaces,加上滤镜会与MSN Spaces的滤镜发生冲突,效果大减。

    要如何模拟成有背景图片呢?

    HTML语法:(红色为关键部份,不可去掉) 

    本文宽与本文高设定成 100% 就能延展扩大至整个网志内容....如本篇背景

    *1.只要设定背景图片地址和宽高(纯网志背景图而已)(background-color: TRANSPARENT;已省略)

    <div style="WIDTH: 100%;">
    <img height="图高" src="背景图片地址" width="图宽" align="right">
    <div style="float:left;WIDTH: 100%; ">
    內容
    </div>
    </div>
     

    *.最简单背景之设法(纯网志背景图而已)(连图宽都不用设)

    <img src="背景图片" align="right">
    <div style="float:left;WIDTH: 100%;">
    內容
    </div>
     

    *2.可自行设定本文宽、本文高(需使用绝对大小如px),也可自行加线框,会有丰富效果。

    HTML部分(background-color: TRANSPARENT;已省略)

    <div style="WIDTH: 本文宽; HEIGHT: 本文高;">
    <img height="图高" src="图片地址" width="图宽" align="right">
    <div style=" WIDTH: 本文宽; HEIGHT: 本文高;">
    內容
    </div>
    </div>
     

    *范例:

    代码:

    <div style="WIDTH: 180px; HEIGHT: 120px;">
    <img src="http://upload.mop.com/user/2005/03/19/8ff81d69.bmp" align="right">
    <div style="float:left; background-color: TRANSPARENT;WIDTH: 180px; HEIGHT:120; ">
    <br>
    <font color="#AFEEEE">带有背景图的网络日志效果图
    </font>
    </div>
    </div>


    效果:


    带有背景图的网络日志效果图

     

    §☆还猪窝☆§素材库访客数
    给还猪哥哥留言

    Comments

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.
    哥哥 has turned off comments on this page.