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

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

横向二级导航菜单

Web页面设计实例

总结

---

前言

该练的还是要练，终究是自己的！

---

• 网页标题：二级下拉导航菜单
• 网页的主体部分代码为：

• 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style10.css

• @charset "utf-8";
  /* CSS Document */
  ul{
  	margin:0;
  	padding:0;
  }
  
  ul li{
  	height:30px;
  	width:115px;
  	list-style-type:none;
  	float:left;
  	font:0.9em Arial, Helvetica, sans-serif;
  	text-align:center;
  	/*display:inline;*/
  }
  
  ul li a{
  	color:#fff;
  	width:113px;
  	margin:0px;
  	padding:0 0 0 8px;
  	display:inline-block; /*display:block;*/
  	background:#808080;
  	line-height:29px;
  	border-right:1px solid #ccc;
  	border-bottom:1px solid #ccc;
  	text-decoration:none;
  }
  ul li a:hover{
  	background-color:#666;
  	border-bottom:1px dashed #ff0000;
  }
  
  ul li ul li{
  	height:25px;
  }
  
  ul li ul li a{
  	background-color:#666;
  	line-height:24px;
  }
  
  ul li ul{
  	display:none; /*visibility:hidden;*/
  }
  
  ul li:hover ul{
  	display:block; /*visibility:visible;*/
  }
  
  ul li ul li a:hover{
  	background-color:#333;
  }
  

• 并设置如下样式：

• 整体样式和8-8中的style8.css中的样式一致。
• 需要增加的样式就是设置二级下拉导航菜单的隐藏/显示，以及二级菜单单独的样式效果。
• 利用后代选择器（ul li ul li）设置二级菜单中li的高度为25px。
• 利用后代选择器（ul li ul li a）设置二级菜单中a的背景颜色为#666，行高24px。
• 利用后代选择器（ul li ul）设置ul初始的时候为隐藏（不显示[display:none]）
• 利用后代选择器（ul li:hover ul）设置当鼠标悬停在一级导航菜单上时，显示二级菜单。
• 利用后代选择器（ul li ul li a:hover）设置鼠标悬停在二级菜单的超链接上时，超链接的背景颜色为#333.

	

    	
首页
        
jQuery特效
        	

      			
jQuery图片特效
     			
jQuery导航特效
     			
jQuery选项卡特效
      			
jQuery文字特效
     		
        
        
JavaScript特效
        
Flash特效
        	

                
Flash图片特效
                
Flash导航特效
                
Flash选项卡特效
                
Flash文字特效
        	
        
        
div+css教程
 		
HTML5教程
    

---

横向二级导航菜单

网页标题：横向二级导航菜单

• 网页的主体部分代码为：

• 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style11.css

• @charset "utf-8";
  /* CSS Document */
  /*定义外层图层样式*/
  #menu{
  	padding-left:100px;
  	margin:0 auto;
  	width:100%;
  	height:60px;
  	background-color:#55aaee;
  	border:1px solid #333;
  }
  
  #menu ul{
  	margin:0;
  	padding:0;
  }
  
   /*定义存放子菜单的图层样式*/
  .submenu{
  	width:900px;
  	height:28px;
  	text-align:center;
  }
  
  #menu ul li{
  	height:30px;
  	width:115px;
  	list-style-type:none;
  	float:left;
  	font:0.9em Arial, Helvetica, sans-serif;
  	text-align:center;
  }
   /*定义主菜单中超链接样式*/
  ul li a{
  	color:#fff;
  	width:114px;
  	margin:0;
  	padding:0 0 0 8px;
  	text-decoration:none;
  	display:block;
  	background-color:#55a0ff;
  	line-height:29px;
  	border-bottom:1px solid #ccc;
  }
  /*定义子菜单中列表项的样式 */
  ul li .submenu ul li{
  	height:25px;
  	width:113px;
  	list-style-type:none;
  	float:left;
  	font:0.8em Arial, Helvetica, sans-serif;
  	text-align:center;
  }
  /*定义子菜单中超链接的样式 */
  ul li .submenu ul li a{
  	background-color:#55aaee;
  	line-height:24px;
  }
   
  ul li a:hover{
  	background-color:#666;
  	border-bottom:1px dashed #ff0000;
  }
  
  ul li .submenu{ /*定义子菜单初始状态为不显示 */
  	display:none;
  }
  
  ul li:hover .submenu{
  	display:block;
  }
  
  ul li .submenu ul li a:hover{
  	background-color:#333;
  }
  	

• 并设置如下样式：

• 定义外层图层样式（#menu）：左内边距100px，相对于页面居中显示，宽100%，高60px，背景颜色#55aaee，边框1px 实线 #333
• 定义主菜单样式（#menu ul）:内外边距均为0
• 定义主菜单li的样式（#menu ul li）:高30px，宽115px，不显示项目符号，向左浮动，字体大小0.9em，Arial系列字体，文本居中对齐
• 定义主菜单中超链接样式(ul li a):字体颜色白色，宽114px，外边距0，左内边距8px，其余内边距均为0，无下划线，显示为块级元素，背景颜色为#55a0ff，行高29px，下边框线1px 实线 #ccc
• 定义主菜单中鼠标悬停在超链接上的样式（ul li a:hover）:背景颜色#666，下边框线1px 虚线 #f00
• 定义子菜单图层样式（.submenu）:宽900px，高28px，文本居中对齐
• 定义子菜单中列表项的样式(ul li .submenu ul li):高25px，宽113px，不显示项目符号，向左浮动，字体大小0.8em，Arial字体系列，文本居中显示
• 定义子菜单中超链接的样式（ul li .submenu ul li a）:背景颜色#55aaee，行高24px
• 定义子菜单初始状态为不显示(ul li .submenu)
• 定义鼠标悬停在主菜单列表项上时显示其下的子菜单(ul li:hover .submenu)
• 定义鼠标悬停在子菜单的超链接上时的样式(ul li .submenu ul li a:hover)：背景颜色#333

	

    	
首页
        
jQuery特效
        	

                

                    
jQuery图片特效
                    
jQuery导航特效
                    
jQuery选项卡特效
                    
jQuery文字特效
                
            
    
        
        
JavaScript特效
        
Flash特效
        	

                

                    
Flash图片特效
                    
Flash导航特效
                    
Flash选项卡特效
                    
Flash文字特效
                
            
        
        
div+css教程
 		
HTML5教程
    

---

• Web页面设计实例

• 参照下图的显示效果完成网页的制作

• 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style12.css

• @charset "utf-8";
  /* CSS Document */
  /* exp_10_1.css */
  
  body { 
  	font-family:Verdana; 
  	font-size:16px; 
  	margin:0;
  	text-align:center;
  }
  h4{float:left;margin:45px auto;padding-left:50px;}
  p{margin:2px;font-size:14px;
  }
  #Container {margin:0 auto; 
  	width:900px;
  }
  #Header { 
  	height:118px;  
  	border-bottom:5px;
  	background-color:rgb(230,230,230);
      border-bottom:5px solid #FFFFFF;   
  }
  #PageBody { 
  	height:380px; 
  	border-bottom:5px solid #FFFFFF;
  }
  #SideBar { 
  	float:left; 
  	width:200px; 
  	height:380px; 
  	background:#Dff100;
  	text-align:center;
  	padding:50px auto;	
  	border-right:5px solid #FFFFFF;
  }
  #MainBody { 
  	float:right; 
  	width:695px; 
  	height:380px; 
  	background:#cff000;
  }
  #Footer { 
  	height:60px; 
  	background-color:rgb(230,230,230);
  	text-align:center;
  	font-family:"Courier New";
  	font-size:12px;
  	padding-top:10px;
  }
  #Header img{
  	float:left;	
  }
   span{margin-top:45px;width:50px;height:30px;font-size:20px;font-family:"华文新魏";padding:45px 10px; 
   vertical-align:middle;text-align:center;
   }
  
  a{width:48px;height:24px;	
  	font-size:20px;
  	font-family:"华文新魏";	text-align:center;
  }
  ul{list-style-type:none;margin:0px;padding:35px;text-align:center;}
  li{ width:50px;height:30px;
  	font-size:20px;
  	font-family:"华文新魏";	
  	padding:10px 35px;
  }
  h3{text-align:center;color:red;font-size:24px;
  background:#CFF000;padding:6px auto;}
  a:link,a:visited,a:active{text-decoration:none;display:block; }
  a:hover{border-bottom:2px solid #FF0000;background:#55A0FF;color:#FFFFFF;}
  

• 建议页面的宽度设置为900px

	

  		

            
            

            首页
            |
            博客
            |
            设计
            |
            论坛
            |
            关于
            
  		
  		

    		

             

				
首页
				  
博客
				
设计
				
论坛
				
关于
             
			
    		

			
欢度新春佳节
			

			
  		
  		

  			
Copyrights 2015-2020  Web前端开发工作室© All rights reserved.  中国江苏
  	
  		
	


 

---

总结

不用一模一样，自己可以做个升级，有自己的风格！那真是超赞的！

---

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！