金融新手投标模块布局小Demo

<!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" οnfοcus="this.value=='输入金额为50的倍数'?this.value='':void(0);" οnblur="this.value.length>0?0:this.value='输入金额为50的倍数';" value="输入金额为50的倍数"><a href="" class="npgbbtn">我要投标</a></div><div class="clear"></div></div></div>
</body>
</html>

转载于:https://www.cnblogs.com/rainheader/p/4595240.html

金融新手投标模块布局小Demo相关推荐

python桌面开发吐血_想用java写个桌面小demo，就布局都差点写吐血了，学艺不精...
demo简略需求项目背景很多文件重复存放,除了管理混乱,还会对患有强迫症用户的身心造成10000点的伤害...其实就是360云盘当时上传了有上传,造成很多重复的图片+视频,前阵子360个人云盘&q ...
nodeJS+express+mysql模块封装之服务器渲染小demo
nodeJS+express+mysql模块封装之服务器渲染小demo 创建一个小项目 npm init 下载相关中间件(根据package.js来下载) package.js 目录结构 index. ...
android jsoup简书,jsoup爬虫简书首页数据做个小Demo
昨天LZ去面试,遇到一个大牛,被血虐一番,发现自己基础还是很薄弱,对java一些原理掌握的还是不够稳固,比如java反射注解,知道一点就是说不出来,很尴尬... 生命不止,学习不止啊之前那个项目 Q ...
jsoup爬虫简书首页数据做个小Demo
代码地址如下: http://www.demodashi.com/demo/11643.html 昨天LZ去面试,遇到一个大牛,被血虐一番,发现自己基础还是很薄弱,对java一些原理掌握的还是不够稳固 ...
用vue2.6实现一个抖音很火的【时间轮盘】屏保小DEMO
写在前面: 前段时间看抖音,有人用时间轮盘作为动态的桌面壁纸,一时间成为全网最火的电脑屏保,后来小米等运用市场也出现了[时间轮盘],有点像五行八卦,感觉很好玩,于是突发奇想,自己写一个网页版小DEMO ...
Android学习小Demo（12）TodoList实现ListView的分组实现
很多情况下, 我们想要ListView上面展示的东西是可以分组的,比如联系人列表,国家列表啊,这样看起来数据的展现比较有层次感,而且也有助于我们快速定位到某一个具体的条目上,具体效果请看下图: 这是前 ...
Android学习小Demo（11）一个显示行线的自定义EditText
今天在处理一个EditText的时候,想着把EditText做成像一本作业本上的纸一样,每一行都可以由线条隔开,具体效果如下: 1)最开始的思路一开始的想法是很简单的,找出每一行的高度,然后一行一行 ...
Android学习小Demo（10）ToDoList的改进版之ViewPager显示多个图片
在TodoList增强版的增加界面上,为了显示图片,我是挖了两块地方,放了两个ImageButton,来显示图片,而且限制了最多只能放两张图片.当两个View都放置图片之后,我就会把"Gal ...
Android学习小Demo（9）一个To Do List的实现
记得看过一篇文章,是说一个人临走之前,列下了想做的最后100件事情,然后拿着这张便签,一件一件地去实现.又想起乔布斯说,如果今天是你的最后一天,你会怎么过? 我有很多事情想做,想写很多的文章,但是时间 ...

金融新手投标模块布局小Demo

金融新手投标模块布局小Demo相关推荐

最新文章

热门文章