<!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. Rabbit的直连交换机direct

    直连交换机类型为:direct.加入了路由键routingKey的概念. 就是说 生产者投递消息给指定交换机的指定路由键. 只有绑定了此交换机指定路由键的消息队列才可以收到消息. 生产者: packa ...

  2. Oracle查询表名超过长度限制的表

    SELECT T.table_name, LENGTH(TRIM(T.table_name)) FROM user_tables t ORDER BY LENGTH(TRIM(t.table_name ...

  3. FusionCharts数据展示成饼状图、柱状图和折线图

    FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...

  4. img图片加载失败默认图片

    <img :src="item.goods_pic" onerror="javascript:this.src='../static/images/default. ...

  5. MySql5.5以上版本设置主从结构的例子

    为了实现读写分离,一般都需要先设置好mysql的主从结构,网上现有的mysql配置大都基于低版本,在5.5以上版本无法配置成功,所以参考了官方文档,写了这篇笔记. *主要参考Mysql 5.6的官方文 ...

  6. java设计模式之装饰者模式学习

    装饰者模式 Decorator模式(别名Wrapper):动态将职责附加到对象上,若要扩展功能,装饰者提供了比继承更具弹性的代替方案. 装饰者与被装饰者拥有共同的超类,继承的目的是继承类型,而不是行为 ...

  7. 理解Canvas原理

    Canvas原理 Canvas我们把它翻译成画布,从字面意思我们就可以知道,不就是可以在上面画东西的布吗.好像很简单,没什么好说的.先看图: 从这几幅图我们可以看到以下几点: 1.每个小方格我们可以看 ...

  8. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  9. js-滚动到指定位置导航栏固定顶部

    最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 <!DOCTYPE html> <html> <head> <meta c ...

  10. Linux ->> scp命令复制对端机器上的文件/文件夹

    scp是secure copy的简写,用于在Linux下从远程机器拷贝文件. 特点: 传输是加密的,稍微影响了一下速度.而相比较rsync,它对于资源的占用还是有优势的. 用法 scp [参数] [原 ...