Difference between revisions of "Team:SBS SH 112144/sandbox"

(Created page with "<html class="gr__php_cn"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>用CSS实现下拉...")
 
(Blanked the page)
Line 1: Line 1:
−
<html class="gr__php_cn"><head>
 
−
  <meta charset="utf-8">
 
−
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
−
  <title>用CSS实现下拉菜单的多种方法_经验交流-css教程-PHP中文网</title>
 
−
  <meta name="keywords" content="用CSS实现下拉菜单的多种方法">
 
−
  <meta name="description" content="用CSS实现下拉菜单的多种方法">
 
−
<meta property="article:author" content="php中文网">
 
−
<meta property="article:published_first" content=",">
 
−
<script src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c"></script><script src="http://push.zhanzhang.baidu.com/push.js"></script><script>var system={win: false,mac: false,xll: false,ipad:false};var p=navigator.platform;system.win=p.indexOf("Win")==0;system.mac= p.indexOf("Mac")==0;system.x11=(p=="X11")||(p.indexOf("Linux")==0);system.ipad=(navigator.userAgent.match(/iPad/i) != null)?true:false;if(system.win || system.mac || system.xll||system.ipad){}else{window.location.href = "http://m.php.cn/article/1128.html";}</script>
 
−
<meta name="mobile-agent" content="format=html5;url=http://m.php.cn/article/1128.html">
 
−
<meta http-equiv="Cache-Control" content="no-transform ">
 
−
<link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">
 
−
<link rel="stylesheet" href="/static/layui/css/layui.css?1">
 
−
<link rel="stylesheet" href="/static/css/style.min.css?5.1.27">
 
−
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.php.cn/article/1128.html">
 
−
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
 
−
<!--[if lt IE 9]>
 
−
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
 
−
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
 
−
<![endif]-->
 
−
  <link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css?1">
 
−
  <link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault1.css">
 
−
  <style type="text/css">
 
−
.layui-badge-dot{margin-right: 15px;width: 5px;height: 5px;background: #bbb!important}
 
−
.relevant{color: #666;}
 
−
.relevant:hover{color: #bbb}
 
−
</style>
 
−
  <script type="application/ld+json">
 
−
{
 
−
"@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld",
 
−
"@id": "http://www.php.cn/css-tutorial-1128.html",
 
−
"title": "用CSS实现下拉菜单的多种方法_经验交流",
 
−
"description": "用CSS实现下拉菜单的多种方法",
 
−
"images": [""],
 
−
"pubDate": "2016-05-16T12:09:37"
 
−
}
 
−
  </script>
 
−
<script src="http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=427662"></script><link id="layuicss-layer" rel="stylesheet" href="http://www.php.cn/static/layui/css/modules/layer/default/layer.css?v=3.1.1" media="all"><link rel="stylesheet" href="http://bdimg.share.baidu.com/static/api/css/share_style0_16.css?v=8105b07e.css"></head>
 
−
<body class="site-home" id="LAY_home" style="background-color: #eee;" data-gr-c-s-loaded="true">
 
−
<div class="layui-header header header-index">
 
−
    <div class="layui-col-md3 php-logo">
 
−
        <a href="/" target="_self" class="hide-text"></a>
 
−
    </div>
 
−
    <ul class="layui-nav php-nav">
 
−
        <li class="layui-nav-item ">
 
−
            <a href="/" title="php中文网首页">首页</a>
 
−
        </li><li class="layui-nav-item ">
 
−
            <a href="/course.html" title="视频教程">视频教程</a>
 
−
        </li>
 
−
        <li class="layui-nav-item ">
 
−
            <a href="/wenda.html" title="社区问答">社区问答</a>
 
−
        </li>
 
  
−
        <li class="layui-nav-item layui-hide-xs ">
 
−
            <a href="/dic.html" title="编程词典">编程词典<span class="layui-nav-more"></span></a>
 
−
<dl class="layui-nav-child layui-anim layui-anim-upbit">
 
−
                <dd><a href="/dic/29.html" target="_blank">php词典</a></dd>
 
−
                <dd class="layui-show-xs"><a href="/article.html" target="_blank">技术文章<span class="layui-badge-dot"></span></a></dd>
 
−
                <dd><a href="/dic/19.html" target="_blank">jquery词典</a></dd>
 
−
                <dd><a href="/php-weizijiaocheng.html" target="_blank">PHP教程</a></dd>
 
−
                <dd><a href="/dic/11.html" target="_blank">html词典</a></dd>
 
−
                <dd><a href="/xiaochengxu.html" target="_blank">小程序开发</a></dd>
 
−
                <dd><a href="/dic/17.html" target="_blank">javascript词典</a></dd>
 
−
                <dd><a href="/div-tutorial.html" target="_blank">HTML教程</a></dd>
 
−
            </dl>
 
−
        </li>
 
−
        <li class="layui-nav-item">
 
−
            <a target="_blank" href="/xiazai/shouce" title="手册下载">手册下载</a>
 
−
        </li>
 
−
<li class="layui-nav-item">
 
−
            <a target="_blank" href="/xiazai/gongju" title="工具下载">工具下载</a>
 
−
        </li>
 
−
                <li class="layui-nav-item ">
 
−
            <a href="/course/type/3.html" title="菜鸟学堂">菜鸟学堂</a>
 
−
        </li>
 
−
    <span class="layui-nav-bar" style="left: 446px; top: 55px; width: 0px; opacity: 0;"></span></ul>
 
−
   
 
−
                <ul class="php-user">
 
−
        <li><span id="login">登录</span></li>
 
−
        <li class="php-reg"><span id="reg">注册</span></li>
 
−
        </ul>
 
−
            <div class="layui-form component">
 
−
        <div class="layui-form-select">
 
−
            <div class="layui-select-title">
 
−
                <input type="text" id="key_words" placeholder="输入关键词搜索" onkeyup="keyup()" style="background:#000" class="layui-input"><a href="javascript:;" onclick="searchs()"><i class="layui-icon"></i></a>
 
−
            </div>
 
−
        </div>
 
−
    </div>
 
−
</div>
 
−
<div class="layui-main" style=" margin-top: 20px;">
 
−
 
−
<div class="layui-row php-article">
 
−
    <div class="layui-col-md8 article-list-left">
 
−
<div class="profile">
 
−
<div><a href="/">首页</a> &gt; <a href="/css-tutorial.html">css教程</a> &gt; 正文</div>
 
−
<h1>用CSS实现下拉菜单的多种方法_经验交流</h1>
 
−
<span title="是否原创"><i class="layui-icon"></i>原创</span>
 
−
<span><i class="layui-icon" title="添加时间"></i>2016-05-16 12:09:37</span>
 
−
<span><i class="layui-icon" title="评论"></i>0</span>
 
−
<span class="hot"><i class="layui-icon" title="浏览"></i>8</span>
 
−
</div>
 
−
<div class="detail-content-wrap">
 
−
<div class="content">
 
−
<strong>横向下拉菜单<br></strong><div class="htmlarea"><textarea id="runcode52441">&lt;!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
−
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 
−
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"&gt;
 
−
&lt;head&gt;
 
−
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
 
−
&lt;meta http-equiv="Content-Language" content="zh-CN" /&gt;
 
−
&lt;title&gt;横向下拉菜单&lt;/title&gt;
 
−
&lt;style type="text/css"&gt;
 
−
&lt;!--
 
−
* {margin:0;padding:0;border:0;}
 
−
body {
 
−
font-family: arial, 宋体, serif;
 
−
font-size:12px;
 
−
}
 
−
#nav {
 
−
height: 24px;  list-style-type: none;  padding-left:200px;
 
−
line-height:24px;overflow:hidden;background:#999;
 
−
}
 
−
#nav a {
 
−
display: block; width: 80px; text-align:center;
 
−
}
 
−
#nav a:link  {
 
−
color:#EEE; text-decoration:none;
 
−
}
 
−
#nav a:visited  {
 
−
color:#EEE;text-decoration:none;
 
−
}
 
−
#nav a:hover  {
 
−
color:#FFF;text-decoration:none;font-weight:bold;background:#CCC;
 
−
}
 
−
#nav li {
 
−
float: left; width: 80px;
 
−
}
 
−
#nav li ul {
 
−
line-height: 24px;
 
−
list-style-type: none;
 
−
text-align:left;
 
−
left: -999px;
 
−
width: 520px; //注意,这里一定要设置宽度;
 
−
position: absolute;
 
−
background:#CCC;
 
−
}
 
−
#nav li ul li{
 
−
float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float
 
−
}
 
−
#nav li ul a{
 
−
display: block; width: 65px;text-align:left;padding-left:15px;
 
−
}
 
−
#nav li ul a:link  {
 
−
color:#F1F1F1; text-decoration:none;
 
−
}
 
−
#nav li ul a:visited  {
 
−
color:#F1F1F1;text-decoration:none;
 
−
}
 
−
#nav li ul a:hover  {
 
−
color:#FFF;text-decoration:none;font-weight:normal;background:#C00;
 
−
}
 
−
#nav li:hover ul {
 
−
left:25%;
 
−
}
 
−
#nav li.sfhover ul {
 
−
left:25%;
 
−
}
 
−
#content {
 
−
clear: left;
 
−
}
 
−
--&gt;
 
−
&lt;/style&gt;
 
−
&lt;script type=text/javascript&gt;&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
 
−
function menuFix() {
 
−
var sfEls = document.getElementById("nav").getElementsByTagName("li");
 
−
for (var i=0; i&lt;sfEls.length; i++) {
 
−
sfEls[i].onmouseover=function() {
 
−
this.className+=(this.className.length&gt;0? " ": "") + "sfhover";
 
−
}
 
−
sfEls[i].onMouseDown=function() {
 
−
this.className+=(this.className.length&gt;0? " ": "") + "sfhover";
 
−
}
 
−
sfEls[i].onMouseUp=function() {
 
−
this.className+=(this.className.length&gt;0? " ": "") + "sfhover";
 
−
}
 
−
sfEls[i].onmouseout=function() {
 
−
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
 
−
"");
 
−
}
 
−
}
 
−
}
 
−
window.onload=menuFix;
 
−
//--&gt;&lt;!]]&gt;&lt;/script&gt;
 
−
&lt;/head&gt;
 
−
&lt;body&gt;
 
−
&lt;ul id="nav"&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单五&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单五&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单五&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单五&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单五&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单五&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单六&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单六&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单六&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单六&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单六&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;菜单六&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/div&gt;
 
−
&lt;/body&gt;
 
−
&lt;/html&gt;
 
−
</textarea><br><input onclick="runEx('runcode52441')" type="button" value="运行代码"> <input onclick="doCopy('runcode52441')" type="button" value="复制代码"> <input onclick="doSave(runcode52441)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div><br><strong>CSS下拉导航菜单效果</strong><br><div class="htmlarea"><textarea id="runcode44155">&lt;!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 
−
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"&gt;
 
−
&lt;head&gt;
 
−
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
 
−
&lt;title&gt;CSS下拉菜单演示&lt;/title&gt;
 
−
&lt;style type="text/css"&gt;
 
−
&lt;!--
 
−
*{margin:0;padding:0;border:0;}
 
−
body {
 
−
font-family: arial, 宋体, serif;
 
−
font-size:12px;
 
−
}
 
−
#nav {
 
−
line-height: 24px; list-style-type: none; background:#666;
 
−
}
 
−
#nav a {
 
−
display: block; width: 80px; text-align:center;
 
−
}
 
−
#nav a:link {
 
−
color:#666; text-decoration:none;
 
−
}
 
−
#nav a:visited {
 
−
color:#666;text-decoration:none;
 
−
}
 
−
#nav a:hover {
 
−
color:#FFF;text-decoration:none;font-weight:bold;
 
−
}
 
−
#nav li {
 
−
float: left; width: 80px; background:#CCC;
 
−
}
 
−
#nav li a:hover{
 
−
background:#999;
 
−
}
 
−
#nav li ul {
 
−
line-height: 27px; list-style-type: none;text-align:left;
 
−
left: -999em; width: 180px; position: absolute;
 
−
}
 
−
#nav li ul li{
 
−
float: left; width: 180px;
 
−
background: #F6F6F6;
 
−
}
 
−
#nav li ul a{ wedisplay: block; width: 156px;text-align:left;padding-left:24px;
 
−
}
 
−
#nav li ul a:link {
 
−
color:#666; text-decoration:none;
 
−
}
 
−
#nav li ul a:visited {
 
−
color:#666;text-decoration:none;
 
−
}
 
−
#nav li ul a:hover {
 
−
color:#F3F3F3;text-decoration:none;font-weight:normal;
 
−
background:#C00;
 
−
}
 
−
#nav li:hover ul {
 
−
left: auto;
 
−
}
 
−
#nav li.sfhover ul {
 
−
left: auto;
 
−
}
 
−
#content {
 
−
clear: left;
 
−
}
 
−
--&gt;
 
−
&lt;/style&gt;
 
−
&lt;script type=text/javascript&gt;
 
−
&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
 
−
function menuFix() {
 
−
var sfEls = document.getElementById("nav").getElementsByTagName("li");
 
−
for (var i=0; i&lt;sfEls.length; i++) {
 
−
sfEls[i].onmouseover=function() {
 
−
this.className+=(this.className.length&gt;0? " ": "") + "sfhover";
 
−
}
 
−
sfEls[i].onMouseDown=function() {
 
−
this.className+=(this.className.length&gt;0? " ": "") + "sfhover";
 
−
}
 
−
sfEls[i].onMouseUp=function() {
 
−
this.className+=(this.className.length&gt;0? " ": "") + "sfhover";
 
−
}
 
−
sfEls[i].onmouseout=function() {
 
−
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
 
−
"");
 
−
}
 
−
}
 
−
}
 
−
window.onload=menuFix;
 
−
//--&gt;&lt;!]]&gt;
 
−
&lt;/script&gt;
 
−
&lt;/head&gt;
 
−
&lt;body&gt;
 
−
&lt;ul id="nav"&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;产品介绍&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;服务介绍&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;服务二服务二&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;服务二服务二服务二&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;成功案例&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;案例三&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;案例&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;案例三案例三&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;案例三案例三案例三&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;关于我们&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;我们四111&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;在线演示&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;演示演示演示&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;演示演示演示&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;演示演示&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;演示演示演示&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;演示演示演示演示演示&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;联系联系联系联系联系&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;联系联系联系&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;联系&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;联系联系&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;联系联系&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;联系联系联系&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;联系联系联系&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/body&gt;
 
−
&lt;/html&gt;
 
−
</textarea><br><input onclick="runEx('runcode44155')" type="button" value="运行代码"> <input onclick="doCopy('runcode44155')" type="button" value="复制代码"> <input onclick="doSave(runcode44155)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div><br><strong>CSS水平下拉菜单</strong><br><div class="htmlarea"><textarea id="runcode22128">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 
−
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 
−
&lt;head&gt;
 
−
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 
−
&lt;title&gt;CSS Menu - Horizontal&lt;/title&gt;
 
−
&lt;style type="text/css"&gt;
 
−
&lt;!--
 
−
@import"dhtml-horiz.css";
 
−
--&gt;
 
−
body {
 
−
margin: 0;
 
−
padding: 30px;
 
−
background: #FFF;
 
−
color: #666;
 
−
}
 
−
h1 {
 
−
font: bold 16px Arial, Helvetica, sans-serif;
 
−
}
 
−
p {
 
−
font: 11px Arial, Helvetica, sans-serif;
 
−
}
 
−
a {
 
−
color: #900;
 
−
text-decoration: none;
 
−
}
 
−
a:hover {
 
−
background: #900;
 
−
color: #FFF;
 
−
}
 
−
/*CSS Code for Menu Begin:*/
 
−
/* Root = Horizontal, Secondary = Vertical */
 
−
ul#navmenu {
 
−
margin: 0;
 
−
border: 0 none;
 
−
padding: 0;
 
−
width: 500px; /*For KHTML*/
 
−
list-style: none;
 
−
height: 24px;
 
−
}
 
−
ul#navmenu li {
 
−
margin: 0;
 
−
border: 0 none;
 
−
padding: 0;
 
−
float: left; /*For Gecko*/
 
−
display: inline;
 
−
list-style: none;
 
−
position: relative;
 
−
height: 24px;
 
−
}
 
−
ul#navmenu ul {
 
−
margin: 0;
 
−
border: 0 none;
 
−
padding: 0;
 
−
width: 160px;
 
−
list-style: none;
 
−
display: none;
 
−
position: absolute;
 
−
top: 24px;
 
−
left: 0;
 
−
}
 
−
ul#navmenu ul li {
 
−
float: none; /*For Gecko*/
 
−
display: block !important;
 
−
display: inline; /*For IE*/
 
−
}
 
−
/* Root Menu */
 
−
ul#navmenu a {
 
−
border: 1px solid #FFF;
 
−
border-right-color: #CCC;
 
−
border-bottom-color: #CCC;
 
−
padding: 0 6px;
 
−
float: none !important; /*For Opera*/
 
−
float: left; /*For IE*/
 
−
display: block;
 
−
background: #EEE;
 
−
color: #666;
 
−
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
 
−
text-decoration: none;
 
−
height: auto !important;
 
−
height: 1%; /*For IE*/
 
−
}
 
−
/* Root Menu Hover Persistence */
 
−
ul#navmenu a:hover,
 
−
ul#navmenu li:hover a,
 
−
ul#navmenu li.iehover a {
 
−
background: #CCC;
 
−
color: #FFF;
 
−
}
 
−
/* 2nd Menu */
 
−
ul#navmenu li:hover li a,
 
−
ul#navmenu li.iehover li a {
 
−
float: none;
 
−
background: #EEE;
 
−
color: #666;
 
−
}
 
−
/* 2nd Menu Hover Persistence */
 
−
ul#navmenu li:hover li a:hover,
 
−
ul#navmenu li:hover li:hover a,
 
−
ul#navmenu li.iehover li a:hover,
 
−
ul#navmenu li.iehover li.iehover a {
 
−
background: #CCC;
 
−
color: #FFF;
 
−
}
 
−
/* 3rd Menu */
 
−
ul#navmenu li:hover li:hover li a,
 
−
ul#navmenu li.iehover li.iehover li a {
 
−
background: #EEE;
 
−
color: #666;
 
−
}
 
−
/* 3rd Menu Hover Persistence */
 
−
ul#navmenu li:hover li:hover li a:hover,
 
−
ul#navmenu li:hover li:hover li:hover a,
 
−
ul#navmenu li.iehover li.iehover li a:hover,
 
−
ul#navmenu li.iehover li.iehover li.iehover a {
 
−
background: #CCC;
 
−
color: #FFF;
 
−
}
 
−
/* 4th Menu */
 
−
ul#navmenu li:hover li:hover li:hover li a,
 
−
ul#navmenu li.iehover li.iehover li.iehover li a {
 
−
background: #EEE;
 
−
color: #666;
 
−
}
 
−
/* 4th Menu Hover */
 
−
ul#navmenu li:hover li:hover li:hover li a:hover,
 
−
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
 
−
background: #CCC;
 
−
color: #FFF;
 
−
}
 
−
ul#navmenu ul ul,
 
−
ul#navmenu ul ul ul {
 
−
display: none;
 
−
position: absolute;
 
−
top: 0;
 
−
left: 160px;
 
−
}
 
−
/* Do Not Move - Must Come Before display:block for Gecko */
 
−
ul#navmenu li:hover ul ul,
 
−
ul#navmenu li:hover ul ul ul,
 
−
ul#navmenu li.iehover ul ul,
 
−
ul#navmenu li.iehover ul ul ul {
 
−
display: none;
 
−
}
 
−
ul#navmenu li:hover ul,
 
−
ul#navmenu ul li:hover ul,
 
−
ul#navmenu ul ul li:hover ul,
 
−
ul#navmenu li.iehover ul,
 
−
ul#navmenu ul li.iehover ul,
 
−
ul#navmenu ul ul li.iehover ul {
 
−
display: block;
 
−
}
 
−
&lt;/style&gt;
 
−
&lt;script type="text/JavaScript"&gt;
 
−
navHover = function() {
 
−
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
 
−
for (var i=0; i&lt;lis.length; i++) {
 
−
lis[i].onmouseover=function() {
 
−
this.className+=" iehover";
 
−
}
 
−
lis[i].onmouseout=function() {
 
−
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
 
−
}
 
−
}
 
−
}
 
−
if (window.attachEvent) window.attachEvent("onload", navHover);
 
−
&lt;/script&gt;
 
−
&lt;/head&gt;
 
−
&lt;body&gt;
 
−
&lt;h1&gt;CSS Menu - Horizontal&lt;/h1&gt;
 
−
&lt;hr /&gt;
 
−
&lt;ul id="navmenu"&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Work +&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Websites +&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;qrayg&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;qArcade&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;qLoM&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;qDT&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Pen and Ink&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Free Interfaces&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Learn +&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Fireworks +&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;aquaButton&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;aquaButton2&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;waterDrop&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;lightFX&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;lightFX2&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;CSS +&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;footerStick&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;spriteNav&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;@import&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Info&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/body&gt;
 
−
&lt;/html&gt;
 
−
</textarea><br><input onclick="runEx('runcode22128')" type="button" value="运行代码"> <input onclick="doCopy('runcode22128')" type="button" value="复制代码"> <input onclick="doSave(runcode22128)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div><br><strong>CSS垂直下拉菜单</strong><br><div class="htmlarea"><textarea id="runcode61649">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 
−
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 
−
&lt;head&gt;
 
−
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 
−
&lt;title&gt;CSS Menu - Vertical&lt;/title&gt;
 
−
&lt;style type="text/css"&gt;
 
−
body {
 
−
margin: 0;
 
−
padding: 30px;
 
−
background: #FFF;
 
−
color: #666;
 
−
}
 
−
h1 {
 
−
font: bold 16px Arial, Helvetica, sans-serif;
 
−
}
 
−
p {
 
−
font: 11px Arial, Helvetica, sans-serif;
 
−
}
 
−
a {
 
−
color: #900;
 
−
text-decoration: none;
 
−
}
 
−
a:hover {
 
−
background: #900;
 
−
color: #FFF;
 
−
}
 
−
/*CSS Code for Menu Begin:*/
 
−
/* Root = Vertical, Secondary = Vertical */
 
−
ul#navmenu,
 
−
ul#navmenu li,
 
−
ul#navmenu ul {
 
−
margin: 0;
 
−
border: 0 none;
 
−
padding: 0;
 
−
width: 160px; /*For KHTML*/
 
−
list-style: none;
 
−
}
 
−
ul#navmenu li {
 
−
display: block !important; /*For GOOD browsers*/
 
−
display: inline; /*For IE*/
 
−
position: relative;
 
−
}
 
−
/* Root Menu */
 
−
ul#navmenu a {
 
−
border: 1px solid #FFF;
 
−
border-right-color: #CCC;
 
−
border-bottom-color: #CCC;
 
−
padding: 0 6px;
 
−
display: block;
 
−
background: #EEE;
 
−
color: #666;
 
−
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
 
−
text-decoration: none;
 
−
height: auto !important;
 
−
height: 1%; /*For IE*/
 
−
}
 
−
/* Root Menu Hover Persistence */
 
−
ul#navmenu a:hover,
 
−
ul#navmenu li:hover a,
 
−
ul#navmenu li.iehover a {
 
−
background: #CCC;
 
−
color: #FFF;
 
−
}
 
−
/* 2nd Menu */
 
−
ul#navmenu li:hover li a,
 
−
ul#navmenu li.iehover li a {
 
−
background: #EEE;
 
−
color: #666;
 
−
}
 
−
/* 2nd Menu Hover Persistence */
 
−
ul#navmenu li:hover li a:hover,
 
−
ul#navmenu li:hover li:hover a,
 
−
ul#navmenu li.iehover li a:hover,
 
−
ul#navmenu li.iehover li.iehover a {
 
−
background: #CCC;
 
−
color: #FFF;
 
−
}
 
−
/* 3rd Menu */
 
−
ul#navmenu li:hover li:hover li a,
 
−
ul#navmenu li.iehover li.iehover li a {
 
−
background: #EEE;
 
−
color: #666;
 
−
}
 
−
/* 3rd Menu Hover Persistence */
 
−
ul#navmenu li:hover li:hover li a:hover,
 
−
ul#navmenu li:hover li:hover li:hover a,
 
−
ul#navmenu li.iehover li.iehover li a:hover,
 
−
ul#navmenu li.iehover li.iehover li.iehover a {
 
−
background: #CCC;
 
−
color: #FFF;
 
−
}
 
−
/* 4th Menu */
 
−
ul#navmenu li:hover li:hover li:hover li a,
 
−
ul#navmenu li.iehover li.iehover li.iehover li a {
 
−
background: #EEE;
 
−
color: #666;
 
−
}
 
−
/* 4th Menu Hover */
 
−
ul#navmenu li:hover li:hover li:hover li a:hover,
 
−
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
 
−
background: #CCC;
 
−
color: #FFF;
 
−
}
 
−
ul#navmenu ul,
 
−
ul#navmenu ul ul,
 
−
ul#navmenu ul ul ul {
 
−
display: none;
 
−
position: absolute;
 
−
top: 0;
 
−
left: 160px;
 
−
}
 
−
/* Do Not Move - Must Come Before display:block for Gecko */
 
−
ul#navmenu li:hover ul ul,
 
−
ul#navmenu li:hover ul ul ul,
 
−
ul#navmenu li.iehover ul ul,
 
−
ul#navmenu li.iehover ul ul ul {
 
−
display: none;
 
−
}
 
−
ul#navmenu li:hover ul,
 
−
ul#navmenu ul li:hover ul,
 
−
ul#navmenu ul ul li:hover ul,
 
−
ul#navmenu li.iehover ul,
 
−
ul#navmenu ul li.iehover ul,
 
−
ul#navmenu ul ul li.iehover ul {
 
−
display: block;
 
−
}
 
−
&lt;/style&gt;
 
−
&lt;script type="text/javascript"&gt;
 
−
&lt;!--
 
−
navHover = function() {
 
−
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
 
−
for (var i=0; i&lt;lis.length; i++) {
 
−
lis[i].onmouseover=function() {
 
−
this.className+=" iehover";
 
−
}
 
−
lis[i].onmouseout=function() {
 
−
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
 
−
}
 
−
}
 
−
}
 
−
if (window.attachEvent) window.attachEvent("onload", navHover);
 
−
--&gt;
 
−
&lt;/script&gt;
 
−
&lt;/head&gt;
 
−
&lt;body&gt;
 
−
&lt;h1&gt;CSS Menu - Vertical&lt;/h1&gt;
 
−
&lt;hr /&gt;
 
−
&lt;ul id="navmenu"&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Work +&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Websites +&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;qrayg&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;qArcade&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;qLoM&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;qDT&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Pen and Ink&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Free Interfaces&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Learn +&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Fireworks +&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;aquaButton&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;aquaButton2&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;waterDrop&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;lightFX&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;lightFX2&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;CSS +&lt;/a&gt;
 
−
&lt;ul&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;footerStick&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;spriteNav&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;@import&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Info&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;/body&gt;
 
−
&lt;/html&gt;
 
−
</textarea><br><input onclick="runEx('runcode61649')" type="button" value="运行代码"> <input onclick="doCopy('runcode61649')" type="button" value="复制代码"> <input onclick="doSave(runcode61649)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div><br><strong>CSS实现的中英文双语导航菜单<br></strong><div class="htmlarea"><textarea id="runcode43086">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
 
−
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
 
−
&lt;head&gt;
 
−
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
 
−
&lt;meta name="Keywords" content="bilingual menu,中英文双语菜单" /&gt;
 
−
&lt;meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /&gt;
 
−
&lt;meta content="all" name="robots" /&gt;
 
−
&lt;meta name="author" content="forestgan" /&gt;
 
−
&lt;meta name="copyright" content="http://www.forest53.com" /&gt;
 
−
&lt;title&gt;完全用CSS实现的中英文双语导航菜单&lt;/title&gt;
 
−
&lt;style type="text/css"&gt;
 
−
a{
 
−
color: #FFFF99;
 
−
text-decoration: none;
 
−
}
 
−
a:hover{
 
−
color: #FFFFFF;
 
−
text-decoration: underline;
 
−
}
 
−
#nav{
 
−
padding: 10px 10px 0;
 
−
font-size: 12px;
 
−
font-weight: bold;
 
−
margin: 1em 0 0;
 
−
list-style:none;
 
−
}
 
−
#nav li{
 
−
float: left;
 
−
margin-right: 1px;
 
−
}
 
−
.bi{
 
−
position: relative;
 
−
z-index: 0;
 
−
}
 
−
.bi:hover{
 
−
z-index: 99;
 
−
}
 
−
.bi:hover span{
 
−
visibility: visible;
 
−
top: 0;
 
−
left: 0;
 
−
cursor: pointer;
 
−
}
 
−
.bi span{
 
−
position: absolute;
 
−
left: -999em;
 
−
visibility: hidden;
 
−
}
 
−
#nav li a,.bi:hover span{
 
−
line-height: 20px;
 
−
text-decoration: none;
 
−
background: #DDDDDD;
 
−
color: #666666;
 
−
display: block;
 
−
width: 80px;
 
−
text-align: center;
 
−
}
 
−
#nav li a:hover,.bi:hover span{
 
−
color: #FFFFFF;
 
−
background: #DC4E1B;
 
−
}
 
−
.bi:hover span{
 
−
padding-top: 2px;
 
−
}
 
−
#navbar{
 
−
background: #DC4E1B;
 
−
height: 8px;
 
−
overflow: hidden;
 
−
clear: both;
 
−
}
 
−
&lt;/style&gt;
 
−
&lt;link href="../css/main.css" rel="stylesheet" type="text/css" /&gt;
 
−
&lt;/head&gt;
 
−
&lt;body&gt;
 
−
&lt;div id="top"&gt;
 
−
&lt;ul id="nav"&gt;
 
−
&lt;li&gt;&lt;a class="bi" href="Http://www.junstudio.org/"&gt;Home&lt;span&gt;首　页&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a class="bi" href="Http://www.junstudio.org/blog"&gt;Blog&lt;span&gt;日志&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a class="bi" href="Http://www.junstudio.org/guestbook"&gt;guestbook&lt;span&gt;留言本&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a class="bi" href="Http://www.pickbar.com/"&gt;Pickbar&lt;span&gt;精品吧&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 
−
&lt;li&gt;&lt;a class="bi" href="Http://www.fansir.com/"&gt;fansir&lt;span&gt;樊SIR&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 
−
&lt;/ul&gt;
 
−
&lt;div id="navbar"&gt;&lt;/div&gt;
 
−
&lt;/body&gt;
 
−
&lt;/html&gt;
 
−
</textarea><br><input onclick="runEx('runcode43086')" type="button" value="运行代码"> <input onclick="doCopy('runcode43086')" type="button" value="复制代码"> <input onclick="doSave(runcode43086)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div>
 
−
<div class="share layui-clear bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1539590048139">
 
−
<li><a href="javascript:;" data-cmd="weixin" class="wechat"><i class="layui-icon"></i>微信</a></li>
 
−
<li><a href="javascript:;" data-cmd="more" class="share-btn"><i class="layui-icon"></i>分享</a></li>
 
−
</div>
 
−
<div class="tags layui-clear">
 
−
<li>相关标签：<a href="/search?word=用css实现下拉菜单的多种方法" target="_blank">用CSS实现下拉菜单的多种方法</a></li>
 
−
<li class="line">
 
−
本文原创发布php中文网 ，转载请注明出处，感谢您的尊重！
 
−
</li>
 
−
</div>
 
−
<div class="page layui-clear">
 
−
<ul>
 
−
<li>上一篇：<a href="/css-tutorial-1127.html">vml简介_VML相关</a></li>
 
−
<li>下一篇：<a href="/css-tutorial-1129.html">XHTML下css+div布局总结 超强推荐_经验交流</a></li>
 
−
</ul>
 
−
</div>
 
−
    </div>
 
−
<p style="font-size: 18px;">相关文章</p>
 
−
<hr>
 
−
<li><span class="layui-badge-dot"></span><a class="relevant" href="/css-tutorial-539.html">CSS3+Js实现响应式导航条_CSS/HTML</a></li>
 
−
<li><span class="layui-badge-dot"></span><a class="relevant" href="/css-tutorial-545.html">从零学CSS系列之文本属性_基础教程</a></li>
 
−
<li><span class="layui-badge-dot"></span><a class="relevant" href="/css-tutorial-552.html">手机屏幕尺寸测试——手机的实际显示页面的宽度_经验交流</a></li>
 
−
<li><span class="layui-badge-dot"></span><a class="relevant" href="/css-tutorial-553.html">CSS3中Transition属性详解以及示例分享_CSS/HTML</a></li>
 
−
</div>
 
−
 
−
<div class="comment">
 
−
<div class="J_Header" id="J_Header">
 
−
<h1 class="header-title">网友评论</h1>
 
−
<p class="header-protocol">文明上网理性发言，请遵守
 
−
<a href="javascript:void(0);">新闻评论服务协议</a></p>
 
−
<a class="article-comment-publish" href="javascript:void(0);">我要评论</a>
 
−
</div>
 
−
 
−
 
−
<div class="text-box layui-clear article_comment_textarea">
 
−
<div class="box-left">
 
−
<li>
 
−
<a href="javascript:login_trigger()">
 
−
<img src="/static/images/user_avatar.jpg" alt="">
 
−
</a>
 
−
</li>
 
−
<li><a href="javascript:login_trigger()"></a></li>
 
−
</div>
 
−
<div class="box-right">
 
−
<textarea name="desc" placeholder="请输入内容" class="layui-textarea article_textarea"></textarea>
 
−
<button class="layui-btn article_publish" data-id="1128">立即提交</button>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
<!--推荐新闻-->
 
−
<div class="article-hot pinBoxContainer" id="tab_detail_list">
 
−
<div class="pinBox-wrapper" style="position: relative; height: 50px;"><div class="layui-col-md12 php-news-left active" style="width: 800px;">
 
−
  <ul class="php-news-left-ul">
 
−
  <li><a href="/course/list/29.html"> PHP</a></li>
 
−
<li><a href="/course/list/51.html"> MySQL</a></li>
 
−
<li><a href="/course/list/11.html"> HTML</a></li>
 
−
<li><a href="/course/list/12.html"> CSS</a></li>
 
−
<li><a href="/course/list/17.html"> JavaScript</a></li>
 
−
<li><a href="/course/list/19.html"> jQuery</a></li>
 
−
<li><a href="/course/list/25.html"> AJAX</a></li>
 
−
<li><a href="/course/list/13.html"> Html5</a></li>
 
−
<div class="clear"></div>
 
−
  </ul>
 
−
</div></div>
 
−
<div class="layui-col-md12  php-news-info" style="background-color: rgb(255, 255, 255); overflow: hidden; outline: none;" tabindex="0">
 
−
<div class="layui-row diy-border">
 
−
<div class="layui-col-md3 ">
 
−
<a href="/course/379.html" target="_blank"><img width="180" height="124" src="http://img.php.cn/upload/course/000/000/003/5a508deef1e58616.jpg" alt="独孤九贱(4)_PHP视频教程"></a>
 
−
</div>
 
−
<div class="layui-col-md9">
 
−
  <h3><a target="_blank" href="/course/379.html">独孤九贱(4)_PHP视频教程</a></h3>
 
−
  <p title="江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
 
−
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用为原则，让你学得会，记得住，用得上。学习PHP编程，不得不提醒阁下，前端的基础知识，还是要有一点的。当然不要求精通，但必须对基本标签、基本概念和术语有一定了解，否则，会对你的学习信心造成小打击哟~~（php中文网上有很多优秀的html,css,javascript教程可供您参考，如果你选择我们官方原创课程最好啦）">江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
 
−
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...</p>
 
−
  <p>
 
−
</p><ul class="php-li-float-left diy-li-course-user">
 
−
<li>
 
−
<a target="_blank" class="course-user" href="member/1120.html"><img src="http://img.php.cn/upload/avatar/000/001/120/5ad4492ab6d99770.jpg"> Peter-Zhu</a>
 
−
</li>
 
−
<li>2017-03-20 22:47:17</li>
 
−
<li>点击数(125290)</li>
 
−
</ul>
 
−
<p></p>
 
−
</div>
 
−
</div>
 
−
<div class="layui-row diy-border">
 
−
<div class="layui-col-md3 ">
 
−
<a href="/course/486.html" target="_blank"><img width="180" height="124" src="http://img.php.cn/upload/course/000/000/003/5a50894c3ee41784.jpg" alt="独孤九贱(5)_ThinkPHP5视频教程"></a>
 
−
</div>
 
−
<div class="layui-col-md9">
 
−
  <h3><a target="_blank" href="/course/486.html">独孤九贱(5)_ThinkPHP5视频教程</a></h3>
 
−
  <p title="ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将您在开发要用到的所有知识点，娓娓道来。语言选简洁明快，实例简单实用，只你具备基本的PHP的语法常识，就可以跟着PHP中文网的这套原创课程，学会用ThinkPHP5创建您的项目。从用户请求到响应输出，从控制器到路由，从模型知识到模板调试，在本套课程中，你总可以找到你的最爱。">ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...</p>
 
−
  <p>
 
−
</p><ul class="php-li-float-left diy-li-course-user">
 
−
<li>
 
−
<a target="_blank" class="course-user" href="member/1120.html"><img src="http://img.php.cn/upload/avatar/000/001/120/5ad4492ab6d99770.jpg"> Peter-Zhu</a>
 
−
</li>
 
−
<li>2017-05-16 12:03:57</li>
 
−
<li>点击数(123823)</li>
 
−
</ul>
 
−
<p></p>
 
−
</div>
 
−
</div>
 
−
<div class="layui-row diy-border">
 
−
<div class="layui-col-md3 ">
 
−
<a href="/course/372.html" target="_blank"><img width="180" height="124" src="http://img.php.cn/upload/course/000/000/003/5a5091db685e6482.jpg" alt="独孤九贱(1)_HTML5视频教程"></a>
 
−
</div>
 
−
<div class="layui-col-md9">
 
−
  <h3><a target="_blank" href="/course/372.html">独孤九贱(1)_HTML5视频教程</a></h3>
 
−
  <p title="《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
 
−
每节课内容精炼，长度不超过10分钟，非常适合您利用碎片时间来学习。地铁上、等人、候车、餐厅无处不学习~~">《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
 
−
...</p>
 
−
  <p>
 
−
</p><ul class="php-li-float-left diy-li-course-user">
 
−
<li>
 
−
<a target="_blank" class="course-user" href="member/1120.html"><img src="http://img.php.cn/upload/avatar/000/001/120/5ad4492ab6d99770.jpg"> Peter-Zhu</a>
 
−
</li>
 
−
<li>2017-03-13 10:15:11</li>
 
−
<li>点击数(96198)</li>
 
−
</ul>
 
−
<p></p>
 
−
</div>
 
−
</div>
 
−
<div class="layui-row diy-border">
 
−
<div class="layui-col-md3 ">
 
−
<a href="/course/593.html" target="_blank"><img width="180" height="124" src="http://img.php.cn/upload/course/000/000/003/5a9ce29211b72919.jpg" alt="ThinkPHP5实战之[教学管理系统]"></a>
 
−
</div>
 
−
<div class="layui-col-md9">
 
−
  <h3><a target="_blank" href="/course/593.html">ThinkPHP5实战之[教学管理系统]</a></h3>
 
−
  <p title="本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。">本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。</p>
 
−
  <p>
 
−
</p><ul class="php-li-float-left diy-li-course-user">
 
−
<li>
 
−
<a target="_blank" class="course-user" href="member/1120.html"><img src="http://img.php.cn/upload/avatar/000/001/120/5ad4492ab6d99770.jpg"> Peter-Zhu</a>
 
−
</li>
 
−
<li>2017-07-24 16:48:56</li>
 
−
<li>点击数(93167)</li>
 
−
</ul>
 
−
<p></p>
 
−
</div>
 
−
</div>
 
−
<div class="layui-row diy-border">
 
−
<div class="layui-col-md3 ">
 
−
<a href="/course/170.html" target="_blank"><img width="180" height="124" src="http://img.php.cn/upload/course/000/000/003/5a53132d0bd62424.jpg" alt="PHP入门视频教程之一周学会PHP"></a>
 
−
</div>
 
−
<div class="layui-col-md9">
 
−
  <h3><a target="_blank" href="/course/170.html">PHP入门视频教程之一周学会PHP</a></h3>
 
−
  <p title="所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通过一周的深入学习让你快速掌握PHP的各项技能，助你的工作和学习更上层楼！">所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...</p>
 
−
  <p>
 
−
</p><ul class="php-li-float-left diy-li-course-user">
 
−
<li>
 
−
<a target="_blank" class="course-user" href="member/4.html"><img src="http://img.php.cn/upload/avatar/000/000/004/595906a9202e3303.jpeg"> 大家讲道理</a>
 
−
</li>
 
−
<li>2016-11-16 14:54:14</li>
 
−
<li>点击数(91347)</li>
 
−
</ul>
 
−
<p></p>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<div class="clear"></div>
 
−
</div>
 
−
</div>
 
−
<div class="layui-col-md4 article-list-right ">
 
−
<!-- <div class='article-user layui-clear'>
 
−
<ul>
 
−
<li><img src='/static/images/user_avatar.jpg'></li>
 
−
<li>
 
−
<p>php中文网</p>
 
−
<p>全栈工程师</p>
 
−
</li>
 
−
<li class='layui-clear info'>认证0级讲师</li>
 
−
</ul>
 
−
<div class='layui-clear column-cout'>
 
−
<ul>
 
−
<li class='border'>278977篇<br>文章总数</li>
 
−
<li>8<br>文章总浏览数</li>
 
−
</ul>
 
−
</div>
 
−
</div> -->
 
−
<div class="panel">
 
−
<div class="panel-title">作者信息</div>
 
−
<div id="profile-2">
 
−
<div class="avatar-wrap">
 
−
<a href="/member/1.html" target="_blank" class="avatar-link">
 
−
<img src="/static/images/user_avatar.jpg" class="func-um_user gravatar avatar avatar-120 um-avatar um-avatar-uploaded">
 
−
</a>
 
−
</div>
 
−
<div class="profile-info">
 
−
<p>
 
−
<span class="author-name">php中文网</span>
 
−
<i class="layui-icon layui-icon-auz" title="认证作者"></i>
 
−
</p>
 
−
<p class="author-description">认证0级讲师</p>
 
−
<div class="author-article">
 
−
<dl class="list-one">
 
−
<dt class="panel-title">最近文章</dt>
 
−
</dl>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="layui-clear"><a href="javascript:publish_article()" class="layui-btn layui-btn-danger article-add">发布技术文章</a> </div>
 
−
<div class="top-article layui-clear">
 
−
<div class="layui-tab layui-tab-card">
 
−
  <ul class="layui-tab-title">
 
−
    <li class="layui-this">最新文章</li>
 
−
    <li>猜你喜欢</li>
 
−
  </ul>
 
−
  <div class="layui-tab-content">
 
−
    <div class="layui-tab-item layui-show">
 
−
    <ul>
 
−
<p class="top-img">
 
−
<a href="/toutiao-387072.html" target="_blank" title="面对巨额亏损的PHP中文网，我该为情怀买单吗？（猪哥）"><img src="http://img.php.cn/upload/article/000/000/003/5b890a9e4417f872.png" style="width: 100%"></a>
 
−
</p>
 
−
<li><a href="/css-tutorial-411647.html" target="_blank" title="CSS3学习之页面加载动画（二）">CSS3学习之页面加载动画（二）</a></li>
 
−
<li><a href="/css-tutorial-411644.html" target="_blank" title="CSS3新增伪类有哪些?（总结附代码）">CSS3新增伪类有哪些?（总结附代码）</a></li>
 
−
<li><a href="/css-tutorial-411643.html" target="_blank" title="CSS3学习之页面加载动画（一）">CSS3学习之页面加载动画（一）</a></li>
 
−
<li><a href="/css-tutorial-411639.html" target="_blank" title="css专业术语有哪些？css专业术语介绍">css专业术语有哪些？css专业术语介绍</a></li>
 
−
<li><a href="/css-tutorial-411636.html" target="_blank" title="web前端中常用的封装方法介绍（代码示例）">web前端中常用的封装方法介绍（代码示例）</a></li>
 
−
<li><a href="/css-tutorial-411634.html" target="_blank" title="css实现文字溢出省略号的四种方法（附代码）">css实现文字溢出省略号的四种方法（附代码）</a></li>
 
−
<li><a href="/css-tutorial-411606.html" target="_blank" title="css中display属性的介绍（附实例）">css中display属性的介绍（附实例）</a></li>
 
−
<li><a href="/css-tutorial-411604.html" target="_blank" title="纯CSS3实现页面loading加载动画效果（附代码）">纯CSS3实现页面loading加载动画效果（附代码）</a></li>
 
−
 
−
</ul>
 
−
    </div>
 
−
    <div class="layui-tab-item">
 
−
    <ul>
 
−
<p class="top-img">
 
−
<a href="/toutiao-387072.html" target="_blank" title="面对巨额亏损的PHP中文网，我该为情怀买单吗？（猪哥）"><img src="http://img.php.cn/upload/article/000/000/003/5b890a9e4417f872.png" style="width: 100%"></a>
 
−
</p>
 
−
<li><a href="/css-tutorial-409232.html" target="_blank" title="css3新增属性有哪些？css3中常用的新增属性总结">css3新增属性有哪些？css3中常用的新增属性总结</a></li>
 
−
<li><a href="/css-tutorial-408100.html" target="_blank" title="html怎么添加背景图片且让图片平铺整个页面？（代码示例）">html怎么添加背景图片且让图片平铺整个页面？（代码示例）</a></li>
 
−
<li><a href="/css-tutorial-375461.html" target="_blank" title="分享四个非常好看实用的CSS样式表格">分享四个非常好看实用的CSS样式表格</a></li>
 
−
<li><a href="/css-tutorial-363847.html" target="_blank" title="总结css中常见的四个定位属性（left right top bottom）">总结css中常见的四个定位属性（left right top bottom）</a></li>
 
−
<li><a href="/css-tutorial-381659.html" target="_blank" title="HTML怎么设置网页背景图">HTML怎么设置网页背景图</a></li>
 
−
<li><a href="/css-tutorial-362740.html" target="_blank" title="详解CSS中的display:flex||inline-flex属性">详解CSS中的display:flex||inline-flex属性</a></li>
 
−
<li><a href="/css-tutorial-374830.html" target="_blank" title="css中如何实现border边框颜色渐变代码详解">css中如何实现border边框颜色渐变代码详解</a></li>
 
−
<li><a href="/css-tutorial-382041.html" target="_blank" title="六种CSS经典三栏布局方案">六种CSS经典三栏布局方案</a></li>
 
−
 
−
</ul>
 
−
    </div>
 
−
  </div>
 
−
</div>
 
−
 
−
 
−
</div>
 
−
<div class="article-course php-news-right-imginfo" style="margin-bottom:20px;">
 
−
<h3 class="article-title">相关视频教程</h3>
 
−
<li>
 
−
<a href="/course/179.html" target="_blank">
 
−
<img src="http://img.php.cn/upload/course/000/000/003/5a17982d48686254.jpg" alt="javascript初级视频教程" height="60">
 
−
</a>
 
−
<span><a href="/course/179.html" target="_blank">javascript初级视频教程</a></span>
 
−
</li>
 
−
<li>
 
−
<a href="/course/181.html" target="_blank">
 
−
<img src="http://img.php.cn/upload/course/000/000/003/5a179283c3885703.jpg" alt="jquery 基础视频教程" height="60">
 
−
</a>
 
−
<span><a href="/course/181.html" target="_blank">jquery 基础视频教程</a></span>
 
−
</li>
 
−
<li>
 
−
<a href="/course/198.html" target="_blank">
 
−
<img src="http://img.php.cn/upload/course/000/000/003/5a169239acf9a131.jpg" alt="javascript三级联动视频教程" height="60">
 
−
</a>
 
−
<span><a href="/course/198.html" target="_blank">javascript三级联动视频教程</a></span>
 
−
</li>
 
−
<li>
 
−
<a href="/course/386.html" target="_blank">
 
−
<img src="http://img.php.cn/upload/course/000/000/003/5a508a6eb1fe2744.jpg" alt="独孤九贱(3)_JavaScript视频教程" height="60">
 
−
</a>
 
−
<span><a href="/course/386.html" target="_blank">独孤九贱(3)_JavaScript视频教程</a></span>
 
−
</li>
 
−
<li>
 
−
<a href="/course/582.html" target="_blank">
 
−
<img src="http://img.php.cn/upload/course/000/000/003/5a50879e1c81a337.jpg" alt="独孤九贱(6)_jQuery视频教程" height="60">
 
−
</a>
 
−
<span><a href="/course/582.html" target="_blank">独孤九贱(6)_jQuery视频教程</a></span>
 
−
</li>
 
−
</div>
 
−
<div class="top-article layui-clear" id="aritcle_detail_new" style="z-index: auto; position: static;">
 
−
<h3 class="article-title">相关视频章节</h3>
 
−
<ul>
 
−
<li><a href="/code/28951.html" target="_blank" title="修复幻灯片被覆盖的问题">修复幻灯片被覆盖的问题</a></li>
 
−
<li><a href="/code/28950.html" target="_blank" title="幻灯片的控制按钮样式">幻灯片的控制按钮样式</a></li>
 
−
<li><a href="/code/28949.html" target="_blank" title="幻灯片的控制按钮">幻灯片的控制按钮</a></li>
 
−
<li><a href="/code/28948.html" target="_blank" title="响应式幻灯片">响应式幻灯片</a></li>
 
−
</ul>
 
−
</div>
 
−
    </div>
 
−
    </div>
 
−
</div>
 
−
<!--技术文章-->
 
−
<script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?3.1.1"></script>
 
−
<script>article_status = 0;</script>
 
−
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
 
−
<script type="text/javascript" src="/static/video/video.js?1.7" charset="UTF-8"></script>
 
−
<div class="layui-clear layui-bg-black php-ul-li footer_top_margin">
 
−
    <div class="layui-row  layui-main">
 
−
        <div class="layui-col-md9">
 
−
            <ul class="php-float-left">
 
−
                <li><a href="http://www.php.cn/" target="_blank" title="网站首页">网站首页 </a></li>
 
−
                <li><a href="/course/list/29/type/2.html" target="_blank" title="PHP视频">PHP视频</a></li>
 
−
                <li><a href="/course/list/29/type/4.html" target="_blank" title="PHP实战">PHP实战</a></li>
 
−
                <li><a href="/course/list/29/type/1.html" target="_blank" title="PHP代码">PHP代码</a></li>
 
−
                <li><a href="/course/list/29/type/3.html" target="_blank" title="PHP手册">PHP手册</a></li>
 
−
                <li><a href="/wikis.html" target="_blank" title="词条">词条</a></li>
 
−
                <li><a href="/write.html" target="_blank" title="手记">手记</a></li>
 
−
            </ul>
 
−
            <p class="layui-clear footer_phpcn">PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
 
−
            <p class="footer_phpcn_record">Copyright 2014-2018 http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9<span class="footer_phpcn_say"><a href="/about/disclaimer.html" target="_blank">免责申明</a><a href="/about/donate.html" target="_blank">赞助与捐赠</a></span></p>
 
−
            <p></p>
 
−
        </div>
 
−
        <div class="layui-col-md3" style="padding-top:15px;">
 
−
            <img src="http://img.php.cn/upload/article/000/000/003/5b9a40905e2c9141.png" width="100" title="官方QQ群：668704166">&nbsp;&nbsp;<img src="/static/images/phpcn_erwei.jpg" width="100" title="扫一扫，关注公众号">
 
−
 
−
        </div>
 
−
    </div>
 
−
</div>
 
−
<input type="hidden" id="verifycode" value="/captcha.html">
 
−
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 
−
<script src="/static/layui/layui.js"></script>
 
−
<script type="text/javascript" src="/static/js/global.min.js?5.3.22"></script>
 
−
<script>(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);
 
−
})();var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script>
 
−
<script>video_play("");</script>
 
−
 
−
<ul class="layui-fixbar"><li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li></ul><div id="ascrail2000" class="nicescroll-rails nicescroll-rails-vr" style="width: 5px; z-index: auto; cursor: default; position: absolute; top: 1660px; left: 835px; height: 905px; opacity: 1; display: none;"><div class="nicescroll-cursors" style="position: relative; top: 0px; float: right; width: 5px; height: 0px; background-color: rgb(204, 204, 204); border: 0px; background-clip: padding-box; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;"></div></div><div id="ascrail2000-hr" class="nicescroll-rails nicescroll-rails-hr" style="height: 5px; z-index: auto; top: 2560px; left: 40px; position: absolute; opacity: 1; cursor: default; display: none;"><div class="nicescroll-cursors" style="position: absolute; top: 0px; height: 5px; width: 0px; background-color: rgb(204, 204, 204); border: 0px; background-clip: padding-box; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;"></div></div></body></html>
 

Revision as of 08:56, 15 October 2018