网页升级页面的样式优化
生活随笔
收集整理的這篇文章主要介紹了
网页升级页面的样式优化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
<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;"
<input type='text' name='textfield' id='textfield' class='txt' />?
這個文本框設置為只讀的模式，用來顯示要升級的文件的路徑和名稱；
<input type='file' name='fileField' class="file" id="fileField" size="28" οnchange= "document.getElementById('textfield').value=this.value" />
這個文本框type=file ，點擊是將獲取的要升級的文件路徑和名稱同步到上面的制度文本框中
?<input type='button' class='btn' value='瀏覽...' />
這個按鈕，在頁面顯示瀏覽按鈕的，他沒有觸發的處理行為，只是用來顯示用的，
將type=file 的文本框設置寬度和大小和顯示瀏覽的按鈕長度和寬度一樣大小，然后通過filter濾鏡進行透明化處理
<input type="submit" name="submit" class="btn" value="上傳" />
將數據提交給服務器
總結
以上是生活随笔為你收集整理的网页升级页面的样式优化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 初中计算机应用微课的教学设计,信息技术微
- 下一篇： Android百度人脸识别慢,Andro