<!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. Python基础学习总结(一）

    1.变量和数据类型 1.1变量 1.每个变量都存储了一个值——与变量相关联的信息. 2.变量不仅可以为整数或浮点数,还可以是字符串,可以是任意数据类型. 1.1.1变量的命名和使用 变量名只能包含字母 ...

  2. jQuery数据缓存$.data 的使用以及源码解析

    一.实现原理: 对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQu ...

  3. 使用QQ第三方登录 并在父页面跳转刷新

    <html> <head> <title>QQ登录跳转</title> <script src="http://lib.sinaapp. ...

  4. replace的坑

    问题:html中代码段包含了$,在使用replace替换时,$直接被替换了解决:先把文本中的$全部替换成自己定义的标签,最后在还原回去原因:在介绍replace的文档中,$&代表插入匹配的子串 ...

  5. JSTL数据格式化

    日期表示 <fmt:formatDate value="${DATE1}" pattern="yyyy-MM-dd hh:mm:ss" type=&quo ...

  6. 点击空白处--某个div 消失

    背景:1.需要在 easyui grid 的编辑框 获取焦点的时候,在正下方展示费用类型的网格 2.在点击费用类型网格以外的地方,该网格消失 思路: 一.用easyui 的panel 作为费用类型网格 ...

  7. 关于echart 图表自适应问题的解决办法

    <div id="divEnergy" style="width: 100%; height: 300px; border: 5px solid red; &quo ...

  8. Codeforces Round #411 B. 3-palindrome

    B. 3-palindrome time limit per test 1 second memory limit per test 256 megabytes   In the beginning ...

  9. 07_zookeeper的客户端工具curator_基本api

    [zk原生api的不足之处] * 不能自动超时重连,需要手动操作 * watcher事件注册一次后就会失效 * 不支持递归创建节点 [ Apache curator ] * 解决了watcher的注册 ...

  10. DLL调用的两种方式（IDE：VC6.0，C++）

    原文:http://www.cnblogs.com/Pickuper/articles/2050409.html DLL调用有两种方式,一种是静态调用,另外一种是动态调用 (一)静态调用 静态调用是一 ...