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

[HTML]Web前端开发技术13(HTML5、CSS3、JavaScript )横向二级导航菜单 Web页面设计实例——喵喵画网页_第1张图片

希望你开心,希望你健康,希望你幸福,希望你点赞!

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

喵喵喵,你对我真的很重要!

目录

前言

横向二级导航菜单

Web页面设计实例

总结


前言

该练的还是要练,终究是自己的!


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

[HTML]Web前端开发技术13(HTML5、CSS3、JavaScript )横向二级导航菜单 Web页面设计实例——喵喵画网页_第2张图片

  • 使用外部样式表为其设置样式,在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.

[HTML]Web前端开发技术13(HTML5、CSS3、JavaScript )横向二级导航菜单 Web页面设计实例——喵喵画网页_第3张图片





二级下拉导航菜单








横向二级导航菜单

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

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

[HTML]Web前端开发技术13(HTML5、CSS3、JavaScript )横向二级导航菜单 Web页面设计实例——喵喵画网页_第4张图片

  • 使用外部样式表为其设置样式,在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




横向二级导航菜单








  • 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

[HTML]Web前端开发技术13(HTML5、CSS3、JavaScript )横向二级导航菜单 Web页面设计实例——喵喵画网页_第5张图片





Web页面设计实例



	

欢度新春佳节


总结

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


希望你开心,希望你健康,希望你幸福,希望你点赞!

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

喵喵喵,你对我真的很重要!

你可能感兴趣的:(喵喵画网页,html,前端,html5,javascript,css3,学习)