[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页

[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页-LMLPHP

前言

[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页-LMLPHP

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级下拉导航菜单</title>
<link rel="stylesheet" href="CSS/style10.css">
</head>

<body>
<div id="nav">
	<ul>
    	<li><a href="#">首页</a></li>
        <li><a href="#">jQuery特效</a>
        	<ul>
      			<li><a href="#">jQuery图片特效</a></li>
     			<li><a href="#">jQuery导航特效</a></li>
     			<li><a href="#">jQuery选项卡特效</a></li>
      			<li><a href="#">jQuery文字特效</a></li>
     		</ul>
        </li>
        <li><a href="#">JavaScript特效</a></li>
        <li><a href="#">Flash特效</a>
        	<ul>
                <li><a href="#">Flash图片特效</a></li>
                <li><a href="#">Flash导航特效</a></li>
                <li><a href="#">Flash选项卡特效</a></li>
                <li><a href="#">Flash文字特效</a></li>
        	</ul>
        </li>
        <li><a href="#">div+css教程</a></li>
 		<li><a href="#">HTML5教程</a></li>
    </ul>
</div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>横向二级导航菜单</title>
<link rel="stylesheet" href="css/style11.css">
</head>

<body>
<div id="menu">
	<ul>
    	<li><a href="#">首页</a></li>
        <li><a href="#">jQuery特效</a>
        	<div class="submenu">
                <ul>
                    <li><a href="#">jQuery图片特效</a></li>
                    <li><a href="#">jQuery导航特效</a></li>
                    <li><a href="#">jQuery选项卡特效</a></li>
                    <li><a href="#">jQuery文字特效</a></li>
                </ul>
            </div>    
        </li>
        <li><a href="#">JavaScript特效</a></li>
        <li><a href="#">Flash特效</a>
        	<div class="submenu">
                <ul>
                    <li><a href="#">Flash图片特效</a></li>
                    <li><a href="#">Flash导航特效</a></li>
                    <li><a href="#">Flash选项卡特效</a></li>
                    <li><a href="#">Flash文字特效</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">div+css教程</a></li>
 		<li><a href="#">HTML5教程</a></li>
    </ul>
</div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web页面设计实例</title>
<link href=css/style12.css rel="stylesheet" />
</head>
<body>
	<div id="Container">
  		<div id="Header">
            <img src="images/Header.jpg">
            <h4>
            <span>首页</span>
            <span>|</span>
            <span>博客</span>
            <span>|</span>
            <span>设计</span>
            <span>|</span>
            <span>论坛</span>
            <span>|</span>
            <span>关于</span>
            </h4>
  		</div>
  		<div id="PageBody">
    		<div id="SideBar">
             <ul>
				<li><a href="#">首页</a></li>
				  <li><a href="#">博客</a></li>
				<li><a href="#">设计</a></li>
				<li><a href="#">论坛</a></li>
				<li><a href="#">关于</a></li>
             </ul>
			</div>
    		<div id="MainBody">
			<h3>欢度新春佳节</h3>			
<img src="images/huanduchunji.jpg" width="694" height="308" border="0" alt="">
			</div>
  		</div>
  		<div id="Footer">
  			<p>Copyrights 2015-2020  Web前端开发工作室&copy; All rights reserved.  中国江苏</p>  	
  		</div>
	</div>
</body>
</html>
 </body>
</html>

总结

[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页-LMLPHP

本喵是FW

[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页

前言

总结