一个简洁的宽度是960的jimdo模板

自从电脑显示器淘汰15英寸以后，960就成了非常经典的网站版面宽度，虽然19英寸还有其它宽屏显示器在不断增加，960模板还是一个经典，而且还会存在相当长的一段时间。

我用这个模板做出的网站是：http://zgcm.jimdo.com，做淘宝的网站。

这个模板版面宽度是960px，很适合做淘客网站，当然也可以用于个人网站或公司网站。
其实，做一个JIMDO模板，比做任何别的网站模板都来的简单，而且要简单的多。因为它是构筑在JIMDO平台上，只写简单的一点HTML和CSS代码就行了。当然，我这里是说一些简单的模板，如果要是做的很漂亮，就当别论了。

这个模板比较简洁，甚至有些简单，不过作为入门模板，做淘客网站，还是很实用的，感兴趣的朋友，可以在此基础上进行修改。

先跟初学自定义模板的朋友介绍一下操作过程：登录你的网站，点右上角控制面板里的“版面”，然后再点击“自己的版面设计”，OK，将本文介绍的“HTML”和“CSS”代码复制到“HTML”和“CSS”下面（要将原来的系统代码删除掉），然后点击保存。

HTML部分：

<table border="0" cellspacing="0" cellpadding="0" width="955">
        <tbody>
            <tr>
                <td width="955" height="30" bgcolor="#F0F0F0" align="center">
                    <span style="color: #ff0000;">本站以 <a href="http://www.taobao.com " target="_blank">淘宝网</a> 作后台，是一个引导您在淘宝网休闲、娱乐、购物的导航网站。</span> 　　　　　　　　　　　　　　　　　　　　　　　　　　　<a href="#" onclick=
                    "window.external.AddFavorite('http://lyg.jimdo.com', '连云港淘宝购物导航网'); return false;">收藏本站</a> | <a href="#" onclick=
                    "this.style.behavior='url(#default#homepage)';this.setHomePage('http://lyg.jimdo.com/'); return false;">设为首页</a>

                   </td>
            </tr>

    <div id="navigation">
        <var>navigation[1|2|3]</var>
    </div>

    <div id="content">
        <var>content</var>
    </div>

<table width="960" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
            <td width="180" height="355" align="right">
                <div id="sidebar">
                    <var>sidebar</var>
                </div>
            </td>
            <td width="750" height="355" valign="top">

    <table width="960" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="200" align="center" bgcolor="#FFFFFF">
                在这里加入你的网站统计代码
            </td>
        </tr>
    </table>

    <div id="footer">
        <div class="gutter">
            <var>footer</var>
        </div>
    </div>
</div>

说明：

以上代码基本上是 http://lyg.jimdo.com 的原代码。
一、红色部分的代码设定的是网站最顶端的一行，文字部分可以根据你的需要更改，“收藏本站”和“设为主页”，你只要把（）里的内容改为你的就可以了。

二、绿色部分是定义头部图片的，你要做一个955px的图片，高度自定，然后命名为header.gif，当然，也可以根据你图片的名字，更改代码，然后从“文件”里上传。

三、蓝色部分是设定广告盒右边四个图片的，你可以根据你的需要，改为别的图片，也可以更改为具有图片、文字链接的代码，完全由你自己决定了。

四、灰色部份是设置网站统计代码的。

CSS部分：

                            body
{
       text-align:left;
       background: #fff;
}

#container
{
       margin:0px auto;
       width:960px;
       background:#fff;
}

#header
{
margin:0px auto;
}

#content
{
       width:960px;
       float:left;
       margin: 0px auto;
       background:#fff;
}

#navigation
{
       margin:0px auto;
       width:960px;
       float:left;
       background: url(http://jdm.jimdo.com/s/cc_images/cache_1349038004.png) #900;

}
#sidebar
{
       width:180px;
       float:left;
       margin:0px;
}

#footer .gutter
{
       background:#fff;
       padding:20px;
       margin: 0px auto;
}

/* Navigation
----------------------------------------------- */

ul#mainNav1
{
margin: 0px auto;
}

ul#mainNav1 li
{
        float:left;
        margin:0px auto;
        list-style:none;
}

ul#mainNav1 li a
{
        font:bold 13px/180% 宋体;
        text-decoration: none;
        display:block;
        border-right:2px solid #fff;
        color:#fff;
}

ul#mainNav1 li a { padding:5px 20px 5px 20px; }

ul#mainNav1 a:hover{color:#0f0;}

ul#mainNav1 a.current { font-weight:bold; color:#0f0;}

说明：

      这部分代码，除了去掉了背景设置，完全是 http://lyg.jimdo.com 的原代码。你可以发现，它的居中效果特别好。我那个网站，底部图片尺寸没有设计好，有点不正，我也懒得去修改它了。
    感兴趣的朋友，可以拿去试试，以前曾用过我代码的朋友，特别是对居中不满意的朋友，不妨试试这个。
    提点忠告：你更改代码前，最好把你原来的代码复制到记事本里保存起来，如果对这个不满意，你再复制回来。
    另外，以前问过顶部加东西和底部加东西的朋友，这里都给出了代码，算是对以前问过这个事情的朋友的一次总回复吧。有什么疑问的，欢迎留言，我会尽可能回复的。

补充-关于头部图片

不少朋友在反映用这个模板后头部的图片不显示，可能是初用Jimdo，或者对网页制作不是很熟悉，这里补充说明一下，算是总回复吧。

因为这是模板代码，我不可能提供大家都需要的头部图片，所以，头部图片是每个人根据自己的需要，自己制作自己上传的。

在HTML中，关于头部图片的代码是：

就是说，每个人要根据自己的需要，制作或找一个955px宽度的图片（高度自定），它的格式是gif，文件名为header，然后在“自己的版面设计”下的“文件”下面上传你的图片。如果你的图片格式不是gif，比如比较常见的是jpg，那么，你可以把上面代码中的图片名称改为header.jpg也行。一句话，你上传的图片名称和代码里一致就行。

文章转自网上邻居