<!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. GridControl事件

    private void gridView1_RowCellClick(object sender, DevExpress.XtraGrid.Views.Grid.RowCellClickEventA ...

  2. How to set window title name on Oracle EBS Form?

    --1. 置換掉原來Winodw Property上的Title String ex. SET_WINDOW_PROPERTY('XXDII_INV_MISC_TXN_V',TITLE,:misc_t ...

  3. Unity3D 手游开发中所有特殊的文件夹

    这里列举出手游开发中用到了所有特殊文件夹. 1.Editor Editor文件夹可以在根目录下,也可以在子目录里,只要名子叫Editor就可以.比如目录:/xxx/xxx/Editor  和 /Edi ...

  4. opencv Mat 像素操作

    1 cv::Mat cv::Mat是一个n维矩阵类,声明在<opencv2/core/core.hpp>中.   class CV_EXPORTS Mat { public: //a lo ...

  5. 万里长征第二步——django个人博客（第二步 ——日志记录器）

    定义日志记录器 可以在setting.py里设置日志记录器 # 自定义日志输出信息 LOGGING = { 'version': 1, 'disable_existing_loggers': True ...

  6. 支持向量机SVM 简要推导过程

    SVM 是一块很大的内容,网上有写得非常精彩的博客.这篇博客目的不是详细阐述每一个理论和细节,而在于在不丢失重要推导步骤的条件下从宏观上把握 SVM 的思路. 1. 问题由来 SVM (支持向量机) ...

  7. idea autoscroll from source

  8. WPF使用ARCGIS App文件配置Cs后台文件

    using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...

  9. redis学习笔记——初始化

    初始化服务器状态结构 redis中一个最重要的数据结构是redis_server,会创建一个这个结构的全局变量server,初始化服务器的第一步就是创建一个struct redisServer类型的实 ...

  10. 前端性能优化：使用Array.prototype.join代替字符串连接

    来源:GBin1.com 有一种非常简单的客户端优化方式,就是用Array.prototype.join代替原有的基本的字符连接的写法.在这个系列的第一篇中,我在代码中使用了基本字符连接: htmlS ...