作者ajuju630 (阿啾啾)
看板Blog
标题[痞客] 把继续阅读改成美美的图片DIY教学
时间Fri Jul 23 15:24:24 2010
图文并茂板:
http://ajuju630.pixnet.net/blog/post/31637244
今天要教大家怎麽把继续阅读的文字用图片替代
此段教学只适用痞客邦喔
因为我不想教无名的 XD
首先 请先进到部落格的後台
1.先按左下角的样式设计精灵
2.选择 CSS原始码编辑
3.按键盘的 Ctrl + F 键 会出现快速搜寻列 打上 .more a
即可找到 继续阅读的语法标签 .more a { }
4.如果你的CSS 里面找不到也没关系!自己加上去就好
自己在CSS的最下面 打上 .more a { } 就可以了
5.编辑用图片代替文字
.more a{ display: block; text-indent:-100000px;background:url( 图片网址 )
no-repeat ;width:100px;height:50px;float:right ;margin-right:5%; }
说明:
.more a { } 继续阅读的标签
display:block ; 宣告变成区块~原本只能点文字,加了这个一整块都可以点的到了
text-indent:-10000px ; 文字缩排,让原本的继续阅读四个字移出画面外
backgroung:url( 图片网址 ) no-repeat ; 贴上背景图片 而且图片不重复出现
width:80px ; 宽度 数字可依你图片大小宣告
height:80px ; 高度 数字可依你图片大小宣告
float:right ; 区块向右边对齐 如要向左边请改成 left
margin-right:5% ; 为调整避免图片太靠边边 用这个控制预留量 5% 可自己斟酌
举一反三
其实痞客邦里面很多地方的文字区块都可以用图片来代替
譬如 部落格名称 相簿、留言板跟名片等按钮 甚至侧栏的名称也可以唷^^
CSS很好玩吧
那今天就下课啦^^
还有其他的教学喔:
『css语法教学』更改痞客邦css样式的横幅图片教学
『css语法教学』痞客邦css 样式的字体大小颜色厚度教学
图文并茂板:
http://ajuju630.pixnet.net/blog/post/31637244
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 115.82.75.202
1F:推 ayu91035:推一个用心! 07/23 23:30
2F:推 Irarity:这样你的.more要解掉float的bug,否则会可能压到下面内容 08/04 17:37