<!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. [Luogu1462]通往奥格瑞玛的道路

    题目大意: 一个n个点,m条边的图,每个边有一个边权,每个点也有一个点权. 现在要找一条从1到n的路径,保证边权和不超过b的情况下,最大点权尽量小. 问最大点权最小能是多少? 思路: 二分答案,然后D ...

  2. Android工具：Hierarchy Viewer

    Hierarchy Viewer 用途: 即可以用来优化自己的布局,也可以用来参考别人优秀的布局 打开方式: 运行工程,然后在\android-sdk-windows\tools目录下双击hierar ...

  3. Linux使用pyVLfeat库做Dense sift提示段错误（segmentation fault）详细分析

    pyVLfeat是著名的图像处理库VLFeat在python上的接口包.在linux环境下使用该库提示“段错误”.百度后得知: 所谓的段错误就是指访问的内存超出了系统所给这个程序的内存空间 意思其实就 ...

  4. NHibernate官方文档中文版-框架架构（Architecture）

    总体概览 一个非常高层次的NHibernate架构: 这个图展示了NHibernate使用数据库和配置信息来为应用程序提供持久化服务(和持久化对象). 我们想展示一个更加详细的运行时架构.但是NHib ...

  5. c/c++代码的unit-test中覆盖率的统计

    gcov lcov genhtml工具      gcov伴随gcc 发布.gcc编译加入-fprofile-arcs -ftest-coverage 参数生成二进制程序,执行测试用例生成代码覆盖率信 ...

  6. 详解MySQL性能优化（二）

    http://www.jb51.net/article/70530.htm 七.MySQL数据库Schema设计的性能优化高效的模型设计 适度冗余-让Query尽两减少Join 大字段垂直分拆-sum ...

  7. synchronized-异常

    对于web应用程序,异常释放锁的情况,很可能对你的应用程序业务逻辑产生必要严重的错误,比如:执行某个队列任务,很多对象都会去等待第一个对象正常执行的结果返回再次去释放锁,那么其中摸个对象发生执行异常了 ...

  8. leetcoder-50-Pow(x, n)

    Pow(x, n) 能够直接用库函数pow(x,n)一步搞定,但明显这样就没意思了.   參考   快 速 幂 取 模 二分.复杂度为O(logn) 递归方法 class Solution { pub ...

  9. ExtJS初学笔记---Ext.Msg.alert无效果

    最近开始学ExtJS,书上的第一个例子是: 1 2 3 Ext.onReady(function(){     Ext.Msg.alert('Hello.', 'Hello'); }); 这个是Ext ...

  10. LINUX之内网渗透提权

    在渗透测试过程中,经常遇到如下情形,内部网络主机通过路由器或者安全设备做了访问控制,无法通过互联网直接访问本地开放的服务,Windows方 面,国内通常选择Lcx.exe来进行端口转发,在应用方面大多 ...