-1
我正在一个网站，我做了一个固定的页脚，我从来没有做过。我从本教程中获得了基本代码：http://tutorialzine.com/2013/08/slideout-footer-css/链接在那里工作，但由于我的网站也有一个固定头文件它有点混乱。这些链接不是可忍受的或可点击的。 如何让我的链接可点击这不是他们工作时，我甚至copyd代码来检查链接是否会工作，然后他们也没有。链接固定页脚不可点击
部首：
<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;
}
页脚+股利上述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 & 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&hl=nl&msa=0&msid=117943608112586518975.00000111c1da021ca60eb&om=1&t=h&z=17&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:[email protected]">[email protected]</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;
}
请粘贴一个演示链接。 – Jay
已经在一个btw上工作**注意**我知道把'z-index：-2;'设置为'1'的作品，但我需要它滑动下div – Shikez
http：//demo.tutorialzine。 com/2013/08/slideout-footer-css /最好的演示，但与工作的联系，我试着做一个小提琴，但很新的，它看起来很搞笑@Jay – Shikez