<!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" onclick="this.className='city_nav city_hover';document.getElementById('city_link').className='city_link city_hovers'">[切换城市]</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="关闭窗体" onclick="document.getElementById('city_nav').className='city_nav';document.getElementById





('city_link').className='city_link';return !1;">[关闭]</span><span class="f_l f_red"><a href="{$EXT[wap_url]}" target="_blank">欢迎使用！</a></span></div>

<a class="city_links" 

href="#" onclick="M.goExpr('city_eelou_id','0');return false;">全国</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','1');return false;">北京</a><a class="city_links" 





href="#" onclick="M.goExpr('city_eelou_id','2');return false;">上海</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','3');return false;">深圳</a><a class="city_links" 





href="#" onclick="M.goExpr('city_eelou_id','4');return false;">广州</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','5');return false;">西安</a><a class="city_links" 





href="#" onclick="M.goExpr('city_eelou_id','6');return false;">杭州</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','7');return false;">长沙</a><a class="city_links" 





href="#" onclick="M.goExpr('city_eelou_id','8');return false;">重庆</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','9');return false;">宁波</a><a class="city_links" 





href="#" onclick="M.goExpr('city_eelou_id','10');return false;">成都</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','11');return false;">青岛</a><a 





class="city_links" href="#" onclick="M.goExpr('city_eelou_id','12');return false;">南京</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','13');return false;">昆明





</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','14');return false;">武汉</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','15');return false;">天





津</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','16');return false;">合肥</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','17');return false;">





郑州</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','18');return false;">沈阳</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','19');return 





false;">大连</a><a class="city_links" href="#" onclick="M.goExpr('city_eelou_id','20');return false;">福州</a><a class="city_links" href="#" onclick="M.goExpr





('city_eelou_id','21');return false;">苏州</a><span class="city_links">

</span><span class="city_links"></span><span class="city_links"></span>

</div>

</div>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

纯CSS弹出层，城市切换效果的更多相关文章

  1. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  2. css 弹出层-透明层

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 纯CSS弹出菜单（不支持IE6.0以下）

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  4. jquery实现弹出层完美居中效果

    代码如下: showDiv($("#pop"));function showDiv(obj){ $(obj).show(); center(obj); $(window).scro ...

  5. DIV JS CSS 轻量级弹出层 兼容各浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JavaScript弹出层

    1.这个弹出层就是一个DIV 2.看需要什么效果 2.1.如果是仅仅需要弹出层,而背后的网页同样可以点击,那么只需要一个DIV即可,效果如图: 2.2.需要一层透明背景,而后面的网页只能看不能点,效果 ...

  7. JS 弹出层 定位至屏幕居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 69.js--点击事件等比例弹出层div

    html:<!--弹出层导航栏--> <div class="public-nav-content"> <ul> <li><a ...

  9. div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

随机推荐

  1. [转]115个Java面试题和答案——终极列表（下）

    第一篇讨论了面向对象编程和它的特点,关于Java和它的功能的常见问题,Java的集合类,垃圾收集器,本章主要讨论异常处理,Java小应用程序,Swing,JDBC,远程方法调用(RMI),Servle ...

  2. [转]提示错误 package javax.servlet.jsp does not exist package javax.servletr.jsp.tagext does not exist

    你在JAVA servlet容器运行的时候没配置servlet-api.jar,tools.jar,rt.jar,jsp-api.jar的classpath 我的classpath= .;%JAVA_ ...

  3. HDU 4635 Strongly connected （2013多校4 1004 有向图的强连通分量）

    Strongly connected Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  4. Matlab中如何读取.dat文件

    处理movielens1M数据集 中间有个双冒号,直接用load的只读取第一列,这时候我们可以用dlmread(中间是l不是i),如下图,只需要提取1 3 5列就好了.

  5. 微服务：spring-cloud-archaius 起步

    原文:http://blog.csdn.net/qq_18675693/article/details/53337941 微服务:spring-cloud-archaius 起步 原创 2016年11 ...

  6. TWinHTTP

    TWinHTTP USES SynCrtSock procedure hget(const url: string; var ResponseCode: Integer; var ResponseHe ...

  7. this和$(this)的关系

    环境关键字this引用的是DOM元素 $(this)是jQuery对象 下面点击按钮分别alert一下 alert(this); alert($(this)); 获取DOM对象的属性id,可以 $(t ...

  8. 某游戏研究之字符过滤类-WorldFilter

    所谓字符过滤器,常常用在聊天的内容,比如一连串的骂人难听的话,我们要屏蔽掉,避免造成不好的东西! 当然我作为中华天朝一个有文明有素质的人,肯定偶尔会做这样的事情啦,特别是打LOL的时候,算了不讲了,都 ...

  9. OpenShift应用镜像构建(1) S2I tomcat 镜像定制

    参考并感谢https://www.jianshu.com/p/fd3e62263046 在对接项目制作应用镜像的过程中,经常发现避免不了的是需要写Dockerfile,(当然另外一种方式是直接run一 ...

  10. OSG 中文解决方案 【转】

    概述 本文只限于 windows 环境下. OSG 在 windows 下对中文支持已经非常的好了,但是可能很多人并不知道如何去正确的使用.为了解决这些常见的问题,还有一些基础知识的普及.特此把 OS ...