ホームページ ウェブフロントエンド htmlチュートリアル 純粋な CSS ポップアップ レイヤー、都市切り替え効果_html/css_WEB-ITnose

純粋な CSS ポップアップ レイヤー、都市切り替え効果_html/css_WEB-ITnose

Jun 24, 2016 am 11:48 AM

<!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;">西安&lt ;/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.999jiijiu.com/"> http://www.999jiujiu.com/</A></div>
</body>
</html>

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;の目的は何ですか 要素?

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;の目的は何ですか 要素?

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか?

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? Mar 18, 2025 pm 02:51 PM

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか?

See all articles