一款最近刚制作的单栏新皮肤,黑色经典。原来是想制作一款和玛雅一样黑色风格的四栏皮肤.由于CSS太差,没做成.
后来就干脆做成这样的单栏风格了..
底部最新文章和最新评论两个栏目参考过
Hill制作的Hi`#B30000红色风格.
由于用单栏风格的皮肤就意味着可能会放弃很多...
由原来的三栏或者二栏改成单栏.会有很多的栏目放不下.所以这款皮肤只给需要单栏皮肤的人.
当然为此本站也提供了一个解决办法,如下图
这人效果是根据Adobe的一个开源项目Adobe Labs制作的,..
适合：IE6.0和Firefox，IE7下没有测试
建议分辨率:1024x768
发布者:liton
名称:hjsl
皮肤预览地址:httpp://www.isliton.com/blog/
原文及下载地址:
http://isliton.com/blog/article.asp?id=123
更多皮肤下载地址:
http://isliton.com/blog/LoadMod.asp?plugins=downloadForPJBlog
播放器在论坛插件栏的置顶贴里有,关于把所有的栏目放成一排,需要用一个Adobe Labs的源码,..有兴趣可以在我的博客里留下地址,我发给你...
看着还是在这里发吧.
由于这是单栏皮肤,为了显示的需要,所以默认在CSS里关闭了BLOG的很多侧边项目.
因而使得整个BLOG的侧边栏目只剩下3个留在BLOG的下方.
下面为本风格在CSS里关闭的侧栏:
#Side_BlogInfo
#Side_Support
#Side_User
#Side_Calendar
#Side_Links
#Side_GuestBookForPJBlogSubItem1
#Side_Search
#Side_BlogInfo
#Side_Feeb
#Side_CJFForPJBlog
#Side_Archive
#Side_SkinSwitchForPJBlog
如果你用了本风格,你可以在后台把上面对应的栏目设置为不显示.
关了以后感觉会少了很多东西...因为有些栏目对于一些站长来说还是蛮需要的.所以就提供一个横栏项目以供需要,
此栏目的源码来自Adobe labs
http://labs.adobe.com/technologies/spry/
先在后台添加一个侧边栏目比如"tools",位置随便喜欢自定...记住是侧边栏目,.否则有些效果无法使用.
复制内容到剪贴板
代码:
<link href="/show/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.TabbedPanels {
width: 500px;
}
.TabbedPanelsTab {
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
}
hr {
clear: left;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.STYLE1 {font-size: 12px}
.STYLE2 {font-size: 10px}
-->
</style>
<script language="JavaScript" type="text/javascript" src="/show/includes/SpryTabbedPanels.js"></script>
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">简繁转换</li>
<li class="TabbedPanelsTab" tabindex="0">博内搜索</li>
<li class="TabbedPanelsTab" tabindex="0">皮肤选择</li>
<li class="TabbedPanelsTab" tabindex="0">博客状态</li>
<li class="TabbedPanelsTab" tabindex="0">天气预报</li>
<li class="TabbedPanelsTab" tabindex="0">百万格子</li>
<li class="TabbedPanelsTab" tabindex="0">关于</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<table width="490" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="490"><a class="sideA" id="StranLink"><font color="#ff0000">转换为繁體中文</font></a>
<script src="Plugins/CoverJF/Std_StranJF.js" type="text/javascript"></script>
</td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<div><form class="STYLE1" style="MARGIN: 0px" onSubmit="if (this.SearchContent.value.length<3) {alert('关键字不能少于3个子');this.SearchContent.focus();return false}" action="search.asp">
<div align="left"><font color="#000000"><span><font color="#000000">博内搜索</font></span> 关键字</font>
<input style="background-color:#ffffff" size="16" name="SearchContent">
<span><font color="#000000">类 型</font></span>
<select style="background-color:#FFFFFF" name="searchType">
<option value="title" selected="selected">日志标题</option>
<option value="Content">日志内容</option>
<option value="Comments">日志评论</option>
<option value="trackback">引用通告</option>
</select>
<input name="submit" type="submit" value="查 找">
</div>
</form></div> </div>
<div id="SkinSwitchForPJBlog" class="TabbedPanelsContent">皮肤选择$SkinSwitchForPJBlog$
</div>
<div class="TabbedPanelsContent">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120">日志: <a href="default.asp">[<b>$blog_LogNums$</b> 篇]</a><br />
评论: <a href="search.asp?searchType=Comments">[<b>$blog_CommNums$</b> 个]</a><br />
引用: <a href="search.asp?searchType=trackback">[<b>$blog_TbCount$</b> 个]</a><br />
留言: [<b>$blog_MessageNums$</b> 个]</td>
<td width="180">会员: <a href="member.asp">[<b>$blog_MemNums$</b> 人]</a><br />
访问: [<b>$blog_VisitNums$</b> 次]<br />
建站时间: [<strong>2006-06-01</strong>]<br />
当前在线: [<b>$blog_OnlineNums$</b>人] </td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<script src="http://www.thinkpage.cn/weather/js.aspx?c=CHXX0044&l=cn&x=1&d=5&m=1&s=3&w=480&h=140" type="text/javascript"></script>
</div>
<div class="TabbedPanelsContent">
<table width="490px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://www.isliton.com"><img src="/Blog/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.csyz.com"><img src="http://www.csyz.com/include/images/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.skyow.com"><img src="http://www.skyow.com/blog/logo/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.xuyuanchi.com/Chenrong/"><img src="http://www.xuyuanchi.com/Chenrong/images/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://isll.cn/"><img src="http://isll.cn/logo.gif" width="88" height="31" border="0"></a> </td>
</tr>
<tr>
<td><a href="http://blog.masterjim.com/blog/"><img src="http://blog.masterjim.com/blog/images/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.pjhome.net/"><img src="http://www.pjhome.net/images/logos.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.egoday.com/"><img src="http://www.egoday.com/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.jonway.net/"><img src="http://www.jonway.net/images/jonway.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.oioi.cn/pj/"><img src="http://www.jonway.net/images/links/oioi.gif" width="88" height="31" border="0"></a> </td>
</tr>
<tr>
<td><a href="http://www.sigui.cn/"><img src="http://www.sigui.cn/logo/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.kate.net.cn/blog/"><img src="http://www.kate.net.cn/blog/images/logo.jpg" width="88" height="31" border="0"></a> </td>
<td><a href="http://mr-w.cn/"><img src="http://mr-w.cn/images/logos.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://fudaelec.w147.bizcn.com/"><img src="http://fudaelec.w147.bizcn.com/xujlblog/temp/weblogo1.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.hxblog.net/"><img src="http://www.hxblog.net/LOGO.GIF" width="88" height="31" border="0"></a> </td>
</tr>
<tr>
<td><a href="http://www.iyuer.com/"><img src="http://www.iyuer.com/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.hanyuwei.com/"><img src="http://www.hanyuwei.com/images/link/1.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.kusochina.com/allan/blog/"><img src="http://www.kusochina.com/allan/images/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.2design.cn/"><img src="http://www.2design.cn/others/logooo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.xytwins.com/"><img src="http://www.xytwins.com/images/logo.gif" width="88" height="31" border="0"></a> </td>
</tr>
<tr>
<td><a href="http://www.ciker.net/"><img src="http://www.ciker.net/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://esvista.net/Blog/"><img src="http://esvista.net/Blog/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.miles8.com/"><img src="http://www.miles8.com/images/logos.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://loja.cn/"><img src="http://loja.cn/blog/images/logos.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.fpv.cn/default.asp"><img src="http://fpv.cn/images/fpv_88_31.gif" width="88" height="31" border="0"></a> </td>
</tr>
<tr>
<td><a href="http://www.doraemon.cn/"><img src="http://www.doraemon.cn/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.duqq.com/"><img src="http://www.duqq.com/images/logos.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.pzzz.net"><img src="http://www.duqq.com/images/logos/hill.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.isliton.com"><img src="/Blog/logo.gif" width="88" height="31" border="0"></a> </td>
<td><a href="http://www.isliton.com"><img src="/Blog/logo.gif" width="88" height="31" border="0"></a> </td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent" align="left">
<table height="30px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/administrator.png" alt="寒江蓑笠" width="40" height="40" align="left"/></td>
<td width="80"> <span class="STYLE2"> Name:Liton<br/>
Age:20<br/>
From:ZheJ,China</span></td>
<td width="20"> </td>
<td width="150"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="STYLE2"><img src="images/email.gif">:joyliton@<span style="color: #990000">Gmail</span>.com</td>
</tr>
<tr>
<td class="STYLE2"><a title="点击这里Q我" href="tencent://message/?uin=277547217&Site=liton's blog&Menu=yes" target="blank"><img alt="" src="http://wpa.qq.com/pa?p=1:277547217:5" border="0" />俺从来不隐身ing</a>...<a title="点击这里Q我" href="tencent://message/?uin=277547217&Site=liton's blog&Menu=yes" target="blank"><br>
</a></td>
</tr>
</table></td>
</tr>
</table>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 0 });
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
var TabbedPanels4 = new Spry.Widget.TabbedPanels("TabbedPanels4");
var TabbedPanels5 = new Spry.Widget.TabbedPanels("TabbedPanels5");
var TabbedPanels5 = new Spry.Widget.TabbedPanels("TabbedPanels6");
</script>
</div>上文代码提供下载:
文中提到的几个文件在这里下载:
SpryTabbedPanels.css:
SpryTabbedPanels.js:
[
本帖最后由 liton 于 2007-4-2 10
编辑 ]
![[PJblog^3]技术支持论坛 - PJBLOG SUPPORT FORUM](images/phpwind/logo.gif){kind=logo}
