音乐模式 |静音模式|音乐投稿
免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 回复 发帖

[网页代码源] 【阿陌整理】超级简单的自制风格,无任何门槛。

[table=98%]
[tr][td]

只要你会PS,会替换图片~漂亮的风格就召之即来!


其实修改风格,摒弃模板那一类,无非是替换背景图片,替换发帖图标等....
下面我就把这些代码集中发布,给大家一些经验,如果觉得学习到了,可以回帖支持!谢谢~
因为不用模板一类,所以感觉特别简单~送给小白们,虽然我也是最近才学会的,QAQ,喜欢就回复,太高深了我也不会~
大家好,我是阿陌~欢迎来到资源阁:http://empty.funbbs.me


(1/5)风格内自定义发帖回复按钮样式


正常字体后添加:
  • ;}.postbtn,.replybtn{width:80px!important;height:32px!important;}.postbtn a,.replybtn a{text-indent:-99999px!important;}.postbtn {background:url(你的发帖背景图片) !important;} .replybtn{background:url(你的回复背景图片) !important;}

複製代碼
width:80px  (你定义的回复发帖图片的宽度)height:32px (定义图片的高度)




(2/5)风格内自定义版块分类图片




正常字体后添加
  • ;}.content .list h3 { padding-left: 9px; background:url(背景图片) repeat-x;line-height: 27px

複製代碼





(3/5)风格内自定义导航栏高度



页脚文字色后面添加
  • important;} #menu{position: absolute; left:180px; top:385px; right:0px; bottom: 0px;

複製代碼
#FFF important;} #menu{position: absolute; left:180px; top:385px; right:0px; bottom: 0px;  

left: 180px;(距左) top: 385px(距顶)
180PX为居中,具体看你导航长度。  385PX为导航距离顶部的高度。




(4/5)在风格内替换新旧发帖图标


风格就在正常字体,字号后加
  • ;}.list th{background:url(旧帖) 1px 2px no-repeat!important;}.list th.new{background:url(新帖) 1px 2px no-repeat!important;}

複製代碼
范例:
Verdana, Helvetica, Arial, sans-serif;}.list th{background:url(旧帖) 1px 2px no-repeat!important;}.list th.new{background:url(新帖) 1px 2px no-repeat!important;}






(5/5)在风格内替换设置页脚背景




把下面样式放到到风格编辑中的"正常字体"里的最后
  • ;}#footer{background:(图片地址) repeat-x 0 0;}

複製代碼
;} #footer{background:#ebedef url(图片地址) no-repeat 50% 0px !important;height:100px !important}
"repeat-x"可替换
repeat-x:横向重复平铺
repeat-y:纵向重复平铺
no-repeat:不重复平铺




替换代码已完毕,下面是一些基础知识




我的页面背景设置背景图片,在Opera/谷歌/世界之窗等浏览器上不显示?

如要在背景设置:
http://empty.funbbs.me/attachments/month_1302/130219135365ccb4e3c82661b9.jpg
这张背景图片。         

需要做的就是拆开图片地址。

在“扩展图片目录”里填写:http://empty.funbbs.me/attachments/month_1302/
在“页面背景”里填写:130219135365ccb4e3c82661b9.jpg

这样做就间接的读取了图片地址,大部分浏览器都支持显示。
其他类似的都可以按此方法放置图片。



如图例



风格头部图片,背景图片显示错位?

因为背景图片没有设置属性固定或者设置错误.
属性参考:
repeat:默认值。背景图像纵向和横向平铺
no-repeat:背景图像不平铺
repeat-x:背景图像仅横向平铺
repeat-y:背景图像仅纵向平铺
分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
返回列表
高级模式 | 发新话题
B Color Image Link Quote Code Smilies