您所在的位置:小祥子 » 编程 » CSS » 正文

纯CSS弹出层,城市切换效果

时间:2015-04-26 编辑:休闲生活文化 来源:本站整理

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>纯CSS弹出层效果</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<style type="text/css">
.f_l {float:left;}
.f_r {float:right;}
.city {height:60px;padding-left:10px;text-align:center;}
.city_now {width:60px;padding-top:20px;color:#595756;font-size:16px;letter-spacing:3px;font-weight:bold;}
.city_box {text-align:center;}
.city_box span {vertical-align:bottom;}
.city_nav {text-align:center;height:18px;line-height:18px;color:#333;cursor:pointer;overflow:hidden;display:inline-block;}
.city_hover {color:#f25000;height:18px;line-height:18px;overflow:hidden;}
.city_link {background:#FFFFFF;border:#f25000 2px solid;width:305px;display:none;z-index:9999;}
.city_hovers {display:block;position:absolute;}
.city_links {width:60px;margin-right:1px;height:30px;line-height:30px;font-size:13px;text-align:center;background:#f6f6f6;vertical-align:top;margin-bottom:1px;display:inline-block;}
.city_show {background:#ccc;height:18px;line-height:18px;padding:5px;cursor:pointer;}
</style>
<body>
<div class="city f_l">
<div class="city_now">北京</div>
<div class="city_swich">
<span class="city_nav" id="city_nav" >[切换城市]</span></div><!


-- onmouseover= /vs/onclick= -->
<div id="city_link" class="city_link">
<div class="city_show"><span class="f_red f_r" href="javascript:;" title="关闭窗口" >[关闭]</span><span class="f_l f_red"><a href="{$EXT[wap_url]}" target="_blank">欢迎使用!</a></span></div>
<a class="city_links"
href="#" >全国</a><a class="city_links" href="#" >北京</a><a class="city_links"


href="#" >上海</a><a class="city_links" href="#" >深圳</a><a class="city_links"


href="#" >广州</a><a class="city_links" href="#" >西安</a><a class="city_links"


href="#" >杭州</a><a class="city_links" href="#" >长沙</a><a class="city_links"


href="#" >重庆</a><a class="city_links" href="#" >宁波</a><a class="city_links"


href="#" >成都</a><a class="city_links" href="#" >青岛</a><a


class="city_links" href="#" >南京</a><a class="city_links" href="#" >昆明


</a><a class="city_links" href="#" >武汉</a><a class="city_links" href="#" >天


津</a><a class="city_links" href="#" >合肥</a><a class="city_links" href="#" >


郑州</a><a class="city_links" href="#" >沈阳</a><a class="city_links" href="#" >大连</a><a class="city_links" href="#" >福州</a><a class="city_links" href="#" >苏州</a><span class="city_links">
</span><span class="city_links"></span><span class="city_links"></span>
</div>
</div>
<div>http://www.999jiujiu.com/</div>
</body>
</html>

关键词:CSS 弹出 效果