飞龙博客

飞龙博客 飞龙在天

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

feilong.org 修订于2011-11-14 10:14:38 473 次浏览

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 于广州

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

所在分类: 网站开发

新作:

旧文:

blog money bui 教程 echarts 教程 eclipse 教程 html css 教程 IT趋势 js 教程 json 教程 mysql 教程 nodejs npm 教程 onblog SQLite 教程 tutorials vscode 教程 wap网站 winpe启动盘 wordpress 主机推荐 书法 前端开发 博客 名企名网 国学 域名注册 常用软件 建站程序 操作系统 教程 数码 无线上网 日记 电子商务 电脑笔记本 网站 网站优化 网站开发 网站推广 网站策划 网络 虚拟现实 默认