<!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. 360浏览器内核控制标签meta说明

    浏览器内核控制标签meta说明 背景介绍 由于众所周知的原因,国内的主流浏览器都是双核浏览器:基于Webkit的内核用于常用网站的高速浏览,基于IE的内核主要用于部分网银.政府.办公系统等网站的正常使 ...

  2. CentOS 7运维管理笔记(9)----Apache 安全控制与认证

    Apache 提供了多种安全控制手段,包括设置Web访问控制.用户登陆密码认证及 .htaccess 文件等.通过这些技术手段,可以进一步提升Apache服务器的安全级别,减少服务器受攻击或数据被窃取 ...

  3. 【Markdown】Latex基本语法

    Latex基本语法 注意点:Markdown 斜杠/ 转义字符! LaTeX 是大神Leslie Lamport 的杰作,该神是2013年图灵奖的获得者,感兴趣可以去瞻仰一下神人的相关著述: http ...

  4. JsonCpp操作数组对象

    JsonCpp操作数组对象 概述 ​ Json格式数据中,除了简单的String类型和一些非String类型,也有像各种高级语言中的数组类型一般的数组对象,且Json数组在实际开发中使用频率也比较高, ...

  5. Redux学习笔记-基础知识

      Redux概述 是什么:Redux是管理状态的容器,提供可预测的状态管理. 怎么做:Redux主要是用来管理组件或者应用的状态,本质上跟一个事件处理器差不多.通过分发action触发reduce来 ...

  6. c# 修改winform中app.config的配置值

    public bool ChangeConfig(string AppKey,string AppValue) { bool result = true; try { XmlDocument xDoc ...

  7. php模拟post提交

    <?php $url = "xxxxx"; // 用户名 $loginName = ''; // 密码 $pwd = ''; // service $serviceName ...

  8. C与C++混编

    了解一下C与C++如何合作,gcc和g++编译出来的东西有什么区别. 工具使用 objdump是个好工具,可以用于查看.o文件的内容,也可以查看可执行文件的内容. 查看符号表 objdump -t f ...

  9. 如何使git忽略某些文件或文件夹

    为什么要忽略某些文件或文件夹的变化? git作为一款项目文件变更版本管理软件,其主要功能之一就是追踪项目文件夹内各种文件及文件夹的变更情况.但是,在日常使用中,并非项目文件夹下的所有文件及文件夹变更都 ...

  10. LambdaToSql(轻量级ORM) 入门篇 开源项目

    为什么开发(背景) 最开始使用的是 sqlDbHelper,有微软的,有自己写的. 后来开始使用比较成熟的框架开发,使用过一段时间的Hibernate,后期主要使用 Entity FrameWork. ...