<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>布局小Demo</title>

</head>

<style>

	*{margin: 0;padding: 0; font-size: 12px; color: #646464;}

	.clear{ clear: both;}

	dl,ul,li,dd,dt{ list-style: none;}

	.w1000{ width: 1000px;margin: 0 auto;}

	.newPeopleGoTit i { width: 4px;height: 25px;display: inline-block;background-color: #7ebf41;margin-top: 18px;float: left;	}

	.newPeopleGoTit .tzTitle { font: 18px/18px "微软雅黑", "Arial"; color: #646464;float: left; margin-top: 26px;margin-left: 11px;}

	.newPeopleGoTit p{display: inline-block;margin-top: 26px;margin-left: 11px;color: #646464;}

	.newPeopleGoBody{width: 998px;border: 1px solid #ccc;height: 220px;margin-top: 20px;box-shadow: 0 0 3px #ccc inset;}

	.npgbheader{padding: 20px 20px 0 20px;}

	.npgbheader h3,.npgbheader div{display: inline-block;font-size: 16px;}

	.npgbheader span{padding: 0 20px;}

	.npgbheader div{float: right; font-size: 12px;}

	.npgbleft{ float: left;padding-left: 20px;}

	.npgbleft dl{ display: inline-block; margin-top: 20px; border-left: 1px solid #ccc; padding: 0 60px; line-height: 50px;}

	.npgbleft dl.first{ border:none;}

	.npgbleft dl .txtIndex{ text-indent: 1em; font-size: 24px; font-weight: bold;}

	.npgbright{ width: 300px;float: right;padding-right: 20px;position: relative;}

	.npgbright input{position: absolute;top: 50px;right: 20px; width: 300px; text-indent: 1em; height: 40px; border: 1px solid #ccc; outline: none;}

	.npgbright span{margin-top: 20px; display:inline-block;}

	.npgbright .rightspan{float: right;}

	.npgbright a{ display: block; width: 300px; height: 40px; text-align: center;position: absolute;top: 110px; line-height: 40px;background: #3a81cc; color: #fff; font-size: 14px;text-decoration: none;}

</style>

<body>

	<div class="w1000">

		<div class="newPeopleGoTit">

		  <i></i>

		   <h2 class="tzTitle">新手体验标</h2>

			<p>为了让新用户能更快的了解网站的服务所推出的短期快速投资体验标</p>

	  </div>

	  <div class="newPeopleGoBody">

				<div class="npgbheader">

					<h3>贷e贷新手体验标1535</h3>

					<span>发标时间2015-6-1500:01</span>

					<div>*从未进行过任何投资的用户专享</div>

				</div>　

				<div class="npgbleft">

					<dl class="first">

						<dt>投资期限</dt>

						<dd class="txtIndex">30天</dd>

					</dl>

					<dl>

						<dt>年化收益</dt>

						<dd class="txtIndex">16%</dd>

					</dl>

					<dl>

						<dt>付息方式</dt>

						<dd class="txtIndex">到期付息</dd>

					</dl>

				</div>

				<div class="npgbright">

					<span>剩余时间　23:59:59</span>

					<span class="rightspan">投标金额上限　3000元</span>

					<input type="text" onfocus="this.value=='输入金额为50的倍数'?this.value='':void(0);" onblur="this.value.length>0?0:this.value='输入金额为50的倍数';" value="输入金额为50的倍数">

					<a href="" class="npgbbtn">我要投标</a>

				</div>

				<div class="clear"></div>

	  </div>

	</div>

</body>

</html>

　　

金融新手投标模块布局小Demo的更多相关文章

  1. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  2. 11.Python使用Scrapy爬虫小Demo（新手入门）

    1.前提:已安装好scrapy,且已新建好项目,编写小Demo去获取美剧天堂的电影标题名 2.在项目中创建一个python文件 3.代码如下所示: import scrapy class movies ...

  3. jsoup爬虫简书首页数据做个小Demo

    代码地址如下:http://www.demodashi.com/demo/11643.html 昨天LZ去面试,遇到一个大牛,被血虐一番,发现自己基础还是很薄弱,对java一些原理掌握的还是不够稳固, ...

  4. RPC框架学习+小Demo实例

    一.什么是RPC协议? 全称:远程过程调度协议 效果:使消费者向调用本地方法一样调用远程服务方法,对使用者透明 目前常用:Dubbo.Thirft.Sofa.... 功能: 建立远程通信(socket ...

  5. Android学习小Demo一个显示行线的自定义EditText

    今天在处理一个EditText的时候,想着把EditText做成像一本作业本上的纸一样,每一行都可以由线条隔开,具体效果如下: 1)最开始的思路 一开始的想法是很简单的,找出每一行的高度,然后一行一行 ...

  6. React问答小demo

    在学习react初期,看了一些视频和资料,react基础知识差不多学完,跟着网上的一个教程,做了一个小型的问答demo. 需求看图说: 1.点击"添加"按钮,显示问题输入表单,再次 ...

  7. [置顶] 利用CXF发布webService的小demo

    其实webService的发布不仅仅只有xfire,今天,给大家介绍一下用CXF发布一个webService的小demo,CXF也是我做webService用的第一个框架... 先将相关的jar引进来 ...

  8. 基于BaseAdapter的Listview小Demo

    ListView是android开发中比较常用的控件, 其中适配器模式可以选择: ArrayAdapter:简单易用,通常用于将数组或者List集合的读个包值封装成多个列表项 SimpleAdapte ...

  9. Android项目页面跳转小Demo

    近期在做Android项目的开发,刚刚接触会有非常多新东西须要学习,从环境的搭建到语言的熟悉都是须要一步步完毕的,接下来就拿一个页面跳转的样例来和大家分享一下自己的心得体会. 採用的架构: Demo中 ...

随机推荐

  1. SQL练习(一)

    查找今天过生日的同学 这里表中已经存储了生日,所以思路是取出date_birth去今天的日期相比较 SELECT NAME,date_birth FROM org_mhi_studentfiles W ...

  2. influxdb 的安装（centos）

    安装命令: # for 64-bit systems wget http://s3.amazonaws.com/influxdb/influxdb-latest-1.x86_64.rpm sudo r ...

  3. 解决Openwrt安装插件提示一下错误的办法

    解决Openwrt安装插件提示一下错误的办法 Openwrt安装17ce插件,提示一下错误: Collected errors: * check_data_file_clashes: Package ...

  4. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  5. 29_Future模式2_JDK内置实现

    [Future使用场景] Future表示一个可能未完成的一部任务的结果,针对这个结果可以添加CallBack,以便在任务执行成功或失败后作出相应的操作. Future模式非常适合在处理耗时很长的业务 ...

  6. ANN神经网络——Sigmoid 激活函数编程练习 (Python实现)

    # ---------- # # There are two functions to finish: # First, in activate(), write the sigmoid activa ...

  7. git revert .vs. git reset .vs. git rebase

    1. git rervert的工作方式是:将一个老的commit的改动完全找出来,并且在新的tip处运行反操作,最终清除老commit的改动: git revert的应用场景多在对public rep ...

  8. angularJS directive中的controller和link function辨析

    在angularJS中,你有一系列的view,负责将数据渲染给用户:你有一些controller,负责管理$scope(view model)并且暴露相关behavior(通过$scope定义)给到v ...

  9. DevExpress中 TreeList控件的常规配置

    //以下为TreeList控件样式相关设置 this.treelist_SystemCfg.BackColor = Color.Transparent; this.treelist_SystemCfg ...

  10. Linux ->> VMWare Workstation虚拟机里的UBuntu系统安装VMWare-tools

    1) mkdir创建一个临时目录 2)复制gz压缩包到临时目录下 3)解压到当前目录 4)运行.pl文件安装 root@ubuntu:/# root@ubuntu:/# cd /tmp/ root@u ...