Home >Web Front-end >HTML Tutorial >Urgent~ Urgent~ I am begging God, the link is blocked and cannot be clicked_html/css_WEB-ITnose

Urgent~ Urgent~ I am begging God, the link is blocked and cannot be clicked_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:48:551260browse

I pray to God, the link is blocked and cannot be clicked. Now we provide css style and web page code. Thank you very much!
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; }



Web code:
<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" width="300"></div><div id="logo" style="text-align:center; top:180px; left:550px;"><img src="images/cloud.png" width="300"></div>


Reply to discussion (solution)

#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;}

Sir, I changed #weather to something like this, but the link still cannot be clicked.

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

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

If you remove background:url(../images/sun.png) in #weather above no-repeat;border-radius:90px;width:150px;height:150px ;left:1130px;top:0px;, my other problems are not normal again, I beg for the correct solution. Extremely grateful!

@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;}

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn