zoukankan      html  css  js  c++  java
  • 模拟input type=file

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <meta name="format-detection" content="telephone=no" />
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
        <style>
        
            @charset "utf-8";
            * {margin:0; padding:0;}
            html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:none;}
            body {font-family:Arial, "Microsoft Yahei";background: #f4f4f4;}
            body.choose{height: 100%;overflow: hidden;}
            form, img, table, td { border:0;}
            ul, ol, li { list-style-type:none; display: block;}
            h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal;}
            input, textarea, img { vertical-align:middle; font-family:Arial, "Microsoft Yahei";}
            @media screen and (max-device- 320px) {body {-webkit-text-size-adjust:none}}
            @media screen and (max-device- 480px) {body {-webkit-text-size-adjust:none}}
            @media only screen and (-webkit-min-device-pixel-ratio: 2) {body {-webkit-text-size-adjust:none}}
            @media only screen and (min-device- 768px) and (max-device- 1024px) {body {-webkit-text-size-adjust:none}}
            a {color:#3c3f46;text-decoration:none;}
            html,body{ height: 100%;}
            em,i{font-style:normal;}
            .clear { clear: both; height: 0px; font-size: 0px; visibility: hidden; line-height: 0;}
            .clearfix:after{ clear: both; content: "200B"; display: block; height: 0;}
            .clearfix{ *zoom: 1;}
            .none { display: none;}
            .flol { float: left;}
            .flor { float: right;}
            .main { position: relative; margin: 0 auto; width: 100%; min-height:100%; max-width: 640px; background: #efeff4;}
            .note {  padding: 6px 12px; font-size: 9px; color: #bc131b; line-height: 11px;}
            .fill_dl { padding:0 12px; font-size: 13px; color: #000; border-bottom:1px solid #d7d7d7; background: #ffffff; }
            .fill_dl dt { text-align: right; float: left; height: 40px; line-height: 40px; }
            .fill_dl dt i { margin-right: 5px; color: #d9240d; }
            .fill_dl dd { /*float: left;*/ height: 40px; line-height: 40px; overflow: hidden; }
            .fill_dl dd input{ width: 100%; border: none; height: 39px; line-height: 39px; outline: none; }
            .note1.note { color: #555; }
            .btn_72 { box-sizing: border-box; padding:0 12px; width: 100%;  margin-top:38px;}
            .btn_72 a { display: block; width: 100%; height: 36px; line-height: 36px; font-size: 13px; color: #893f03; text-align: center; background: url("images/btn_72.png") no-repeat; background-size: 100% 36px;}
            .img_full { width:100%; height:auto;}
            .img3_p { width: 100%; position: relative;}
            .img3_p a { position: absolute; left: 50%; top: 0; margin-left:-111px; display: block; width: 223px; height: 44px; background: url("images/btn1.png") no-repeat; background-size: 100% auto;  }
            .fixed_a {position: fixed; margin: 0 auto;  width: 100%; max-width: 640px; bottom: 0; display: block; height: auto; }
            .fixed_a img { width: 100%; height: auto; }
            .hidden_pic { position: absolute; z-index: 10; left: 0; top: 0; width: 100%; height: auto; display: none;}
            .shut { position: fixed; z-index: 20; top: 10px; right: 10px; width: 31px; height: auto; display: none;}
            .upload_p { padding:5px 12px; height: 48px; background: #efeff4; border-bottom:1px solid #d7d7d7;}
            .upload_p a { display: block; width: 44px; height: 48px; background: url("images/add_pic.png") no-repeat; background-size: 100% 100%; }
            .upload_p a.add_vedio { display: block; width: 44px; height: 48px; background: url("images/add_vedio.png") no-repeat; background-size: 100% 100%; }
            .upload_p input{ width: 240px; height: 135px; padding-left: 0; position: relative; z-index: 9; opacity: 0; filter: alpha(opacity=0);outline: none;}
    
            .barWrap { float: left; margin-top: 10px; width:68%; height: 10px; background: #b7b7b7; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
            .barLenth { width:50%; height:10px; background: #38b7ea; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
            .barNote { float: right; margin-top: 8px; font-size: 12px; color: #38b7ea;}
            .barPercent { width: 100%; height: 20px; line-height: 20px; text-align: center; color: #38b7ea; font-size: 12px;}
        </style>
    </head>
    <body>
    <div class="main">
        <p class="note">房天下承诺:您提交的所有房源信息,我们将严格保密,绝不向房天下经纪人及第三方泄露。</p>
        <dl class="clearfix fill_dl">
            <dt><i>*</i>搜房帮房源ID:</dt>
            <dd><input type="text" placeholder="例如:339828154"></dd>
        </dl>
        <dl class="clearfix fill_dl">
            <dt><i>*</i>&emsp;&emsp;&emsp;&emsp;栋:</dt>
            <dd><input type="text" placeholder="5"></dd>
        </dl>
        <dl class="clearfix fill_dl">
            <dt><i>*</i>&emsp;&emsp;&emsp;&emsp;元:</dt>
            <dd><input type="text" placeholder="1单元"></dd>
        </dl>
        <dl class="clearfix fill_dl">
            <dt><i>*</i>&emsp;&emsp;&emsp;&emsp;号:</dt>
            <dd><input type="text" placeholder="303"></dd>
        </dl>
        <dl class="clearfix fill_dl">
            <dt><i>*</i>业主联系方式:</dt>
            <dd><input type="text" placeholder="13568341101"></dd>
            <dd style="height: 12px; line-height: 12px; font-size: 9px; padding-bottom: 3px; color: #bc131b;">该号码为经纪人电话,请输入正确业主联系方式</dd>
        </dl>
        <dl class="clearfix fill_dl">
            <dt><i> </i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;书:</dt>
            <dd><input disabled="disabled" style="background: #fff;" type="text" placeholder="请提交业主委托书"></dd>
        </dl>
        <p class="upload_p">
            <a href=""><input type="file" class=""></a>
        </p>
        <dl class="clearfix fill_dl">
            <dt><i> </i>&nbsp;房源实勘视频:</dt>
            <dd><input disabled="disabled" style="background: #fff;" type="text" placeholder="请提房源实勘视频"></dd>
        </dl>
        <div class="upload_p clearfix">
            <!--<a class="add_vedio" href=""><input type="file" class=""></a>-->
            <div class="barWrap">
                <p class="barLenth"></p>
                <p class="barPercent">50%</p>
            </div>
            <span class="barNote">上传成功</span>
        </div>
        <p class="note1 note">温馨提示:提交业主委托书、房源实勘视频等信息能让您的房源更快通过审核~</p>
        <p class="btn_72"><a href="javascript:;">提交房源信息</a></p>
    </div>
    </body>
    </html>



     
  • 相关阅读:
    【原创】flash中DataGrid数据列显示顺序的解决办法(非数据排序)
    [译]C# 7系列,Part 2: Async Main 异步Main方法
    [译]C# 7系列,Part 1: Value Tuples 值元组
    我们是怎么做Code Review的
    Asp.Net 5 新增公告仓库
    微信现金红包高级红包接口开发注意事项
    解决Windows 8.1中所有的应用(Modern App)无法打开(闪退)的问题
    代码要恰如其分——记一次代码审查
    [译]DbContext API中使用SqlQuery和ExecuteSqlCommand获取存储过程的输入输出参数
    解决托管在Windows上的Stash的Pull request无法合并的问题
  • 原文地址:https://www.cnblogs.com/darkterror/p/6477477.html
Copyright © 2011-2022 走看看