Question

伙计让我重新开始似乎没有人得到我的简单问题。在编码方面，我们并非都是Pro。请耐心等待我，我还在学习。我只是想知道你需要哪部分html / css代码才能更好地理解我想要创建的内容。

所以要描述我现在拥有的东西：

1 index.html 2 style.css

在我的网站顶部有一个背景图片，位于幻灯片容器中。菜单是一个漂浮在右侧的最小打开/关闭按钮。

现在我想使用箭头的图像文件，将其对齐在我的背景图像的中心，并使用它导航到我的网站的下一部分，称为“关于我”。我知道如何链接例如index.html到about.html文件，但在这种情况下我有一个索引文件，其中菜单按钮/部分在div和li类中链接为ahref。

所以我的问题是我需要做什么才能使箭头按钮链接到ahref“Aboutme”部分。我需要在html和css中放入此代码的内容和位置。我有很多代码可用，但请告诉我你需要哪个部分。

感谢您的帮助

<!-- HOME (SLIDER) -->
<section id="home" class="notoppadding text-light">
    <div class="section-inner">


    <!-- REVOLUTION SLIDER -->
    <div class="rev-slider-container">
        <div class="rev-slider" >
            <ul>

                <!-- THE FIRST SLIDE -->
                <li data-transition="slidedown" data-slotamount="5" data-masterspeed="1200" >
                    <!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
                    <img src="files/uploads/slider-bg1.jpg"   alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">

                    <!-- LAYER NR. 1 -->    
                    <div class="tp-caption srcaption-bigwhite lft ltb"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="0"
                    data-speed="800"
                    data-start="400"
                    data-easing="easeInOutQuad"
                    data-endspeed="800"
                    data-endeasing="easeInOutQuad"
                    style="z-index: 2"><strong></strong>
                    </div>

                </li> <!-- end first slide -->

                </li>

            </ul>

        </div>
    </div> <!-- END .rev-slider-container -->        
    <!-- REVOLUTION SLIDER -->

Answer 1

<强> jsBin demo

<a class="nextpageLink" href="#about"></a>

CSS：

.nextpageLink{
   position: absolute;
   z-index: 2;
   margin: 0 auto;
   left:0;
   right:0;
   bottom: 10px;
   width:80px;
   height:80px;
   background: url(img/next.png) 0 0 ; // 80x160px sprite image
}
.nextpageLink:hover{
   background-position: 0 -80px ;
}

让我们假设您创建一个精灵图像，并在按钮上悬停，您只需更改背景位置。

+-------+    >> 80 x (80*2) px background image
|       |
| gray  |
|       |
+-------+    >> on hover move up by -80px
|       |
| white |
|       |
+-------+

如果您不想导航到其他网页，则链接需要锚定目标页面上的ID元素：

<a class="nextpageLink" href="#about"></a>

因此您还需要与锚点相关的ID - 分配给about元素，如：

<div id="about" class="wrapper">
   <!-- ABOUT DIVS AND CONTENT HERE-->
</div>

，您的页面将滚动。

如果你想滚动动画，那么在stackoverflow上已经有很多类似的问题涉及使用JS 。 使用Goog 或StackOverflow的搜索输入。

提示：当你做一些Goog只过滤与StackOverflow相关的结果时，例如：

如何设置页面滚动动画：stackoverlfow

如何使按钮图像居中并使其导航到下一篇文章？

1 个答案: