大体分为三个模块
上中下三个模块
<header></header>
<div></div>
<footer></footer>
一.<header></header>部分
我们要完成下面的顶部导航样式：
代码如下：
<nav class="top">
<span class="tel">理财热线: 400-888-8888</span>
<ul>
<li><a href="#">登录</a></li>
<li><a href="#">快速注册</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">APP下载</a></li>
</ul>
</nav>
我们要完成下面的主导航的样式：
代码如下：
<nav class="main">
<a href="#" class="brand"><img src="img/logo@1x.png" alt="回到首页"></a>
<ul>
<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>
</nav>
二 <footer></footer>部分
要完成下方的页脚的样式：
代码如下：
<footer>
<ul>
<li><span class="icon icon-zfywxk">支付业务许可证</span></li>
<li><span class="icon icon-pcirk">PCI认证</span></li>
<li><span class="icon icon-visayz">Visa 验证</span></li>
<li><span class="icon icon-vsjmfw">VerSign加密服务</span></li>
<li><span class="icon icon-wlgs">网络工商</span></li>
<li><span class="icon icon-rzcx">电子商务协会认证诚信网</span></li>
<li><span class="icon icon-gs">北京工商</span></li>
</ul>
<p>北京某互联网金融公司 版权所有 ® 2015-2016</p>
</footer>
三 中间内容部分
第一个section部分： 交易量部分样式如下：
代码如下：
第二个section部分：广告部分样式如下（带有滚动特效的图片）：
代码如下：
第三个section部分：功能亮点介绍 样式如下：
代码如下：
<section class="feature">
<div class="item">
<h3>安全</h3>
<p>国家AAA信用平台<br>银行资金托管<br>上市公司背景保证</p>
</div>
<div class="item">
<h3>权威</h3>
<p>中央电视台推荐<br>互联网百强企业<br>标准起草单位</p>
</div>
<div class="item">
<h3>省心</h3>
<p>100元起投<br>用户利益保障机制<br>保险公司承保</p>
</div>
</section>
第四个section部分： 公告部分样式如下：
代码如下：
<div class="notice clearfix">
<a href="#"><span>2015-12-31</span>
元旦期间业务受理及值班公告元旦期间业务受理及值班公告元旦期间业务受理及值班公告元旦期间业务受理及值班公告元旦期间业务受理及值班公告元旦期间业务受理及值班公告元旦期间业务受理及值班公告元旦期间业务受理及值班公告元旦期间业务受理及值班公告</a>
<a href="#" class="more">更多公告</a>
</div>
第五个section部分：产品部分样式如下：
代码如下:
<section class="product clearfix">
<h2>固定期限产品
<em>甄选优质基金</em>
<em>省时省力</em>
<em>坐等收益</em>
</h2>
<div class="product-content">
<div class="item clearfix">
<h3><em>3</em>个月</h3>
<div class="info">
<p>约定年化收益率: <span class="year-rate">3.50% <i>起</i></span></p>
<p>总成交金额: <span class="money">1880 <i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>3-6</em>个月</h3>
<div class="info">
<p>约定年化收益率: <span class="year-rate">3.60% <i>起</i></span></p>
<p>总成交金额: <span class="money">2880 <i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>6-12</em>个月</h3>
<div class="info">
<p>约定年化收益率: <span class="year-rate">4.50% <i>起</i></span></p>
<p>总成交金额: <span class="money">3880 <i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>12-24</em>个月</h3>
<div class="info">
<p>约定年化收益率: <span class="year-rate">5.60% <i>起</i></span></p>
<p>总成交金额: <span class="money">4880 <i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>24</em>个月以上</h3>
<div class="info">
<p>约定年化收益率: <span class="year-rate">6.20% <i>起</i></span></p>
<p>总成交金额: <span class="money">5880 <i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
</div>
</section>
第六个section部分和第五个类似,此处略过。
第七个section部分底部内容样式如下所示：
代码如下：
<nav class="footer">
<div class="footer-content clearfix">
<p class="brand"></p>
<ul>
<li class="title">关于我们</li>
<li><a href="#">公司介绍</a></li>
<li><a href="#">业务模式</a></li>
<li><a href="#">合作机构</a></li>
<li><a href="#">服务协议</a></li>
</ul>
<ul>
<li class="title">风险防范</li>
<li><a href="#">账户安全</a></li>
<li><a href="#">安全保障</a></li>
</ul>
<ul>
<li class="title">理财产品</li>
<li><a href="#">固定期限</a></li>
<li><a href="#">债权/散标</a></li>
</ul>
<ul>
<li class="title">交易帮助</li>
<li><a href="#">购买</a></li>
<li><a href="#">赎回</a></li>
<li><a href="#">提现</a></li>
</ul>
<ul>
<li class="title">机构服务</li>
<li><a href="#">机构中心</a></li>
<li><a href="#">合作联系</a></li>
</ul>
</div>
</nav>
</div>
