>웹 프론트엔드 >HTML 튜토리얼 >急~急~急跪求大神,链接被遮挡,无法点击_html/css_WEB-ITnose

急~急~急跪求大神,链接被遮挡,无法点击_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:48:551261검색

跪求大神,链接被遮挡,无法点击,现在提供css样式和网页代码,万分感谢!
CSS:

@charset "utf-8";*{margin:0;padding:0;}body, html{width:100%;height:100%;}body{background:url("../images/body_bg.jpg") repeat-x;} #mainBody{position:relative;width:100%;height:100%;}.cloud{position:absolute;top:-110px;left:0px;width:100%;height:100%;background:url("../images/cloud.png") no-repeat;opacity:0.8;}     #cloud2{}#weather{background:url(../images/sun.png) no-repeat;border-radius:90px;width:150px;height:150px;position:absolute;left:1130px;top:0px;}#logo{position:absolute;top:0px;left:0px;background:url("../images/logo.png") no-repeat;opacity:0.8;}     #weather img{margin:30px -90px;}#content { }#content p { margin:20px; }#menu { margin:40px 0 0 150px; }#menu ul { list-style:none; }#menu ul li { display:inline; float:left; margin-bottom:20px; }#menu ul li:first-child a { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius:12px; }#menu ul li:last-child a { -moz-border-radius-topright: 12px; -webkit-border-top-right-radius:12px; }#menu ul li a { padding:20px; background: rgba(255,138,30,0.3); text-decoration: none; font: bold 14px Helvetica, Sans-Serif; letter-spacing: -1px; color: #402e16;	text-shadow: #eee 0px 0px 2px; }	#menu ul li a:hover { -moz-box-shadow: 0 -5px 10px #777; -webkit-box-shadow: 0 -5px 10px #777;	background: -webkit-gradient(		linear, right bottom, left top, color-stop(0, rgb(237,227,112)), color-stop(0.72, rgb(255,173,10))) !important;	background: -moz-linear-gradient(		right bottom, rgb(237,227,112) 0%, rgb(255,173,10) 72%) !important;	background-color:rgb(255,173,10) !important;	-moz-opacity:.90; filter:alpha(opacity=90); opacity:.90; }#menu ul li a.active { background: rgba(255,138,30,0.8) !important; }



网页代码:
<div id="wrapper">	<div id="content">			<div id="menu">				<ul>					<li><a href="#" title="首页">首页</a></li>					<li><a href="http://www.baidu.com" target="_blank" title="个人主页" class="active">个人主页</a></li>					<li><a href="http://www.baidu.com" target="_blank" title="个人主页">个人主页</a></li>					<li><a href="http://www.baidu.com" target="_blank" title="个人主页">个人主页</a></li>					<li><a href="http://www.baidu.com" target="_blank" title="个人主页">个人主页</a></li>					<li><a href="http://www.baidu.com" target="_blank" title="个人主页">个人主页</a></li>					<li><a href="http://www.baidu.com" target="_blank" title="个人主页">个人主页</a></li>					<li><a href="http://www.baidu.com" target="_blank" title="个人主页">个人主页</a></li>				</ul>			</div>	</div></div><div id="mainBody">    <div id="cloud1" class="cloud"></div>    <div id="cloud2" class="cloud"></div></div><div id="weather"><img  src="images/cloud.png"    style="max-width:90%" alt="急~急~急跪求大神,链接被遮挡,无法点击_html/css_WEB-ITnose" ></div><div id="logo" style="text-align:center; top:180px; left:550px;"><img  src="images/cloud.png"    style="max-width:90%" alt="急~急~急跪求大神,链接被遮挡,无法点击_html/css_WEB-ITnose" ></div>


回复讨论(解决方案)

#wrapper{position: absolute;z-index: 222222;}

#weather{background:url(../images/sun.png) no-repeat;border-radius:90px;width:150px;height:150px;position:absolute;left:1130px;top:0px;position: absolute;z-index:222222;}

楼上大神,我把#weather改成什么这样,链接还是点击不了啊

# wrapper{position: absolute;z-index: 222222;}

楼上的大神是什么意思啊?????
#weather{background:url(../images/sun.png) no-repeat;border-radius:90px;width:150px;height:150px;left:1130px;top:0px;position: absolute;z-index:222222;}

如果在上面的#weather里面去掉background:url(../images/sun.png) no-repeat;border-radius:90px;width:150px;height:150px;left:1130px;top:0px;,我其他又不正常了呀,跪求正确的解决方法。万分的感激!

@charset "utf-8";*{margin:0;padding:0;}body, html{width:100%;height:100%;}body{background:url("../images/body_bg.jpg") repeat-x;} #mainBody{position:relative;width:100%;height:100%;}.cloud{position:absolute;top:-110px;left:0px;width:100%;height:100%;background:url("../images/cloud.png") no-repeat;opacity:0.8;}     #cloud2{}#weather{background:url(../images/sun.png) no-repeat;border-radius:90px;width:150px;height:150px;position:absolute;left:1130px;top:0px;}#logo{position:absolute;top:0px;left:0px;background:url("../images/logo.png") no-repeat;opacity:0.8;}     #weather img{margin:30px -90px;} #content { }#content p { margin:20px; }#menu { margin:40px 0 0 150px; }#menu ul { list-style:none; }#menu ul li { display:inline; float:left; margin-bottom:20px; }#menu ul li:first-child a { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius:12px; }#menu ul li:last-child a { -moz-border-radius-topright: 12px; -webkit-border-top-right-radius:12px; }#menu ul li a { padding:20px; background: rgba(255,138,30,0.3); text-decoration: none; font: bold 14px Helvetica, Sans-Serif; letter-spacing: -1px; color: #402e16;    text-shadow: #eee 0px 0px 2px; }   #menu ul li a:hover { -moz-box-shadow: 0 -5px 10px #777; -webkit-box-shadow: 0 -5px 10px #777;    background: -webkit-gradient(        linear, right bottom, left top, color-stop(0, rgb(237,227,112)), color-stop(0.72, rgb(255,173,10))) !important;    background: -moz-linear-gradient(        right bottom, rgb(237,227,112) 0%, rgb(255,173,10) 72%) !important;    background-color:rgb(255,173,10) !important;    -moz-opacity:.90; filter:alpha(opacity=90); opacity:.90; }#menu ul li a.active { background: rgba(255,138,30,0.8) !important; }#wrapper{position: absolute;z-index: 222222;}

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.