日
08
8月
2010
960三分栏模板代码
JIMDO建站巨有强大的功能,自定义模块更可让你发挥无穷创意,只要你认真去学习研究,总能创造出具有自已个性的网站,而在JIMDO建站就有不少高手,像网上邻居、网型网秀、诸葛草帽、王滨音乐空间等,都是一些JIMDO建站优秀的站长,各自的建站各有特色。本人也偶尔过去偷师一下,因为他们总有好东东分享。
如果大家有兴趣也可以关注他们的网站,总会有所收益。近日有朋友说本站的三分栏布局还算凑合,建议分享一下,其实我站的三分栏也没什么技术成分,只是简单 的改了一下广告合的位置,再增加了一个侧栏,由于申请到谷歌和百度的广告,所以两边都挂上了,光临本站者可以浏览一下。还有建议大家建站时不要删除 JIMDO官方的广告盒,(我站是专业版,没有广告盒),不然JIMDO可能会封站,后果自负了。好了废话不多说了,代码如下:
HTML代码:(红色部分是头部图片)
<div id="container">
<div id="header">
<img id="cc-m-imagesubtitle-image-3562261253" src=0000.jpg?t=1278332270" alt="" width="960" height="135"
>
</div>
<div id="navigation">
<var>navigation[1|2|3]</var>
</div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top">
这时可以添加图片或者一此文字
</td>
<td>
<div id="content">
<var>content</var>
</div>
</td>
<td align="left" valign="top">
<div id="sidebar">
<var>sidebar</var>
</div>
</td>
</tr>
</tbody>
</table>
<div id="footer">
<div class="gutter">
<var>footer</var>
</div>
</div>
</div>
CSS代码:
body
{
background:#fff url(bg.jpg) repeat-x
}
#container
{
border: 1px solid #cfcfcf;
position: relative; top: 0px;left:0px;
background: #fff;
margin:0 auto;
float:center;
margin-top:0px;
width:960px;
margin-bottom:1px
}
#navigation
{
position: relative; top: 0px;left:0px;
background: #C0C0C0;
margin:0px;
width:960px;
float:left;
margin-top: 0px;
padding-left:0px;
padding-right:0px;
margin-bottom:0px
}
#sidebar
{
padding-top:10px;
width:250px;
}
.blogselection .clearover
{
border-bottom: 1px dashed #ccc;
}
#content
{
background: #fff;
border-right: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
float:center;
width:530px;
padding:10px;
}
#footer
{
clear:both;
margin-top:0px;
background-image:url();
height:5px;
}
#footer .gutter
{
background: #C0C0C0;
height:30px;
padding:30px 15px 0 15px;
}
/* Navigation
----------------------------------------------- */
ul#mainNav1,
ul#mainNav2
{
margin: 0;
padding: 0;
list-style:none;
}
ul#mainNav1 li,
ul#mainNav2 li
{
float:left;
margin:0;
padding:0;
}
ul#mainNav1 li a,
ul#mainNav2 li a
{
font:normal 14px/205% 宋体;
text-decoration: none;
display:#89c8ef;
color: #000000;
}
ul#mainNav1 li a { padding:13px 13px 13px 13px; }
ul#mainNav2 li a { padding:22px 22px 22px 22px; }
ul#mainNav1 a:hover
{
background:#00FFFF;
color:#000080;
}
ul#mainNav1 a.current { font-weight:bold; color:#ff0000;}
这些是本站一些基础代码,还有网站的各种装饰,头部图片、文字颜色、背景色等可以根椐自己的喜好进行设置,特别是自定义广告盒,详细可到网上邻居的博客学习。还有其实做二分栏也可以,只要在HTML代码中去掉没有广告的一侧栏就可以了,但在CSS代码中要修改一下宽度,很适合做博客网站。最后,补充一点以上所提到的各优秀站长的网站链接在本站的友情链接中可找到。


