Question

我正在制作一个我做过固定页脚的网站，这是我以前从未做过的。我从本教程获得了基本代码：http://tutorialzine.com/2013/08/slideout-footer-css/链接在那里工作但是因为我的网站也有一个固定标题它有点混乱。链接不可移动或可点击。 如何使我的链接可以点击当我甚至将代码复制到链接以检查链接是否有效时，它们并没有起作用，然后它们也没有。

部首：

<header>
            <nav>
            <div class="FSG-box">
                <img id="FSG-logo" src="imgs/FSG.png"/>
            </div>
            <ul class="menu">
                <a href=""><li><strong>Home</strong></li></a>
                <a href=""><li>partners</li></a>
                <a href=""><li>education</li></a>
                <a href=""><li>about</li></a>
                <a href=""><li>contact</li></a>
            </ul>
            </nav>
        <section id="intro">

            <div class="transparent">           
        </div>
        <div class="boxhome">
        <h1>Welcome at the Food Safety Group</h1>
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        </div>
        </section>

</header>

标题CSS：

    section {
        overflow: hidden; height: 900px;
    }

    nav{
        width: 100%;
        height: 100px;
        background-color: #f4f4f4;
        left: 0;
        top: 0;
        position: fixed;
        z-index: 10000;
    }
    .menu{
        float: right;
        position: relative;
        right: 100px;
        top:15px;
    }

    .menu li:hover 
    {
        -webkit-transform:scale(1.3);
    transform:scale(1.3);
    }

    .menu li{
        color: #000;
        font-weight: 300;
        list-style: none;
        text-decoration: none;
        float: left;
        margin-left: 25px;
        font-size: 18px;
        -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
 }


    #FSG-logo{
        position: absolute;
        top:13px;
        left:13px;
        max-width:450px;
    }


    .transparent {
        position: absolute;
        background-color: #000;
        opacity: 0.625;
        filter: alpha(opacity=60); /* For IE8 and earlier */
        width: 100%;
        height: 100%;

    }

    .boxhome:hover{
        -webkit-transform:scale(1.05);
    transform:scale(1.05);
    height: 100%;
    }


    .boxhome {
        width:100%;
        margin:0 auto;
            -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    }

    #intro { 
         z-index: 10;
           /* sets it above .slide1  */
        /* this pushes it below .slide1 in the scroll */
        min-height:1100px;
        max-height: 1200px;
        position: absolute;
        width: 100%;
        left: 0;
        top:0;

        background: url(../imgs/kassen.jpg);
    }

        #intro h1 {
            font-size: 36pt;
            text-align:center;
            position: relative;
            font-weight: 400;
            top:320px;
        }

页脚+ Div高于HTML：

    <article class="result">
                    <div class="transparent2">

                    </div>
                    <div class="power">
                    <h2>The result of a well organized group</h2>
                    <h3>The six partners in this group can supply all automation required to produce a plant, harvest the product and supply the product safe and sound to the supermarket.</h3>
                    </div>
    </article>
<footer>
    <ul>
        <li>
            <p class="home">Where to Find Us</p>
            <ul>
                <li><a href="">Visser Horti Systems</a></li>
                <li><a href="">Postoffice box 5103</a></li>
                <li><a href="">3295 ZG 's-Gravendeel</a></li>
                <li><a href="">The Netherlands</a></li>
            </ul>
        </li>
        <li>
            <p class="services">Sign up for our News Letter</p>

            <ul>
                <li><a href="#">3D modeling</a></li>
                <li><a href="#">Web development</a></li>
                <li><a href="#">Mobile development</a></li>
                <li><a href="#">Web &amp; Print Design</a></li>
            </ul>
        </li>
        <li>
            <p class="reachus">Reach us</p>

            <ul>
                <li><a  style="cursor: pointer;" href="http://www.google.com/maps/ms?ie=UTF8&amp;hl=nl&amp;msa=0&amp;msid=117943608112586518975.00000111c1da021ca60eb&amp;om=1&amp;t=h&amp;z=17&amp;ll=51.787568" target="_blank">Google Maps</a></li>
                <li><a href="#">Phone: +31 (0) 78 673 9800</a></li>
                <li><a href="#">Fax: +31 (0) 78 673 3434</a></li>
                <li><a href="mailto:info@visser.eu">info@visser.eu</a></li>


            </ul>
        </li>

    </ul>

</footer>

页脚CSS：

.result {
    min-height: 750px;
width: 100%;
left: 0px;
position: absolute;
background: url('../imgs/result.jpg') no-repeat scroll center center transparent;
top: 2830px;
z-index:1;
}

footer{
    height:400px;
    width: 100%;
    position: relative;
    z-index:-2;
    background-color: #303030;

}


footer > ul{
    width:50%;
    position:fixed;
    left:50%;
    bottom:0;
    margin-left:-480px;
    padding-bottom: 200px;
    z-index:-1;
}

footer > ul > li{

    width:33.3%;
    float:left;
}

footer ul{
    list-style: none;
}

/* The links */

footer > ul > li ul li{
    text-transform: uppercase;
    font-weight:bold;
    line-height:1.8;
}

footer > ul > li ul li a{
    text-decoration: none !important;
    color: #fff !important;
}

footer > ul > li ul li a:hover{
    color:#fff !important;
}

footer a.logo{
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    text-transform: uppercase;
    margin-left: 16px;
    display: inline-block;
    margin-top: 7px;
}

footer a.logo i{
    font-style: normal;
    position: absolute;
    width: 60px;
    display: block;
    left: 48px;
    top: 18px;
    font-size: 12px;
    color: #fff;
}

footer a.logo:before{
    content: '';
    display: inline-block;
    background: url('../img/sprite.png') no-repeat -19px -70px;
    width: 48px;
    height: 37px;
    vertical-align: text-top;
}

footer p{
    width: 90%;
    margin-right: 10%;
    padding: 9px 0;
    line-height: 18px;
    background-color: #058cc7;
    font-weight: bold;
    font-size: 14px;
    color:#fff;
    text-transform: uppercase;
    text-shadow: 0 1px rgba(0,0,0,0.1);
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    margin-bottom: 20px;
    opacity:0.9;
    cursor:default;

    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

footer > ul > li:hover p{
    opacity:1;
}

footer p:before{
    content: '';
    display: inline-block;
    background: url('../img/sprite.png') no-repeat;
    width: 16px;
    height: 18px;
    margin: 0 12px 0 15px;
    vertical-align: text-bottom;
}

footer p.home{
    background-color: #F58020;
}

footer p.home:before{
    background-position: 0 -110px;
}

footer p.services{
    background-color: #F58020;
}

footer p.services:before{
    background-position: 0 -129px;
}

footer p.reachus{
    background-color: #F58020;
}

footer p.reachus:before{
    background-position: 0 -89px;
}

Answer 1

像z-index这样的所有div上的

.result修复了问题

固定页脚中的链接不可点击

1 个答案: