个人练习小览---《微金所仿站》
2024-05-12 00:34:42
这个2016年12月份的联系，主要使用了bootstrap来进行练习，熟悉bootstrap怎么操作。
这个网站未完成全部，主要就是熟悉bootstrap的模块操作。
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--Ie的最新渲染模式--><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"><link href="css/mian.css" rel="stylesheet"><link href="less/base.css" rel="stylesheet"><!--[if lt IE 9]><script src="lib/html5shiv/html5shiv.min.js"></script><script src="lib/respond/respond.min.js"></script><![endif]--></head>
<body><!--#header-->
<header id="header"><div class="container visible-lg visible-md"><!--hidden-sm hidden-xs--><div class="row text-center"><div class="col-md-3"><i class="iconfont"></i><span>手机微金所</span><i class="iconfont"></i><img src="data:images/c_06.jpg" class="sm"></div><div class="col-md-4"><i class="iconfont"></i><span>4006-89-4006（服务时间：9:00~21:00）</span></div><div class="col-md-3"><a href="#" >常见问题</a><a href="#">财富登录</a></div><div class="col-md-2"><a href="#" class="btn btn-itest" data-toggle="modal" data-target="#myModal">登录</a><a href="#">注册</a></div></div></div><div class="line"></div><nav class="navbar navbar-default navbar-static-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#"><img src="data:images/logo.png" width="140"> </a></div><div class="collapse navbar-collapse" id="nav_toggle"><ul class="nav navbar-nav"><li class="active"><a href="#">我要投资</a></li><li><a href="#">我要贷款</a></li><li><a href="#">平台介绍</a></li><li><a href="#">新手专区</a></li><li><a href="#">最新专区</a></li><li><a href="#">联系我们</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">个人中心</a></li></ul></div></div></nav>
</header>
<!--/#header--><!--#banner-->
<section id="banner"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- 指示物 --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- 包装的幻灯片 --><div class="carousel-inner" role="listbox"><div class="item active"><img src="data:images/slide_01_2000x410.jpg" class="banner-img-1"><!--<picture><source srcset="images/slide_01_640x340.jpg" media="(max-width:600px)"><source srcset="images/slide_01_2000x410.jpg" media="(min-width:601px)"><img src="data:images/slide_01_2000x410.jpg"></picture>--></div><div class="item"><img src="data:images/slide_02_2000x410.jpg" class="banner-img-2"></div><div class="item"><img src="data:images/slide_03_2000x410.jpg" class="banner-img-3"></div></div><!-- 控制器 --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a></div></section>
<!--/#banner--><!--#wjs_tese-->
<section id="wjs_tese"><div class="container"><div class="row"><div class="col-md-4 col-sm-6"><div class="media"><a class="media-left" href="#"><i class="iconfont"></i></a><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障资金安全</p></div></div></div><div class="col-md-4 col-sm-6"><div class="media"><a class="media-left" href="#"><i class="iconfont"></i></a><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障资金安全</p></div></div></div><div class="col-md-4 col-sm-6"><div class="media"><a class="media-left" href="#"><i class="iconfont"></i></a><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障资金安全</p></div></div></div><div class="col-md-4 col-sm-6"><div class="media"><a class="media-left" href="#"><i class="iconfont"></i></a><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障资金安全</p></div></div></div><div class="col-md-4 col-sm-6"><div class="media"><a class="media-left" href="#"><i class="iconfont"></i></a><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障资金安全</p></div></div></div><div class="col-md-4 col-sm-6"><div class="media"><a class="media-left" href="#"><i class="iconfont"></i></a><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障资金安全</p></div></div></div></div></div>
</section>
<!--#wjs_tese--><section id="wjs_news"><div class="container"><div class="row"><div class="col-md-8"><i class="iconfont"></i><a>公告:【微公告】2016年12月5日微金所平台系统升级维护公告</a></div><div class="col-md-4"><span>网络借贷暂行办法</span><i class="iconfont"></i><span>2015年度运营报告</span></div></div></div>
</section><section id="wjs_tz" class="visible-md visible-lg"><div class="container"><div class="row"><div class="col-md-8"><div class="itme"><i class="iconfont"></i><h2>海航资本领投</h2><p>宝新能源/深创投跟投A轮</p></div><div class="itme"><i class="iconfont"></i><h2>海航资本领投</h2><p>宝新能源/深创投跟投A轮</p></div><div class="itme"><i class="iconfont"></i><h2>海航资本领投</h2><p>宝新能源/深创投跟投A轮</p></div><div class="itme"><i class="iconfont"></i><h2>海航资本领投</h2><p>宝新能源/深创投跟投A轮</p></div></div><div class="col-md-2"><div class="list-time"><h6>平台上线时间</h6><strong>2013/11/15</strong></div><div class="list-time"><h6>平台上线时间</h6><strong>2013/11/15</strong></div></div><div class="col-md-2"><div class="list-time"><h6>平台上线时间</h6><strong>2013/11/15</strong></div><div class="list-time"><h6>平台上线时间</h6><strong>2013/11/15</strong></div></div></div></div>
</section><!--<section id="wjs_tb"><div class="container"><div class="row"><div class="col-md-9"><div class="left"></div><div class="right"><div class="content"></div></div></div><div class="col-md-3">1213</div></div></div>
</section>--><section id="wjs_cp"><div class="container"><h4 class="text-center">我们精心为您推荐以下项目</h4><div class="row"><div class="col-md-6"><div class="panel panel-default"><div class="panel-body"><h5>新手体验标1309期</h5><p>新注册客户</p><p>的投资体验产品</p><sup>新手专享</sup></div><div class="panel-footer"><ul class="text-center"><li><h5>8%</h5><p>测算年化收益率</p></li><li><h5>10天</h5><p>测算年化收益率</p></li><li><h5>8%</h5><p>测算年化收益率</p></li><li><h5>8%</h5><p>测算年化收益率</p></li></ul><a class="btn btn-itBtn btn-xs">立即赚钱</a><p class="text-itP text-center">起投金额100元 最高投资额5000元</p></div></div></div><div class="col-md-6"><div class="panel panel-default"><div class="panel-body"><h5>新手体验标1309期</h5><p>新注册客户</p><p>的投资体验产品</p><sup>新手专享</sup></div><div class="panel-footer"><ul class="text-center"><li><h5>8%</h5><p>测算年化收益率</p></li><li><h5>10天</h5><p>测算年化收益率</p></li><li><h5>8%</h5><p>测算年化收益率</p></li><li><h5>8%</h5><p>测算年化收益率</p></li></ul><a class="btn btn-itBtn btn-xs">立即赚钱</a><p class="text-itP text-center">起投金额100元 最高投资额5000元</p></div></div></div><div class="col-md-6"><div class="panel panel-default"><div class="panel-body"><h5>新手体验标1309期</h5><p>新注册客户</p><p>的投资体验产品</p><sup>新手专享</sup></div><div class="panel-footer"><ul class="text-center"><li><h5>8%</h5><p>测算年化收益率</p></li><li><h5>10天</h5><p>测算年化收益率</p></li><li><h5>8%</h5><p>测算年化收益率</p></li><li><h5>8%</h5><p>测算年化收益率</p></li></ul><a class="btn btn-itBtn btn-xs">立即赚钱</a><p class="text-itP text-center">起投金额100元 最高投资额5000元</p></div></div></div><div class="col-md-6"><div class="panel panel-default"><div class="panel-body"><h5>新手体验标1309期</h5><p>新注册客户</p><p>的投资体验产品</p><sup>新手专享</sup></div><div class="panel-footer"><ul class="text-center"><li><h5>8%</h5><p>测算年化收益率</p></li><li><h5>10天</h5><p>测算年化收益率</p></li><li><h5>8%</h5><p>测算年化收益率</p></li><li><h5>8%</h5><p>测算年化收益率</p></li></ul><a class="btn btn-itBtn btn-xs">立即赚钱</a><p class="text-itP text-center">起投金额100元 最高投资额5000元</p></div></div></div></div></div>
</section><section id="wjs_tab"><div class="container"><!-- Nav tabs --><div class="warpApp"><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#tab_01" role="tab" data-toggle="tab">特别推荐</a></li><li role="presentation"><a href="#tab_02" role="tab" data-toggle="tab">微投资</a></li><li role="presentation"><a href="#tab_03" role="tab" data-toggle="tab">月月盈</a></li><li role="presentation"><a href="#tab_04" role="tab" data-toggle="tab">稳赢保</a></li><li role="presentation"><a href="#tab_05" role="tab" data-toggle="tab">海航通报</a></li><li role="presentation"><a href="#tab_06" role="tab" data-toggle="tab">微金宝</a></li></ul></div><!-- Tab panes --><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="tab_01"><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-md-4 col-sm-6"><div class="panel panel-default"><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div></div><div role="tabpanel" class="tab-pane" id="tab_02">22222222</div><div role="tabpanel" class="tab-pane" id="tab_03">33333333</div><div role="tabpanel" class="tab-pane" id="tab_04">4444444</div><div role="tabpanel" class="tab-pane" id="tab_05">55555555555</div><div role="tabpanel" class="tab-pane" id="tab_06">666666666666</div></div></div>
</section><section id="wjs_nes01"><div class="container"><div class="row"><div class="col-md-2 col-md-offset-3"><h4 class="newHot">微金所头条</h4></div><div class="col-md-1"><ul class="nav nav-pills nav-stacked" role="tablist"><li data-title="微金所头条" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li><li data-title="微22233"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li><li data-title="微11111"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li><li data-title="微2222222"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li></ul></div><div class="col-md-6"><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="home">1111</div><div role="tabpanel" class="tab-pane" id="profile">222</div><div role="tabpanel" class="tab-pane" id="messages">333</div><div role="tabpanel" class="tab-pane" id="settings">4444</div></div></div></div></div>
</section><!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div><div class="modal-body"><form class="form-horizontal" role="form"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">邮箱：</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">密码：</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> 记住密码？</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">登录</button></div></div></form></div><div class="modal-footer"></div></div></div>
</div><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/mian01.js"></script>
</body>
</html>
在这个网站还学会使用了阿里巴巴矢量图这个很好用的网站，因为bootstrap里面的图表很有限，所以这个网站可以将你喜欢的图表打包起来进一个项目里面去还是很好用的。更何况登陆进去之后也是免费的，做做练习我觉得是充分的了。
部分图片展示：
这个练习给我最大的感受就是bootstrap虽然给的案例很简单，但是真的能够玩出花来，很有意思。
个人练习小览---《微金所仿站》相关推荐
- 个人练习小览---《xx机构动态广告》
同上一篇的广告一样,这一次不同的地方是加了动态,在每次加载的时候能够运行一次动画,运用的是fullpage.js以及animate.js.这两个js我记得我当时找的时候都是开源的,可以直接在网站上面下 ...
- 小程序也能接广告了，微信小程序广告位投放指南!
小程序也能接广告了,微信小程序广告位投放指南! 3月15日消息,据爆料,微信已经开始秘密测试在小程序中投放广告,并且流传出了一份<微信小程序广告位投放指引>,意味着微信小程序已经准备开启广 ...
- 工厂模式与抽象工厂模式小览（一）
一.文章来由 一天看完 hf设计模式 中的工厂模式,略微还有点消化不了,于是打算好好探究一下.其实不仅仅是这两个模式之间容易混淆,他们各自的定义也是挺绕的,下面我就仔细回过头翻书+查阅资料,重新捋一捋 ...
- python小工具myqr生成动态二维码
python小工具myqr生成动态二维码 (一)安装 (二)使用 (一)安装 命令: pip install myqr 安装完成后,就可以在命令行中输入 myqr 查看下使用帮助: myqr --he ...
- 微信小程序修改数组中的元素_微信小程序——this.setData()动态修改数组中的某一值...
微信小程序--this.setData()动态修改数组中的某一值S8v编程技术_踩坑日志_进阶指南_无知人生 大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像?S8v ...
- 微信小程序+.NET(九) 小程序之简单的广告拦截
微信小程序之简单的广告拦截 导语:我们在web-view内嵌网上的某些网站比如我内嵌的小说网站,会包含某些影响使用和含有诱导链接的垃圾广告,这时我们该怎么处理呢? 首先,要是自己写的网站,就可 ...
- NE(Network Embedding)论文小览
#NE(Network Embedding)论文小览 自从word2vec横空出世,似乎一切东西都在被embedding,今天我们要关注的这个领域是Network Embedding,也就是基于一个G ...
- 如何除去暴风影音的左上边广告和下角动态广告
去除左上角的各种广告超链接 1.首先是stormliv.exe的后台进程开始→运行 →msconfig 先打开"服务",找到Contrl center of Strom Media ...
- uni-app 微信小程序根据角色动态的更改底部tabbar
文章目录 1. 需求背景 1.1 源码下载 2. 问题前提及思路 3. 开始撸 3.1 设置 `tabbar.js` 配置不同角色不同的菜单 3.2 设置 `page.json` 3.3 vue 配置 ...
- 推荐｜NE(Network Embedding)论文小览，附21篇经典论文和代码
文章转自:NE(Network Embedding)论文小览,附21篇经典论文和代码 自从word2vec横空出世,似乎一切东西都在被embedding,今天我们要关注的这个领域是Network Em ...
最新文章
- 浮点型数据存储格式详解
- linux efi 双系统,EFI+GPT模式下Linux与Windows双系统要诀
- MIME type类型
- 在 Ubuntu 上安装 .NET SDK 或 .NET 运行时
- Exchange2010部署边缘服务器
- 43. 算法调用优先于手写的循环
- 数据结构入门（二）固定容量数组
- RouterOS利用（L2TP）实现异地组网
- 数字藏品：传承优秀传统文化的新载体
- Tomcat8.5后版本不返回200 OK的问题解决
- 论文阅读：Semantic Aware Attention Based Deep Object Co-segmentation（ACCV2018）
- 搭建私有云平台的一些随想
- 1079.活字印刷(Python)
- centos7几种版本x86_64、aarch64、armhfp、i386、power9、ppc64、ppc64el简单说明
- 出货量第一的三星为何在手机AI芯片竞争中落后华为和苹果？
- 猿如意|chat GPT测评
- 2021年高考志愿填报计算机类专业历年分数报考分析
- linux dd 编辑,Vim编辑器中,在命令模式下的dd命令是用来( )。
- 矩阵乘法可交换的条件，其中的几何意义
- iOS- APP如何做才安全
热门文章
- 常用汉字的UNICODE和对应的繁体字
- 【服务端】多线程游戏服务端
- GEE入门【4】| 矢量数据FeatureCollection（行政区划分）
- NLMSG_ALIGN
- VScode 插件中 package.json 文件 activationEvents 字段详解
- 触发器flip-flop
- 95后女孩从月入3000到月入10万
- 假如银行利率如下所示，请分别计算存款10000元，活期1年、活期2年、定期1年、定期2年后的本息合计。（结果四舍五入，不保留小数位。使用Math.round(double d)实现
- python中日期的数据类型_强制日期时间转换，强制日期时间数据类型，在pandas中使用read_表...
- Qt的跨平台的部分原理和机制