上传头像

最新推荐文章于 2023-07-24 21:37:24 发布

尼古拉蹦蹦

最新推荐文章于 2023-07-24 21:37:24 发布

阅读量204

点赞数

文章标签：上传头像弹出层

本文链接：https://blog.csdn.net/u012415332/article/details/74531322

版权

简单的上传头像静态页面

<!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>