jquery实现百度经验步骤吸顶轴滚动效果代码-html代码-BFW代码库

jquery实现百度经验步骤吸顶轴滚动效果代码

代码语言：html

代码描述：jquery实现百度经验步骤吸顶轴滚动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE HTML>
<html>
<head>

    <meta charset="utf-8">

    <style type='text/css'>
        body {
            background: white;
            padding:30px;
        }
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        #header {
            width: 1071px;
            height:30px;
            margin: 0 auto;
        }
        #content {
            width: 1071px;
            margin: 10px auto;
        }
        #main {
            width: 680px;
            font-family: 'Microsoft yahei';
        }
        #main h2 {
            font-weight: normal;
            font-size: 22px;
            color: rgba(50,50,50);
            line-height: 40px;
            border-bottom: 1px solid #ddd;
        }
        #main ol {
            margin: 30px 0 0 18px;
        }
        #main ol li {
            width: 630px;
            border-left: 2px dotted #ddd;
            position: relative;
            padding-left: 30px;
        }
        #main ol li .main_step {
            width: 32px;
            height: 32px;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/5ff3c3d33cba2.png);
            background-position: 0px -34px;
            color: #fff;
            text-align: center;
            line-height: 32px;
            position: absolute;
            left: -16px;
        }
        #main ol li .main_step.on {
            background-position: 0px 0px;
        }
        #main ol li p {
            line-height: 25px;
            margin-bottom: 15px;
        }
        #main ol li img {
            padding-bottom: 35px;
            display: block;
        }
        #top {
            width: 100%;
            min-width: 1071px;
            height: 40px;
            background: white;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9;
            border-bottom: 1px solid #ddd;
            box-shadow: 0 2px 5px #ddd;
        }
        #slide {
            width: 32px;
            position: fixed;
            top: 42px;
            margin-left: 4px;
            background: #fff;
        }
        #slide ul li {
            width: 32px;
            height: 32px;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/5ff3c3d33cba2.png);
            background-position: 0px 32px;
            color: #fff;
            text-align: center;
            line-height: 32px;
            display: none;
            cursor: pointer;
        }
        #slide ul li.on,#slide ul li.hover {
            background-position: 0px 0px;
        }

    </style>
</head>
<body>


    <div id="header">
        LOGO
    </div>
    <div id="top">
        LOGO
    </div>

    <div id="content">
        <div id="main">
            <h2>方法/步骤</h2>
            <ol>
                <li>
                    <div class="main_step on">
                        1
                    </div>
                    <p>
                        试用后油法，将面团揉成团，面包机30分钟即可！牛奶要用凉的，因为面包机揉面温度较高！
                    </p>
                    <img src='//repo.bfw.wiki/bfwrepo/image/5d653ba895333.png' />
                </li>
                <li>
                    <div class="main_step">
                        2
                    </div>
                    <p>
                        揉好的面团，用手抻开可以抻成薄一些的膜，有一定的扩展性！
                    </p>
                    <img src='//repo.bfw.wiki/bfwrepo/image/5d653ba895333.png' />
                </li>
                <li>
                    <div class="main_step">
                        3
                    </div>
                    <p>
                        然后揉成团，放入面包机中就行第一次发酵，发酵约1小时，是原面团的2倍大！用手按下去无回缩就证明发酵好了！
                    </p>
                    <img src='//repo.bfw.wiki/bfwrepo/image/5d653ba895333.png' />
                </li>
                <li>
                    <div class="main_step">
                        4
                    </div>
                    <p>
                        发酵好的面团排气揉光滑，称重
                    </p>
                    <img src="img/4.jpg" />
                </li>
                <li>
            .........完整代码请登录后点击上方下载按钮下载查看