<!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. ArcGIS连接Postgres 数据库

    ArcGIS连接Postgres 数据库 此前在使用ArcGIS的过程中,一般使用文件方式对数据进行管理,后面也有使用 GeoDatabase 数据库对数据进行管理,但是这种管理方式也存在一些弊端,特 ...

  2. Linux中系统时间同步ntpdate简介

    Linux服务器运行久时,系统时间就会存在一定的误差,一般情况下可以使用date命令进行时间设置,但在做数据库集群分片等操作时对多台机器的时间差是有要求的,此时就需要使用ntpdate进行时间同步.所 ...

  3. 14、CentOS7安装过程中，磁盘大于2T的报错处理

    问题描述 服务器磁盘单盘空间大于2TB,在安装CentOS7时出现下图报错: Boot failure.Reboot and Select proper Boot device... 问题原因: 安装 ...

  4. CSS经典布局——圣杯布局与双飞翼布局

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

  5. Vue：node.js与vue安装配置

    下载node.js 官网: https://nodejs.org/zh-cn/ 查看node版本 node -v 配置淘宝NPM镜像源(下载速度快) npm install -g cnpm --reg ...

  6. Docker下的mysql安装指令(Mac)

    工具   简介 对于Docker,绝对是开发人员的一款利器!当下特别火热的虚拟化技术.都说不知Docker是什么,作为IT人就out了. 关于Docker 是什么.及其基础学习可以参考: <Do ...

  7. vsftpd配置文件详解（转）

      vsftpd配置文件详解     1.默认配置: 1>允许匿名用户和本地用户登陆.      anonymous_enable=YES      local_enable=YES 2> ...

  8. Java实验项目三——平面图形和立体图形抽象类

    Program:按照下面要求完成类的设计 (1)设计一个平面图形抽象类和一个立体图形抽象类,提供该类对象公共的方法和属性. (2)修改项目三中第2题中所设计的球类.圆柱类,圆锥类.矩形类.三角形类.圆 ...

  9. linux学习之路第七天（时间日期类指令详解）

    时间日期类 1.date指令 date指令 - 显示当前日期 基本语法 1)date (功能描述:显示当前时间): 2) date + %Y (功能描述:显示当前年份) 3)date+%m( 功能描述 ...

  10. EL和JSTL核心技术

    一.EL EL表达式简化了jsp表达式方法,可以方便的访问各种数据并输出,依次访问pageContext.request.session和application作用域对象存储的数据,获取请求参数值,b ...