飞龙博客

妙法莲华经

discuz x2 css样式模拟文件上传控件css和html总结

feilong.org 修订于2011-11-14 10:14:38

discuz x2 有现成的css样式模拟上传控件的方法,在discuz 模板文件的 common.css里面,搜索 .filebtn ,就可以找到相关的css,还有html写法提示呢。不过飞龙发现它的举例没有包括上传控件的“左边文本框”,这未免美中不足。因此飞龙css总结一下discuz x2 css样式模拟上传控件的css和html,希望对你有用。本日志修订地址:http://feilong.org/discuz-fileupload-css-html

1、先上discuz默认的上传控件相关的css,如下,common.css里面,有sample举例。

/*
	Name:			mod_filebtn
	Level:			Global
	Sample:			
Explain: 模拟 ,注意不要让 button 太宽 Last Modify: Pony */ .filebtn { position: relative; margin: 0 auto; width: 60px; overflow: hidden; } .filebtn .pf { position: absolute; right: 0; height: 23px; opacity: 0; filter:alpha(opacity=0); } .px, .pt, .ps, select { border: 1px solid; border-color: {INPUTBORDERDARKCOLOR} {INPUTBORDER} {INPUTBORDER} {INPUTBORDERDARKCOLOR}; background: {INPUTBG} url({IMGDIR}/px.png) repeat-x 0 0; color: {TEXT}; } .px, .pt { padding: 2px 4px; line-height: 17px; } .px { height: 17px;padding: 2px 4px; line-height: 17px; }

2、再上带左边文本框的文件上传控件(fileupload)的html,如下:

只能上传.mp3文件

3、最后,第1步的css样式不够用,补上那些修补的的css样式:

/* fix for txt btn fileup button css style */
.filebtnfix{width:300px !important;float:left !important;}
.filebtn pffix{font-size:50px !important;}
.filebtn pxfix{width: 230px !important;}

你有更好的发现?请联系飞龙讨论交流。

更新网址:https://feilong.org/discuz-fileupload-css-html
最初发布:20111114 10:14:38 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文: