利用Foundation 简单开发的响应式专题页面，css,html,js,集成，简单而有效，简单明了。
代码相当简单，如下：
| <div data-magellan-expedition="fixed" id="zhut" class="zhut"> | |
| <dl class="sub-nav"> | |
| <dd data-magellan-arrival="page1"><a href="#page1">首页</a></dd> | |
| <dd data-magellan-arrival="page2"><a href="#page2">野猪生活环境</a></dd> | |
| <dd data-magellan-arrival="page3"><a href="#page3">喂养方式</a></dd> | |
| <dd data-magellan-arrival="page4"><a href="#page4">杀年猪</a></dd> | |
| <dd data-magellan-arrival="page5"><a href="#page5">丰富营养</a></dd> | |
| <dd data-magellan-arrival="page6"><a href="#page6">宴请宾客</a></dd> | |
| <dd data-magellan-arrival="page7"><a href="#page7">为什么选择我们</a></dd> | |
| <dd data-magellan-arrival="page8"><a href="#page8">立即报名</a></dd> | |
| </dl> | |
| </div> | |
| <div class="zhub"> | |
| <div class="zhubt"> | |
| <div class="zhutop" data-magellan-destination="page1"><a name="page1" ></a><img src="images/zhu1.jpg" /> </div> | |
| <div class="zhutop" data-magellan-destination="page2"><a name="page2" ></a><img src="images/zhu2.jpg" /> </div> | |
| <div class="zhutop" data-magellan-destination="page3"><a name="page3" ></a><img src="images/zhu3.jpg" /> </div> | |
| <div class="zhutop" data-magellan-destination="page4"><a name="page4" ></a><img src="images/zhu4.jpg" /> </div> | |
| <div class="zhutop" data-magellan-destination="page5"><a name="page5" ></a><img src="images/zhu5.jpg" /> </div> | |
| <div class="zhutop" data-magellan-destination="page6"><a name="page6" ></a><img src="images/zhu6.jpg" /> </div> | |
| <div class="zhutop" data-magellan-destination="page7"><a name="page7" ></a><img src="images/zhu7.jpg" /> </div> | |
| <div class="zhutop" data-magellan-destination="page8"><a name="page8" style="display:block;background:#f00;margin-bottom:100px;margin-top:-120px;height:20px;" ></a><img src="images/zhu8.jpg" /> </div> | |
| <div class="ship"> | |
| <video height="700" width="1200" src="http://myxingfuxi.com/test/yezhu/images/yezhu.mp4" controls=""></video> | |
| </div> | |
| </div> | |
| </div> |
demo如下：http://myxingfuxi.com/test/yezhu/
评论