演 示 下 载

近日搜狐推出了一款可视化快速建站工具——搜狐快站，利用该工具站长可通过在线的可视化页面编辑器简单生成自己的移动端站点。是继百度siteapp，腾讯风铃后又一互联网巨头推出的自助移动建站工具。

搜狐快站的页面效果还不错，也是采用时下比较流行的全屏设计（其实只是图片而已），今天 dowebok 试着用 fullPage.js 制作这个页面效果。

制作方法

1、HTML

左边放 logo 及菜单，右边放图片。

<div id="side">
    <div class="inner">
        <div class="hgroup">
            <h1><a href="###">搜狐快站</a></h1>
            <h2>专业的移动建站平台</h2>
        </div>
        <a class="start" href="###">开始建站</a>
    </div>
    <ul id="menu">
        <li class="active" data-menuanchor="page1">
            <a class="a1" href="#page1" title="快速创建移动站点">快速创建移动站点</a>
        </li>
        <li data-menuanchor="page2">
            <a class="a2" href="#page2" title="丰富的模板">丰富的模板</a>
        </li>
        <li data-menuanchor="page3">
            <a href="#page3" href="#page3" title="强大的功能组件">强大的功能组件</a>
        </li>
        <li data-menuanchor="page4">
            <a href="#page4" href="#page4" title="多种屏幕预览">多种屏幕预览</a>
        </li>
        <li data-menuanchor="page5">
            <a href="#page5" title="全网告诉访问">全网告诉访问</a>
        </li>
    </ul>
</div>

<div class="section">
    <div class="imgbox">
        <img src="images/img1.png" alt="快速创建移动站点">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="images/img2.png" alt="丰富的模板">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="images/img3.png" alt="强大的功能组件">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="images/img4.png" alt="多种屏幕预览">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="images/img5.png" alt="全网告诉访问">
    </div>
</div>

2、CSS

我们用 position:fixed 固定左栏、logo 以及菜单，并且给菜单加上背景图片。

#side { position: fixed; left: 0; top: 0; z-index: 10; width: 300px; height: 100%; background-image: url(//s0.zhan.sohu.com/images/df-side.png);}
.inner { position: absolute; left: 50%; top: 50%; width: 226px; margin: -112px 0 0 -113px;}
.hgroup { width: 226px; height: 81px; margin: 0 auto; text-indent: -9999px; background-image: url(//s0.zhan.sohu.com/images/df-logo.png);}
.start { display: block; width: 186px; height: 56px; margin: 66px auto 0; text-indent: -9999px; overflow: hidden; background-image: url(//s0.zhan.sohu.com/images/df-start.png);}
#menu { position: absolute; right: -20px; top: 50%; width: 40px; margin-top: -170px; padding: 0; list-style-type: none;}
#menu li { float: left;}
#menu a { display: block; width: 28px; height: 28px; margin: 20px 6px; border-radius: 14px; text-indent: -9999px; overflow: hidden; background-color: #a0afb9; background-position: 50%; background-repeat: no-repeat;}
#menu .a1 { background-image: url(//s0.zhan.sohu.com/images/df-01.png);}
#menu .a2 { background-image: url(//s0.zhan.sohu.com/images/df-02.png);}
#menu .a3 { background-image: url(//s0.zhan.sohu.com/images/df-03.png);}
#menu .a4 { background-image: url(//s0.zhan.sohu.com/images/df-04.png);}
#menu .a5 { background-image: url(//s0.zhan.sohu.com/images/df-05.png);}
#menu a:hover, #menu .active a { margin: 14px 0; border: 6px solid #fff; box-shadow: 1px 1px 3px 1px #b4d7ed; border-radius: 20px; background-color: #239ae6;}
.section { margin-left: 300px; text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
.section .imgbox { margin-left: 300px;}
.section img { position: relative; left: -300px; display: block; margin: 0 auto;}

3、JavaScript

你了解 fullPage.js 的话，本例中的 JavaScript 就很简单了，设置一个背景颜色，绑定锚链接和菜单就可以了。

$(document).ready(function() {
    $.fn.fullpage({
        slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],
        menu: '#menu'
    });
});

搜狐快站目前刚刚上线，官网也是第一版，之后改版是很正常的，只是时间问题，所以你看到的搜狐快站的页面可能与本例不一样。