10 October 2010

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

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

HTML代码：

    <div id="MainMenu">
        <div id="MainMenuTop">
        </div>
        <var>navigation[1|2|3]</var>
    </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

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

jimdo代码：诸葛草帽电脑工作室（一）模板主代码

jimdo代码：诸葛草帽电脑工作室（五）模板全部代码

简单实现返回页面顶部-返回页面顶部代码（top）

巧用谷歌阅读器（google reader）实现网站自动调用“最近更新”模块

解读Div+css布局与table网站布局区别以及对SEO影响

jimdo代码-Jimdo 网站二分栏布局等高的方法(二)

jimdo代码：jimdo博客标题栏及其时间部分（datetime）修饰和美化（二）

jimdo模板-可用于jimdo站的网站标签云插件代码

通过js调用方式布置阿里妈妈广告和3d标签云等，减小页面代码体积、加快网页加载速度

jimdo技巧-jimdo留言、博文评论输入框在IE6下的小“bug”修复

Tags: 美化相关, 网页浏览, 网站代码, jimdo, 分页18

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家园：弄好了就好，不用客气