<!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-width: 320px) {body {-webkit-text-size-adjust:none}}

        @media screen and (max-device-width: 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-width: 768px) and (max-device-width: 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>

 

模拟input type=file的更多相关文章

  1. input type=file 标签禁止让用户手动输入

    常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框 ...

  2. <input type="file">中怎设置那个按钮的样式

    最近才开始学习HTML,在练习表单的过程中,发现在使用<input type="file"/>这个类型的元素,产生的文件框和浏览按扭,它们的样式往往不符合我们的需要.怎 ...

  3. input type=file美化

    最近碰到input type=file 之前用模拟点击来实现美化,发现在IE7下会有bug导致图片上传不上去,最后改用直接美化的方法 <!DOCTYPE html> <html la ...

  4. 知识点：定义input type=file 样式的方法（转）

    ——“当我们想要用css美化表单的时候,有两个控件就会和前段人员作对,一个是是大名鼎鼎的select,另一个就是我现在要说说的 input type=file” 为什么要美化file控件?试想一下,别 ...

  5. input type='file'上传控件假样式

    采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  6. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

  7. html中，文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  8. Android：让WebView支持<input type=”file”…>元素

    最近在做一个活动页面:用户上传一张图片进行缩放.旋转后点击下一步填写内容后生成图片! 做好后经过各种测试是没有问题的,基本没有什么明显BUG,流程都能走通,但是嵌入到APP后,问题就来了! 在IOS上 ...

  9. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

随机推荐

  1. Java操作SQL数据库(JDBC)

    0.引入驱动jar包 使用jdbc进行具体操作前,需要引入相关数据库的jar包, 或者使用mave管理依赖 <!-- https://mvnrepository.com/artifact/mys ...

  2. Java安全之Weblogic内存马

    Java安全之Weblogic内存马 0x00 前言 发现网上大部分大部分weblogic工具都是基于RMI绑定实例回显,但这种方式有个弊端,在Weblogic JNDI树里面能将打入的RMI后门查看 ...

  3. Qt5实现文本编辑器（附图片转PDF与详细代码）

    1. 功能介绍 老规矩,我们直接上截图 这是主界面 文件菜单界面 编辑菜单界面 设置菜单界面 关于菜单界面 2. 功能演示 设置字体颜色 设置字体大小 点击关于菜单 点击关于Qt菜单 会自动跳转到Qt ...

  4. 基于Istio构建微服务安全加固平台的探索

    简介 An open platform to connect, secure, control and observe services. Istio 是一个由谷歌.IBM 与Lyft共同开发的开源项 ...

  5. .net core AES加密解密及RSA 签名验签

    引用 using Org.BouncyCastle.Crypto.Parameters; using Org.BouncyCastle.Security; using System; using Sy ...

  6. bootstrap validate 验证插件 动态添加和动态删除验证项

    //添加验证项 function addField(field, notEmptyMsg, othercon) { if (!othercon) { $("#gyssave").b ...

  7. iOS如何提升，首先得知自己的处境！（欢迎评论留言）

    聊聊行情?为什么总有人在乎旁人的看法而忽略自己的初衷?虽然iOS开发市场说不上好但也绝不算坏,想没想过那些煽风点火说iOS不行的人在做什么?真的转行从头开始?错.大错特错!在劝退你的同时他们会默默的学 ...

  8. Java：Java实例化(new)过程

    实例化过程(new) 1.首先去JVM 的方法区中区寻找类的class对象,如果能找到,则按照定义生成对象,找不到 >>如下2.所示 2.加载类定义:类加载器(classLoader)寻找 ...

  9. jvm代码热替换过程中异常

    BTrace java.lang.NoClassDefFoundError: javax/xml/bind/JAXBException 具体如下: 1. 信这个问题很多小伙伴已经遇到了,这是在你的jd ...

  10. 「ARC103D」 Distance Sums

    「ARC103D」 Distance Sums 传送门 水题. 首先如果让你求树上的节点 \(i\) 到其它所有节点的距离和,这是非常简单的,这就是非常常规的换根 \(\texttt{DP}\). 那 ...