jimdo代码:诸葛草帽电脑工作室(三)HEAD部分的修饰

head部分可以很清楚看到包含两部分,左边是一个gif的动态图片,右侧是一个天气预报,那就依次添加吧。

图片没的说,制作之后上传到“版面——自己的版面设计——文件——上传”,删除原来的header.jpg或者header.gif,将图片命名为header.gif之后上传保存预览,一定要保存,我就是好几次忘记保存退出,之后又重新做的。至于制作gif的工具我将在下篇文章中介绍我使用的、感觉不错的软件(当然会是破解版)。

右侧的天气代码就好弄了,代码如下:

<iframe src="http://weather.265.com/weather.htm" width="160" height="60" frameborder="no" marginwidth="0" marginheight="0" scrolling="no"></iframe>

最后还有一个问题就是规定它们的位置了,怎么样实现横向排列呢?我以前写过《jimdo网站上多个元素如何横向排列》,现在要用它了。

 

整体代码如下:

html相关部分:

    <table width="955" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
            <td align="left">
                <div id="header">
                    <a href="http://zhugecaomao.jimdo.com/" title="欢迎光临诸葛草帽电脑工作室!"><img src="header.gif" alt="欢迎光临诸葛草帽电脑工作室!" /></a>
                </div>
            </td>
            <td align="right">
                <iframe src="http://weather.265.com/weather.htm" width="160" height="60" frameborder="no" marginwidth="0" marginheight="0" scrolling="no"></iframe>
            </td>
        </tr>
    </table>

 

css相关部分:


#header
{
       margin:0px auto;
}

绿色部分就是引用图片的部分,名称要和你上传图片名称完全一样,包括后缀名。alt 后面的“欢迎光临诸葛草帽电脑工作室!”是当鼠标移动到这个图片时显示的说明文字。前面<a href><a>部分是让你的这个图片可以点击的,链接网址自己修改。蓝色部分是规定它们位置的(居左、居右)。紫色部分是规定整体的长度、背景色之类的。这部分也算是完事了。

Write a comment

Comments: 0