<!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. java实现mysql的备份还原

    此文章是基于 1. 搭建Jquery+SpringMVC+Spring+Hibernate+MySQL平台 2. jquery+springMVC实现文件上传 一. 简介 备份和导入是一个互逆的过程. ...

  2. cocos-creator 脚本逻辑-2

    1.预制体 1)节点操作 Cc.find(‘node-1’) 获取节点 全局事件 作用于 canvas this.node.destroy() 删除节点(从内存中删除) 添加删除获取节点或组件 let ...

  3. Jquery trigger 与 triggerHandler

    secying Jquery trigger与triggerHandler trigger: 在每一个匹配的元素上触发某类事件(即触发jQuery对象集合中每一个元素). 这个函数也会导致浏览器同名的 ...

  4. ASPF（Application Specific Packet Filter）

    ASPF ASPF(Application Specific Packet Filter)是针对应用层的包过滤,其原理是检测通过设备的报文的应用层协议信息,记录临时协商的数据连接,使得某些在安全策略中 ...

  5. ArcGIS DataStore手册——入门篇

    第一章:ArcGIS DataStore入门 1.ArcGIS DataStore简介 ArcGIS DataStore是ArcGIS10.3推出来的一个全新的组件,它是一个关系型数据库管理系统,用于 ...

  6. VS2013 C++ 动态链接库的生成

    原文:http://www.cnblogs.com/djiankuo/p/5092025.html 这个东西搞了好几天,现在终于没有问题了,其实现在想来还是微软做的东西好用啊,在这里点个赞!!! LL ...

  7. Android 文件的可读可写

    文件流形式的保存,获取: 设立文件的私有,可读,可写,公开: 效果图: /data/data中文件夹: 新建一个项目测试文件: 得到data/data,查看文件的特性:

  8. Ubuntu 18.04 的网络配置

    netplan简介 目前,ubuntu18.04上使用了netplan 作为网络配置工具:在终端上配置网络参数跟之前的版本有比较大的差别 Netplan工作流程如下图所示:通过读取  /etc/net ...

  9. 排序算法积累(2)----sort排序

    转载:http://blog.csdn.net/sunshangjin/article/details/40296357 想起来自己天天排序排序,冒泡啊,二分查找啊,结果在STL中就自带了排序函数so ...

  10. 【NLP_Stanford课堂】语言模型4

    平滑方法: 1. Add-1 smoothing 2. Add-k smoothing 设m=1/V,则有 从而每一项可以跟词汇表的大小相关 3. Unigram prior smoothing 将上 ...