欢迎光临，海枫的朋友！今天是

来宾公告板:

[2006-10-27] 关于友情链接及其他声明[必看]
[2006-09-08] 本站网络硬盘共享空间!
[2006-09-06] 手机Wap用户访问地址:http://haifol.com/wap.asp
[2006-09-06] 转载本站文章请标明来源、填写文章的引用通告地址,谢谢!
[2006-07-03] 成功升级程序至PJBlog2 v2.6 Build 02最终版
[2006-04-23] 受Blog垃圾信息骚扰,遂升级程序内核即PJBOG2.5;
[2006-05-16] 建议您使用IE6.0浏览器,显示分辨率1024*768访问本站;
[2006-05-16] 申请友情链接请点这里看说明后提交!
[2006-05-16] 如未特别说明,本站所有内容都遵循创作共用协议;
[2006-05-17] 本站部分资源需要会员才能查看,建议您注册帐号;
[2006-05-17] 若您对本站有任何建议或意见,或者想发牢骚,请站内留言!
[2006-05-17] 欢迎大家加入本站交流群: 6043927;
[2006-06-17] 增加世界杯在线播放平台: 海枫网视;
[2006-07-15] 第一次清理“垃圾”注册ID: 点击查看详细内容;
[2006-08-27] 增加侧栏在线Flash播放器;
[2008-08-01] 通知所有友链站点,更新本站地址为国际域名;
[2008-08-03] 美化日志页面底部信息排版为左右表格,订阅标记居左;
[2008-08-04] 去掉谷歌火狐推介,官方八月底将停止服务;

◀♫点击播放有惊喜哦~

Tag: CSS |

1 | 2 |

预览模式: 普通 | 列表 | 关闭侧边栏

修复IE 下PNG 图片不能透明显示的问题

作者:jogocun 日期:2009-02-06 12:14

昨晚在修改畅易网盘的下载页面，背景色为淡淡的的土黄色，然后要添加一张图片，把图片做成PNG透明的了，但是在IE6下却会显示出恶心的灰白背景，在火狐、Opera、IE7等浏览下面是正常的，能显示出透明的，IE6以前的版本都不能支持PNG透明是个BUG，而做成gif的，图片边缘会有白色噪点也不好看了，那有没有办法解决这个问题呢？

　　谷歌了一下，找到了很多方法，有用滤镜的，有用JS代码结合css实现的，js代码也有好多种，我逐一测试了这些方法，首先在css加入滤镜效果测试没效果，而且不是对所有浏览器都有效，就试试了js。多种多样的js，去繁从简，用最剪短的js配合css是最方便的了，代码如下：

　　以我那个畅易下载页面为例子，效果如上面的“文件下载”图片，简述如下 ---

阅读全文...

Tags: CSS CSS JS代码 JS代码脚本脚本

分类: 进阶┊源码脚本 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 11481

发布TJinnStyle三栏皮肤 for pjblog

作者:jogocun 日期:2009-01-27 17:20

这个皮肤就是本站的“蓝白简洁 v1”三栏皮肤，最初的作者是shotan，不过该网站早已打不开了，本人就是在此版的基础改进完善的，修正了原版的一些问题，可参考2007年的老帖翻修TJinnStyle三栏皮肤之奇遇，最新版也已经修正了老帖当时存在的重要问题，即800*分辨率下侧栏下移问题！其它修正忘记了。

　　皮肤是老早在用了，早先也提供给一些网友使用，但是没公开下载。昨天又有网友喜欢这个皮肤，我还以为早发布到论坛了，让他去那找，结果真的没有，所以干脆整理下发布吧。

　　TJinnStyle三栏皮肤涉及的一些版权说明：
　　最初原作者是：shotan
　　原版发布时间：2007-05-20
　　二次修改完善者：jogocun
　　二次修改时间： 2007.07.30
　　最终打包发布： 2009-01-27

阅读全文...

Tags: CSS CSS 皮肤风格皮肤风格

分类: 进阶┊源码脚本 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 36831

稍加修改本站2009年新年皮肤问世

作者:jogocun 日期:2009-01-02 22:56

这不新的一年到了吗？元旦到了，2009年新的一年开始了，按照往年习惯，博客是该换装了，为了图个省事，便到PJ论坛瞧了瞧，发现论坛正举办“庆圣诞+2009元旦+新春-PJ模板征集活动！，找了几款新年皮肤，如果有合适的就打算改成三栏的，发现没有合适的索性就把人家的牛年图片“借用”下来，基于年初修改的“新年2008”，修改坛友king5151顶部图片素材并替换原来的图片，再调整layout.css局部css，以使看起来更觉得协调些。

　　就这样完事了，“新年2009”皮肤算是出炉了，照葫芦替换法，多么简单快捷，省心省事了，反正给自己用，看着还行就得了，大红大黄的，图个新年吉祥的喜庆，风格上有2009年生肖牛的财运，财运生活一定要牛哦，福到心想事成哈！

　　个别细节可能会在今后慢慢调整，看着哪里不爽就调整吧，目前还没正式启用，想看的话可以通过右上角的“更换风格”切换预览下吧，欢迎大家在此基础上给我提出宝贵的建议，谢谢！

阅读全文...

Tags: 皮肤风格皮肤风格 PJBlog PJBlog 代码代码 CSS CSS

分类: 进阶┊源码脚本 | 固定链接 | 评论: 3 | 引用: 0 | 查看次数: 7276

完成改造Wheat两栏皮肤为三栏

作者:jogocun 日期:2008-06-13 18:12

昨天午后与Mdio着手开始改造原Wheat两栏风格为三栏板式。Wheat两栏风格是2006年4月份正式启用PJBLOG博客平台后，用上的第二个也是目前个人觉得最“美”的风格了，当时一换上这个皮肤并进行所需的美化细节，近一年都没“换新装”呢。而随着网站的日新月异，侧栏模块也多了，两栏明显不能满足要求，而且怎么说三栏看起来就会大方一些吧，于是换上了原shotan改造的TJinnStyle三栏风格，随之细化完善该风格。

　　呵呵，Mdio太够意思了，多次麻烦他修改主体背景图片，如风格右侧的那个桶区域的过渡背景以及整体bg图片的美化，他PS熟练，三下两下搞定，也花了他不少泡MM的时间，要是在重庆，请他吃饭犒劳下哈。有了前面几款三栏改造基础，改造Wheat风格应该是简单快捷的，但我还是花了不少时间，昨晚的难题在于1024*768下始终有滚动条，没办法求教了何昕才搞定，即在主体样式中加入参数 OVERFLOW-X: hidden; 不过不支持Opera，不管了本站这类用户几乎为零。

　　中午解决了右侧栏背景图片在FF、IE6/7下显示问题以及顶部导航条两端与主体背景绿色接壤问题。综合测试，三款主流浏览器都能兼容了。风格在1024*768分辨率下满屏不会出现滚动条，大于该分辨率显示较好，右侧背景以灰绿补色呈现，整体较好，呵呵，就这样了~如下图所示：

阅读全文...

Tags: 皮肤风格皮肤风格 PJBlog PJBlog CSS CSS

分类: 进阶┊源码脚本 | 固定链接 | 评论: 4 | 引用: 0 | 查看次数: 8782

完成北京2008奥运风格PJ皮肤

作者:jogocun 日期:2008-05-28 20:19

昨晚逛 Mdio 的博客，这家伙又制作出了一个新皮肤，这次比较有几年意义，是北京2008奥运主题皮肤，看着不错，顶部图片的五位福娃朝气蓬勃呀，奥运精神正在召唤着我们，怎么说奥运年换上奥运皮肤，就当作支持北京奥运吧，呵呵~

　　他上面的是两栏风格，不适合我站的需求，凑巧在QQ上碰到Mdio了，聊上了这个话题，顶部图片由他帮我处理下，修改成适合三栏的大图片，一不做二不休介于上次欲修改“wheat 淡绿”风格为三栏而不完善失败告终，这次就让Mdio帮我以原TJinnStyle三栏为架构结合两栏的奥运风格，修改成“北京2008奥运”风格雏形。因为我站和他站模块差别较大，上传到我站“试穿”了下，晕，惨不忍睹啊，左右侧栏和顶部导航条都错位了。

　　不急，这事能慢慢来了。我重新对该风格进行细节美化调整，修改顶部栏目缩进，慢慢调整下，左右侧栏终于归位了，然后调整左右竖线分隔线等。经过半天多的不懈折腾，终于完成了较美观的奥运三栏皮肤，在FF、IE7.0、IE6.0测试通过，整体自我感觉良好哦~这里要特别感谢Mdio给我的帮助，为了照顾左右栏第一个板块标题的美观，顶部的大图劳烦他修改多次呢。

阅读全文...

Tags: CSS CSS PJBlog PJBlog 皮肤风格皮肤风格奥运资讯奥运资讯

分类: 进阶┊源码脚本 | 固定链接 | 评论: 5 | 引用: 0 | 查看次数: 8695

全国哀悼日，海枫全站换黑白装

作者:jogocun 日期:2008-05-19 11:42

根据国务院文件，5.19-5.21为全国哀悼日，在此期间，全国和各驻外机构下半旗志哀，停止公共娱乐活动，外交部和我国驻外使领馆设立吊唁簿。5月19日14时28分起，全国人民默哀3分钟，届时汽车、火车、舰船鸣笛，防空警报鸣响。

　　站长们，各位博友，让我们着装网站悼念灾区死难者！
　　在皮肤目录的global.css最顶部加入如下代码：

引用内容

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

　　这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现黑白素装。
　　遗憾，PJBLOG顶部协议不支持该代码，那么要换成如下即可：
　　在header.asp的<head>...</head>之间加入：

引用内容

阅读全文...

Tags: 生活记录生活记录地震地震 CSS CSS

分类: 记录┊生活留痕 | 固定链接 | 评论: 3 | 引用: 0 | 查看次数: 6436

[转] div+css命名规则-增强SEO

作者:jogocun 日期:2008-04-10 18:35

收藏一份不错的DIV+CSS布局的SEO优化资料：

Div+css命名规则-增强SEO
页头：header
登录条：loginBar
标志：logo
侧栏：sideBar

阅读全文...

Tags: CSS CSS div定义 div定义

分类: 进阶┊源码脚本 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6735

翻修TJinnStyle三栏皮肤之奇遇

作者:jogocun 日期:2007-07-31 22:55

原先本站默认的“绿色淡雅”一直是自己喜欢的风格，但是加载的东西偏多，在客户端配置差情况下以及XP下某些用遨游浏览器的用户访问可能会引起卡机，目前遨游用户访问会卡机可以通过去掉鼠标样式解决。而本身这款皮肤美化的细节较多，总体流畅性能当然是不能和PJ原版自带的皮肤攀比。我想还是多弄几款心仪的皮肤放到博客上供访客选择使用吧。N久没去PJ论坛的风格区看看了，昨天进去浏览下，发现了这款“ TJinnStyle经典三栏皮肤”还不错，大气得体！而且该皮肤兼容了IE6、IE7、火狐浏览器，嗯，制作界面风格能满足这三点就是成功的风格了。

TJinnStyle经典三栏皮肤与GG代码冲突
晕，这风格居然和Google的468*60的广告代码有冲突，会造成IE6下的800*分辨率中页面错位！
请使用800*显示分辨率和IE浏览器的朋友暂时不要选择“TJinnStyle三栏”访问本站，选用其他风格即可，谢谢你一如既往支持本站！

阅读全文...

Tags: CSS CSS 皮肤风格皮肤风格

分类: 记录┊生活留痕 | 固定链接 | 评论: 12 | 引用: 0 | 查看次数: 8672

PJBlog模版结构图CSS示意图

作者:jogocun 日期:2007-01-31 23:21

学做CSS皮肤应该要懂得或者了解的结构图，看看。。。

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body{
background-color:#FFFAFA;
border:1px solid #7D7D7D;
color: #8B4513;
font:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:13px;
padding:2px;
margin:0px;
}
#blogname{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #C6E28D;
WIDTH:970px;
HEIGHT:20px;
}
#blogtitle{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #F0E68C;
WIDTH:960px;
HEIGHT:20px;
}
#menu{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #8AB632;
WIDTH:970px;
HEIGHT:20px;
}
#ul{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #F0E68C;
WIDTH:960px;
HEIGHT:20px;
}
#menuL{float:left; width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;  margin: 5px 3px 5px 4px;  }
#li{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 4px 5px 2px; }
#menuDiv{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 3px 5px 4px; }
#menuR{float:right;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 3px 5px 4px;  }
#header{
MARGIN:5px;
BORDER: 1px solid #7B7B7B;
BACKGROUND:#ccd2de;
WIDTH:980px;
HEIGHT:20px;
}
#container{
WIDTH:980px;
BACKGROUND:#FFF;
border: 1px double #9ACD32;
margin: 2px 2px 2px 2px;
text-align: center;
}
#leftsidebar{
border:1px solid #5F82E9;
FLOAT:left;
MARGIN:1px 0px 5px 5px;
BACKGROUND:#F2F3F7;
WIDTH:190px;
clear:left;
line-height: 150%;
}
#tbody{
border: 1px solid #ACD558;
MARGIN:5px 3px 3px 5px;
PADDING:0px;
WIDTH:970px;
BACKGROUND: #F0E68C;
}
#maincontent{
border:1px solid #A68100;
MARGIN:3px 5px 3px 5px;
PADDING:0px;
WIDTH:970px;
BACKGROUND: #C8C8C8;
}
#innermaincontent{
border:1px solid #5F82E9;
MARGIN:1px 3px 3px 5px;
WIDTH:546px;
BACKGROUND: #F0E68C;
line-height: 150%;
FLOAT:left;
}
#mainContent-topimg{border:1px solid #B58615;
MARGIN:1px 3px 8px 5px;
WIDTH:540px;
BACKGROUND: #ECC56A;
line-height: 150%;
}
#content-width{border:1px solid #B58615;
MARGIN:5px 3px 3px 5px;
WIDTH:540px;
BACKGROUND: #ECC56A;
line-height: 150%;
}
#pageContent{border:1px solid #9ACD32;
MARGIN:5px 3px 8px 3px;
WIDTH:530px;
BACKGROUND: #B4D96A;
line-height: 150%;
}
#Content{border:1px solid #9ACD32;
MARGIN:8px 3px 5px 3px;
WIDTH:530px;
BACKGROUND: #B4D96A;
line-height: 150%;
}
#Content-top{border: 1px solid #70922B;
MARGIN:5px 3px 12px 3px;
WIDTH:520px;
BACKGROUND: #8AB632;
line-height: 150%;
}
#ContentTitle{border: 1px solid #AEA01A;
MARGIN:5px 3px 5px 3px;
WIDTH:250px;
BACKGROUND: #EBDB47;
line-height: 150%;
float:left;
}
#ContentAuthor{border: 1px solid #AEA01A;
MARGIN:5px 3px 5px 3px;
WIDTH:250px;
BACKGROUND: #EBDB47;
line-height: 150%;
float:right;
}
#Content-body{border:1px solid #70922B;
MARGIN:12px 3px 5px 3px;
WIDTH:520px;
BACKGROUND: #8AB632;
line-height: 150%;
}
#Content-bottom{border:1px solid #70922B;
MARGIN:12px 3px 8px 3px;
WIDTH:520px;
BACKGROUND: #8AB632;
line-height: 150%;
}
#mainContent-bottomimg{border: 1px solid #B58615;
MARGIN:8px 3px 12px 5px;
WIDTH:540px;
BACKGROUND: #ECC56A;
line-height: 150%;
}
#rightsidebar{
border: 1px solid #5F82E9;
FLOAT:right;
MARGIN:1px 5px 5px 2px;
WIDTH:190px;
BACKGROUND:#F2F3F7;
clear:right;
line-height: 150%;
}
#sidebar-topimg{
border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:190px;
BACKGROUND: #C6E28D;
line-height: 150%;
}
#sidepanel{
border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:190px;
BACKGROUND: #C6E28D;
line-height: 150%;
}
#Ptitle{border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:178px;
BACKGROUND: #F0E68C;
line-height: 150%;
}
#Pcontent{border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:178px;
BACKGROUND: #F0E68C;
line-height: 150%;
}
#Pfoot{border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:178px;
BACKGROUND: #F0E68C;
line-height: 150%;
}
#sidebar-bottomimg{
border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:190px;
BACKGROUND: #C6E28D;
line-height: 150%;
}
#footer{
CLEAR:both;
MARGIN:5px;
PADDING:5px 0px 5px 0px;
BACKGROUND:#ccd2de;
HEIGHT:20px;
WIDTH:985px;
BORDER: 1px solid #7B7B7B;
}
</style>
</HEAD>
<BODY>
<div id="container">
container
<div id="header">header
<div id="blogname">blogname
<div id="blogtitle">blogtitle</div>
</div>
<div id="menu">menu
<div id="ul">ul
<div id="menuL">menuL</div><div id="li">li</div><div id="menuDiv">menuDiv</div><div id="li">li</div><div id="menuDiv">menuDiv</div><div id="li">li</div><div id="menuR">menuR</div>
</div>
</div>
</div>
<div id="tbody">tbody
<div id="maincontent">maincontent
<div id="leftsidebar">leftsidebar
<div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel
<div id="Ptitle">Ptitle</div><div id="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div>
</div><div id="sidebar-bottomimg">sidebar-bottomimg</div>
</div>
<div id="innermaincontent">innermaincontent
<div id="mainContent-topimg">mainContent-topimg</div>
<div id="content-width">content-width
<div id="pageContent">pageContent</div>
<div id="Content">Content
<div id="Content-top">Content-top
<div id="ContentTitle">ContentTitle</div><div id="ContentAuthor">ContentAuthor</div>
</div><div id="Content-body">Content-body</div><div id="Content-bottom">Content-bottom</div>
</div>
</div>
<div id="mainContent-bottomimg">mainContent-bottomimg</div>
</div>
<div id="rightsidebar">rightsidebar
<div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel
<div id="Ptitle">Ptitle</div><div id="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div>
</div><div id="sidebar-bottomimg">sidebar-bottomimg</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
<div></div>
</BODY>
</HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

阅读全文...

Tags: PJBlog PJBlog CSS CSS

分类: 进阶┊源码脚本 | 固定链接 | 评论: 3 | 引用: 0 | 查看次数: 10213