这个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="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="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="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="images/slide_01_2000x410.jpg"></picture>--></div><div class="item"><img src="images/slide_02_2000x410.jpg" class="banner-img-2"></div><div class="item"><img src="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="c