大家浏览本站的时候一定发现日志中图片都有带灰色边宽,,,在IE7或Firefox里鼠标划过边宽会变色...
其实实现起来相当容易,往下看:(操作前记得备份自己原来的文件,以防万一)
方法一:
首先在皮肤的layout.css中的 /*---日志内容框--*/
里添加如下几段css
Code
.Content-body img{
margin:0px;
padding:0px;
border:5px solid #eee;
background:#Fff;
}
.Content-body img:hover{
margin:0px;
padding:0px;
border:5px solid #000;
background:#F7F7F7;
}
/*---以上边宽颜色和宽度数值可以自己改动...当然，你也可以在每款皮肤中添加如上代码,调用不同的皮肤显示不同的边宽颜色,让整站完美统一--*/
这种方法简单..但会让日志里所有图片都变成有边宽...下面的方法要改程序,但可以控制只有日志内容里自己发布的内容中的图片才有边宽
方法二:
首先在皮肤的layout.css中的 /*---日志内容框--*/
里添加如下几段css(使用本站popblogV2皮肤的朋友无需修改此layout.css文件)
Code
.Content-body img {border: 0px;}
.Content-body .Content-Text img{
margin:0px;
padding:0px;
border:5px solid #eee;
background:#Fff;
}
.Content-body .Content-Text img:hover{
margin:0px;
padding:0px;
border:5px solid #000;
background:#F7F7F7;
}
在blog的class/cls_default.asp文件中查找
Code
if CanRead then
if webLogArr(12,PageCount)=1 then%>
<div class="Content-body">
在其后面添加:
Code<div class="Content-Text">
再搜索第一句:
Code
<p><a href="article.asp?id=<%=webLogArr(0,PageCount)%>" class="more">Read More...</a></p>
在其前面添加:
Code</div>
在文章页里添加图片边宽效果就在blog的class/cls_article.asp文件中查找
Code<div id="logPanel" class="Content-body">
在其后面添加:
Code<div class="Content-Text">
再查找:
Code
</div>
<div class="Content-body">
在其前面添加一句
Code</div>
方法三:(今天论坛上看到的方法,最简单的方法,推荐使用)
首先在皮肤的layout.css中的 /*---日志内容框--*/
里添加如下几段css
Code
.Content-body img {
padding:expression(width > 50 ? "4px":"0");
border:expression(width > 50 ? "5px solid #eee":"0 solid #ccc");
margin:expression(width > 50 ? "2px":"0px");
}
.Content-body img:hover{
padding:expression(width > 50 ? "4px":"0");
border:expression(width > 50 ? "5px solid #000":"0 solid #000");
margin:expression(width > 50 ? "2px":"0px");
}
这种方法自动在css中加入了判断,当图片宽度大于50px的时候才现实边宽,,,很不错!
点击下载此文件
Flash
在线播放
