网页升级页面的样式优化

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.pathfile{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px;filter:alpha(opacity:0);opacity: 0;height:24px;width:70px }
</style>
</head>
<body>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='pathfile' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" οnchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" />
</form>
</div>
</body>

</html>

样式图片：

原理解说：

原始的标签样式太难看，不太符合要求；

ie 和Google的样式有少些区别，主要是按钮的位置有所不同导致的；

实现方法：

将升级的一样内容放到一个div 下面，并style="position:relative;"

这个文本框设置为只读的模式，用来显示要升级的文件的路径和名称；

这个文本框type=file ，点击是将获取的要升级的文件路径和名称同步到上面的制度文本框中

这个按钮，在页面显示浏览按钮的，他没有触发的处理行为，只是用来显示用的，

将type=file 的文本框设置宽度和大小和显示浏览的按钮长度和宽度一样大小，然后通过filter滤镜进行透明化处理

将数据提交给服务器

网页升级页面的样式优化相关推荐

ModStartCMS v6.0.0 智能验证码，UI样式优化
系统介绍 ModStart 是一个基于 Laravel 模块化极速开发框架.模块市场拥有丰富的功能应用,支持后台一键快速安装,让开发者能快的实现业务功能开发. 系统完全开源,基于 Apache 2.0 ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
Div+CSS网页布局对网站搜索引擎优化的影响
Div+CSS网页布局对网站搜索引擎优化的影响我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV+CSS佈局,页面代码精简,这一点相信对XHTML有所瞭 ...
web页面的性能优化以及SEO（搜索引擎优化）
Web页面的性能优化研究表明:用户最满意的打开网页的时间是2-5秒,如果等待超过5秒,99%的用户会关掉页面. 一.尽量减少前端HTTP请求 1,能使用icon不适用图片,实在避免不了要使用图片,就 ...
html局部可复制,截取网页局部区域css样式的方法和系统的制作方法
截取网页局部区域css样式的方法和系统的制作方法 [技术领域] [0001]本发明涉及计算机网络技术领域,特别是涉及一种截取网页局部区域CSS样式的方法和系统. [背景技术] [0002]CSS(Ca ...
HTML字体怎么显示,教你如何用CSS来控制网页字体的显示样式
教你如何用CSS来控制网页字体的显示样式更新时间:2007年02月27日 00:00:00 作者: HTML对于<font>内容</font>卷标只有: <font ...
博客园CodingLife模板样式优化
博客园CodingLife模板样式优化,小屏和大屏均做了优化,感兴趣的园友可以复制到你的页面定制CSS代码中, 源码地址:http://www.cnblogs.com/blog/customcss/3 ...
html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别, ...
博客园修改页面显示样式
博客园修改页面显示样式一.总结 HTML源码吧(FireBug或审查元素) 火狐浏览器下通过FireBug插件来查看源码二.打造自己的博客园页面刚接触博客园时,总有一种要定制打造自己博客页面的冲 ...

网页升级页面的样式优化

网页升级页面的样式优化相关推荐

最新文章

热门文章