<!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. [POJ3728]The merchant

    题目大意: 给你一棵n个结点的带权树,有q组询问,问你从u到v的路径上最大值与最小值的差(最大值在最小值后面). 思路: 首先考虑路径上合并两个子路径u->t和t->v时的情况. 假设我们 ...

  2. 二叉搜索树BStree

    二叉搜索树,实际上是有点类似于二分查找.实际上很简单,就是递归.直接上代码,有点要注意的就是删除的时候,如果是左子树和右子树都存在的话,要寻找继承者(successor). import java.u ...

  3. 20172333 2017-2018-2 《Java程序设计》第2周学习总结

    20172333 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 1.了解print与println的用法区别. 2.有关于"+"的基本用 ...

  4. struts2和spring整合错误 org.springframework.beans.factory.BeanCreationException，已解决

    先贴上错误 2018-8-16 23:41:10 org.springframework.context.support.ClassPathXmlApplicationContext prepareR ...

  5. PHP5.3魔术方法 __invoke

    这个魔幻方法被调用的时机是: 当一个对象当做函数调用的时候, 如果对象定义了__invoke魔幻方法则这个函数会被调用, class Callme { public function __invoke ...

  6. [转] SSH配置之web.xml

    在项目中总会遇到一些关于加载的优先级问题, 首先可以肯定的是,加载顺序与它们在 web.xml 文件中的先后顺序无关.即不会因为 filter 写在 listener 的前面而会先加载 filter. ...

  7. JavaScript 巧学巧用

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来, ...

  8. CDHtmlDialog 基本使用

    跳转 Navigate("res://tt.exe/#138"); 138是html的资源号 输入框的Get,set HRESULT CTTDlg::OnButtonCancel( ...

  9. windows环境phpstorm调试环境搭建

    一:安装设置xdebug 这个一般有两个步骤1:浏览器的xdebug插件安装,一般用firefox的插件,chrome好像不太好使,chrome安装后的  效果 安装后如下图所示,需要配置IDEKEY ...

  10. [Python爬虫] 之九：Selenium +phantomjs抓取活动行中会议活动（单线程抓取）

    思路是这样的,给一系列关键字:互联网电视:智能电视:数字:影音:家庭娱乐:节目:视听:版权:数据等.在活动行网站搜索页(http://www.huodongxing.com/search?city=% ...