您的位置：首页 > 其它

上传头像

2017-07-06 11:43 281 查看

简单的上传头像静态页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>tupian</title>

<style>

.white_content {

position: absolute;
display:none;

top: 25%;

left: 35%;

width: 632px;

height: 494px;

padding: 20px;

border: 1px solid #adacac;

background-color: white;

z-index:1002;

overflow: auto;

}

.sj_con {
padding: 0px;
height: 460px;
width: 600px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 15px;

}

.sctp{width:500px; height:40px;}

.uploadfile{width:132px;}

.input-file{display: inline-block;width: 130px;font-size: 18px;line-height: 37px;height: 40px;text-align: center; overflow: hidden;position: relative;background: #2FA8E6;color: #fff; transition:background .3s;-webkit-transition:background .3s}/*自定义外框样式*/

.input-file input{opacity: 0;filter:alpha(opacity=0);font-size: 100px;position: absolute;top: 0;right: 0} /*隐藏默认控件样式*/

.scgs {
font-size: 14px;
line-height: 40px;
color: #666;
text-align: left;
padding: 0px;
height: 43px;
width: 500px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;

}

.ig {
padding: 0px;
height: 250px;
width: 600px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;

}

.txdx {
margin: 0px;
padding: 0px;
float: left;
height: 200px;
width: 200px;
border: 1px solid #FF0;

}

.txdx1 {
padding: 0px;
float: left;
height: 150px;
width: 150px;
border: 1px solid #FF0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 30px;

}

.seltt {
height: 50px;
width: 214px;
margin-top:25px;
float:left;
padding: 0px;
margin-right: 0px;
margin-bottom: 10;
margin-left: 380px;

}

.lfbt {
font-size: 14px;
line-height: 25px;
color: #FFF;
background-color: #009ddc;
text-align: center;
float: left;
height: 25px;
width: 100px;

}

.lfbt a {
color: #FFF;
text-decoration: none;

}
</style>

</head>

<body>

<p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p>

<div id="light" class="white_content">

<div class="sj_con">
<div class="sctp">

<form action=" " enctype="multipart/form-data" method="post" class="uploadfile"><label class="input-file"><input title="浏览文件" type="file" name="file">上传图片</label><input type="hidden" name="id" value="104"></form>

</div>
<div class="scgs">仅支持JPG,PNG,GIF格式，文件小于5M</div>
<div class="ig">
<div class="txdx"></div>
<div class="txdx1"></div>
</div>

<div class="seltt">
<div class="lfbt"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">提交</a></div>
<div class="lfbt" style="float:right;"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</a></div>
</div>

</div>

</div>

<div id="fade" class="black_overlay"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 上传头像弹出层

相关文章推荐

新的分享

章节导航