<!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. 1.3 （JavaScript学习笔记）JavaScript对象

    在JavaScript中所有事物都是对象,字符串.数值.数组.函数...等, JavaScript还允许自定义对象.这些在1.1中有所介绍. 一.遍历对象属性 <!DOCTYPE html> ...

  2. 活动中使用提示框（Toast）

    任务名称:活动中使用Toast 任务现象:点击button时,会弹出提示框:You Click Button 步骤 1.创建一个项目,新建活动和加载布局.参考: http://8c925c9a.wiz ...

  3. fedora19/opensuse13.1 配置openvpn client

    Date: 20140207Auth: Jin 1.install # yum -y install openvpn #zypper install openvpn 2.copy user key # ...

  4. Linux中KVM虚拟机是什么

    概念: Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linux自身的调度器进行 ...

  5. 原生js封装的一些jquery方法

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return f ...

  6. material design动画

    这是一篇material design 文档动画部分的学习! Summary: Material Design动画交互 动画速度的3个原则 3种交互方式 如何设计有意义的动画 使人高兴的动画细节 1 ...

  7. Netty游戏服务器之六服务端登录消息处理

    客户端unity3d已经把消息发送到netty服务器上了,那么ServerHandler类的public void channelRead(ChannelHandlerContext ctx, Obj ...

  8. Android 花钱 划动手指每天一元钱

    花钱(英文ColorMoney)是由上海花动传媒开发的一款免费的应用程序,现支持Android操作系统.安装花钱app后,用户将获得全新的手机锁屏背景图,其中包含各种有趣.唯美的壁纸类图片,亦包含应用 ...

  9. Windows 7下Maven3.0.3的安装

    1.去Maven官网下载zip的maven3.0.3压缩包 2.将安装包解压到某目录,我在这里解压到D:\Program Files (x86)\apache-maven-3.0.3 3.设置系统变量 ...

  10. android sdk下载SDK Platform失败记录

    在使用android sdk manager下载的时候会遇到 下载完毕后,你可能会出现如下图一样的错误,就算重复尝试多次依然无法正常安装 Downloading SDK Platform Androi ...