BB’s Blog:本博近期关注 中国移动、电影、电视、手机软件.
图片阴影相框css的制作

如果没有进行CSS设置,MT默认模版的图片显示比较单一。你可以进行简单的设置,就可以让图片呈现图片阴影相框。如下图:

pic_css.png


1、在css中添加,具体的边框大小、颜色请自己根据模版调整
/* 图片阴影相框*/

.img-bg {
background-image: url(http://bblog.biz/images/shadow.gif);
background-repeat: no-repeat;
background-position: right bottom;
margin: 4px;
padding: 0px;
position: relative;
}
.img-bg img {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
}
/* 图片居左文字围绕 */
.img_L {
float: left;
margin: 6px 10px 5px 0px;
border: none;
}
/* 图片居右文字围绕*/
.img_R {
float: right;
margin: 6px 0px 5px 10px;
border: none;
}

然后进入 lib/MT/app/CMS.pm



将lib/MT/app/CMS.pm中的

if ($thumb) {

return <<HTML;
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" border="0" /></a>
HTML
} else {
return <<HTML;
<img alt="$fname" src="$url" width="$width" height="$height" border="0" />
HTML
}


修改为
if ($thumb) {

return <<HTML;
<div class="img-bg img_L" style="width: $width px;"><a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" border="0" /></a></div>
HTML
} else {
return <<HTML;
<div class="img-bg img_L" style="width: $width px;"><img alt="$fname" src="$url" class="img_L" width="$width" height="$height" border="0" /></div>
HTML
}


以后上传文件的时候就会自动生成如下代码:
<div class="img-bg: img_L" style="width: 200px;"><img alt="pic_css.png" src="http://bblog.biz/upload/images/pic_css.png" width="200" height="200" /></div>

你需要将其中的 style="width: **px; 加上10px 这样显示效果会更好。如果不能修改CMS你可以自己上传图片后添加<div class="img-bg img_L" style="width: **px;"></div>
注意在设置CMS的时候 $width px;之间有空格(如果不加空格会导致CMS无法识别),当然发文的时候最好把这个空格去掉,否则对显示有所影响。

ps:因为我的模版使用了<?xml version="1.0" encoding="utf-8"?> 所以padding 在IE下无法显示,以至于该相框在本站的显示并不是最好的效果。

本文信息

» 跟踪本文: 手机WAP
» 发表日期:2007年03月09日 1:19 PM
» 分类: 部件 Parts
» 作者:bb
» 本文链接:http://bblog.biz/movabletype/_parts/image_shadow.htmlEDIT
» 本文引用地址:本文不允许引用
» 本站留言支持:html标签、coCommentgravatar
» 书签:Add to 365KeyAdd to del.icio.us百度搜藏Add to Yahoo
» 现有评论:-、现有引用:-
» 评论审核:直接点击“我要回复”评论文章,需要管理员验证后才能显示,感谢你的回复.

评论(-)

本文不允许评论

引用(-)

本文不允许引用

我要回复

昵称:   记住我的用户信息:
邮件:   Subscribe to This Entry:
主页:
Very Happy Smile Sad Surprised Shocked Confused Cool Laughing Mad Razz Embarassed Crying or Very Sad Evil or Very Mad Twisted Evil Rolling Eyes Wink
Short Cuts
Search my Blog
Subscribe This Entry
  • Enter your Email address:
Archives
Vote
评价本文:
Category Entries