一款二分栏、灰黑色调、DIV+CSS布局的jimdo模板-诸葛草帽

        昨天淘宝600家园在《经典-绝对犀利的电脑维修方式【实用】》中留言问我有没有二分栏的模板,想拿去研究一下,我想了下我的jimdo模板还真是少的可怜啊,呵呵,最后想起来我还有个测试站:http://com-cn.jimdo.com,是仿照极客集做的,印象中原作是老鬼制作的WordPress模板,感觉还不错(图1点击查看大图),既然有朋友喜欢,现在就拿出来分享下吧。

一款二分栏、灰黑色调、DIV+CSS布局的jimdo模板-诸葛草帽

HTML代码:

<div id="Container">
    <div id="ContainerTop">
    </div>

    <div id="Header">
        <div id="HeaderTop">
        </div>

        <div id="HeadLeft">
            <h1>
                <a href="http://zhugecaomao.jimdo.com/"></a>
            </h1>

            <div id="MenuTop">
                <div id="navigation">
                </div>
            </div>
        </div>

        <div id="HeadRight">
            <div id="HeadRightTop">
                <div id="topnavbox">
                    <ul>
                        <li>
                            <a href="http://zhugecaomao.jimdo.com/"><img src="http://www.geekg.com/usr/themes/laogui/images/menu1.gif" alt="" /><br />
                            网站首页</a>
                        </li>

                        <li>
                            <a href="http://zhugecaomao.jimdo.com"><img src="http://www.geekg.com/usr/themes/laogui/images/menu3.gif" alt="" /><br />
                            最新更新</a>
                        </li>

                        <li>
                            <a href="http://zhugecaomao.jimdo.com/"><img src="http://www.geekg.com/usr/themes/laogui/images/menu4.gif" alt="" /><br />
                            极客论坛</a>
                        </li>

                        <li>
                            <a href="http://zhugecaomao.jimdo.com"><img src="http://www.geekg.com/usr/themes/laogui/images/menu2.gif" alt="" /><br />
                            邮箱订阅</a>
                        </li>

                        <li>
                            <a href="http://zhugecaomao.jimdo.com/"><img src="http://www.geekg.com/usr/themes/laogui/images/menu5.gif" alt="" /><br />
                            联系我们</a>
                        </li>

                        <li>
                            <a href="http://zhugecaomao.jimdo.com/"><img src="http://www.geekg.com/usr/themes/laogui/images/menu6.gif" alt="" /><br />
                            内容订阅</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="Submissions">
            </div>
        </div>
    </div>

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

    <div id="MainBody">
        <div id="MainBodyTop">
        </div>

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

        <div id="SideBar">
            <var>sidebar</var>
        </div>
    </div>

    <div id="Footer">
        <var>footer</var>
    </div>
</div>

CSS代码:

                            body {
background:#515459;
color:#000;
font:12px "Arial", "Helvetica", "Verdana", sans-serif;
margin:10px 0;
}

#Container {
width:940px;
background:#777c7f url("http://www.geekg.com/usr/themes/laogui/images/BGCBottom.gif") no-repeat 0 100%;
margin:0 auto;
padding:40px 10px 10px;
}

#ContainerTop {
width:960px;
background:url("http://www.geekg.com/usr/themes/laogui/images/BGCTop.gif") no-repeat;
height:5px;
top:0;
left:0;
position:absolute;
}

#Header {
width:910px;
clear:left;
background:#1b212b url("http://www.geekg.com/usr/themes/laogui/images/HeaderBottom.gif") no-repeat 0 100%;
position:relative;
height:78px;
margin:0 0 10px;
padding:10px 10px 10px 20px;
}

#HeaderTop {
width:940px;
background:#1b212b url("http://www.geekg.com/usr/themes/laogui/images/HeaderTop.gif") no-repeat;
height:5px;
top:0;
left:0;
position:absolute;
}

#Header #MenuTop {
position:absolute;
top:-27px;
right:0;
}

#Header #MenuTop ul {
list-style-type:none;
margin:0;
padding:0;
}

#Header #MenuTop li {
border-left:1px solid #b8bec1;
display:inline;
color:#eee;
margin:0;
padding:0 6px;
}

#Header #MenuTop li a:visited {
color:#eee;
}

#Header #MenuTop li a:hover {
color:#ccc;
}

#Header #navigation {
color:#fff;
position:absolute;
top:-27px;
left:5px;
}

#HeadLeft {
float:left;
}

#HeadLeft h1 {
font-size:0;
text-indent:-20000px;
margin:0;
padding:0;
}

#HeadLeft h1 a {
width:162px;
display:block;
background-attachment:scroll;
background-repeat:no-repeat;
background-image:url("http://u.jimdo.com/www22/o/s20314ed1b7ba0806/userlayout/img/logo.png?t=1278672400");
background-position:0 0;
background-color:transparent;
height:78px;
}

a:focus {
outline-width:medium;
outline-style:none;
}

a:hover {
border:0;
color:#cc3000;
}

#HeadRight {
width:718px;
float:right;
background-attachment:scroll;
background-repeat:no-repeat;
background-image:url("http://www.geekg.com/usr/themes/laogui/images/HRBottom.gif");
background-position:0 100%;
background-color:#3c414a;
height:68px;
position:relative;
padding:5px;
}

#HeadRightTop {
width:728px;
background:url("http://www.geekg.com/usr/themes/laogui/images/HRTop.gif") no-repeat;
height:4px;
top:0;
left:0;
position:absolute;
}

#HeadRight #topnavbox {
width:384px;
float:left;
height:68px;
overflow-x:hidden;
overflow-y:hidden;
padding:0 2px;
}

#HeadRight #topnavbox ul {
margin:0 auto;
padding:0;
}

#HeadRight #topnavbox ul li {
float:left;
width:64px;
list-style:none;
text-align:center;
position:relative;
height:48px;
line-height:0;
margin:0;
padding:10px 0;
}

#HeadRight #topnavbox ul li img {
margin-bottom:12px;
}

#HeadRight #topnavbox ul li a {
display:block;
text-decoration:none;
margin:0;
padding:0 5px;
}

#HeadRight #topnavbox ul li a:link,#HeadRight #topnavbox ul li a:visited {
color:#d4d4d4;
}

#HeadRight #Submissions {
width:323px;
float:right;
background:url("http://www.geekg.com/usr/themes/laogui/images/Submissions.gif") no-repeat;
right:0;
height:68px;
padding:0;
}

#HeadRight #Submissions p {
display:block;
color:#d6d6d6;
font-size:12px;
line-height:16px;
margin:0;
padding:27px 25px 0 15px;
}

#Banner {
width:940px;
clear:left;
background:#fff url("http://www.geekg.com/usr/themes/laogui/images/banner.jpg") no-repeat 0 100%;
height:100px;
position:relative;
margin:0 auto 10px;
}

#HeadUn {
width:940px;
clear:left;
background:#fff url("http://www.geekg.com/usr/themes/laogui/images/HeadUnBottom.gif") no-repeat 0 100%;
height:105px;
position:relative;
margin:0 auto 10px;
}

#MainMenu {
width:924px;
float:left;
background:#1b212b url("http://www.geekg.com/usr/themes/laogui/images/HeaderBottom.gif") no-repeat 0 100%;
position:relative;
margin:0 0 10px;
padding:5px 8px;
}

#MainMenuTop {
width:940px;
background:url("http://www.geekg.com/usr/themes/laogui/images/HeaderTop.gif") no-repeat;
height:5px;
top:0;
left:0;
position:absolute;
}

#MainMenu ul {
float:left;
list-style:none;
margin:0;
padding:0;
}

#MainMenu ul li {
float:left;
background:url("http://www.geekg.com/usr/themes/laogui/images/nav_border.gif") no-repeat 100% 50%;
margin:0;
padding:0;
}

#MainMenu li.noborder {
background:transparent;
}

#MainMenu ul li a {
float:left;
display:block;
color:#7b828c;
font-size:12px;
line-height:11px;
text-decoration:none;
margin:0;
padding:8px 14px 5px 13px;
}

#MainMenu ul li a.first {
padding-left:7px;
}

#MainMenu ul li a strong {
padding-bottom:4px;
display:block;
color:#ddd;
font-weight:700;
font-size:13px;
text-transform:uppercase;
}

#MainBody {
width:910px;
float:left;
background-position:0 0;
background-color:#fff;
position:relative;
padding:15px 15px 0;
}

#content {
width:580px;
float:left;
clear:left;
background-attachment:scroll;
background-image:url("http://www.geekg.com/usr/themes/laogui/images/vertdottedbg.gif") epeat-y 100% 0;
background-color:transparent;
overflow:hidden;
padding:0 15px 15px 0;
}

#SideBar {
width:300px;
float:right;
}

#Footer {
width:940px;
clear:left;
background-attachment:scroll;
background-repeat:no-repeat;
background-image:url("http://www.geekg.com/usr/themes/laogui/images/Footer.png");
background-position:0 0;
background-color:transparent;
color:#fff;
position:relative;
padding:15px 0 0;
}

#Header #MenuTop li a:link,#MainMenu li a:hover {
color:#fff;
}

#HeadRight #topnavbox ul li a:hover,#HeadRight #topnavbox ul li a:active,#MainMenu ul li a:hover strong {
color:#f2871c;
}

#HeadUnTop,#MainBodyTop {
width:940px;
background:url("http://www.geekg.com/usr/themes/laogui/images/HeadUnTop.gif") no-repeat;
height:5px;
top:0;
left:0;
position:absolute;
}                       

        代码很长是吧?诸葛草帽在这里有几点说明:

  • 这个模板做出来之后就一直那么放着了,没有经过修饰和精简,所以里面有很多没有用的代码,本来想先弄好了再放出来,但是最近比较忙,加之诸葛草帽比较懒,所以先放出来再说吧!
  • 原作者是“laogui”不是我诸葛草帽,代码中有些图片直接引用极客集(geekg)的了,最好把那些图片下载下载传到你自己的jimdo网站上面去之后引用。
  • 原来的模板是WordPress的,我还比较菜,所以弄到jimdo网站来的代码感觉比较粗糙,如果有什么好的建议或者修改精简了这些代码请留言告知,分享出来,不胜感激!
  • 这个模板中我并没有把jimdo广告盒(jimdobox)自定义,貌似官方把jimdo广告盒变了一点样子,还是暂时先不动了吧。
  • 演示请移步:http://com-cn.jimdo.com

Write a comment

Comments: 14
  • #1

    网型网秀 (Monday, 11 October 2010 12:01)

    这种好东西早就该拿出来了!

  • #2

    诸葛草帽 (Monday, 11 October 2010 12:05)

    回复网型网秀:呵呵,做完就放着了,都忘记这事了,再有好一点的东西会早拿出来的^_^

  • #3

    淘宝600家园 (Tuesday, 12 October 2010 16:56)

    我的网站已改版了,有空过来看看有什么不足的~~~~~~~

  • #4

    诸葛草帽 (Tuesday, 12 October 2010 17:56)

    回复淘宝600家园:我去看了,模板应用的很好,我用了几个浏览器进行测试了,没有发现什么问题,加油!

  • #5

    网上邻居 (Thursday, 14 October 2010 22:27)

    这个模板还是不错的,我也用过。

  • #6

    淘宝600家园 (Friday, 15 October 2010 00:04)

    这两天我将代码中的图片外链全部转为内链,只是上传图片和每个准确无误更换很花时间,有些图片有些很小的,不登大眼睛是看不到哦。感觉系统模板的图片用外链不太好,万一某日极客换模板,外链失效网站就很难看了,还是更力更生好点~~~~~

  • #7

    诸葛草帽 (Friday, 15 October 2010)

    回复网上邻居:呵呵,我记得,这个的确不错!

  • #8

    诸葛草帽 (Friday, 15 October 2010 07:52)

    回复淘宝600家园:嗯,我在文中说到图片外链的问题,就是怕出现你说的问题,还是引用自己的放心!

  • #9

    独星 (Saturday, 16 October 2010 11:34)

    这个版很眼熟

  • #10

    诸葛草帽 (Saturday, 16 October 2010 13:52)

    回复独星:呵呵,网上邻居以前用过的

  • #11

    淘宝600家园 (Monday, 18 October 2010 22:40)

    诸葛兄:请教一下,我网站顶部的:网站首页、简洁版本等几个图标和文字不能正常居中,是在CSS调用的但更改float的属性也不行,有什么方法可以像极客网那样居中?

  • #12

    诸葛草帽 (Monday, 18 October 2010 23:06)

    回复淘宝600家园:这个细节我倒是没有太注意到,要想居中也不难,在css中找到#HeadRight #topnavbox ul li img {
    margin-bottom:12px;
    }
    这句,改成
    #HeadRight #topnavbox ul li img {
    margin-bottom:12px;
    padding-left:12px;
    }
    即可实现你想要的效果

  • #13

    淘宝600家园 (Monday, 18 October 2010 23:12)

    呵呵,搞掂了,我测试了很久,谢了~~~~

  • #14

    诸葛草帽 (Tuesday, 19 October 2010 07:40)

    回复淘宝600家园:弄好了就好,不用客气