devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：不正经 | 2024-02-17 02:05:20

赞

踩

html 导航菜单(二级菜单) 高亮

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

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

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

目录

前言

横向二级导航菜单

Web页面设计实例

总结

前言

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

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

  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style10.css
    1. @charset "utf-8";
    2. /* CSS Document */
    3. ul{
    4. 	margin:0;
    5. 	padding:0;
    6. }
    7.  
    8. ul li{
    9. 	height:30px;
    10. 	width:115px;
    11. 	list-style-type:none;
    12. 	float:left;
    13. 	font:0.9em Arial, Helvetica, sans-serif;
    14. 	text-align:center;
    15. 	/*display:inline;*/
    16. }
    17.  
    18. ul li a{
    19. 	color:#fff;
    20. 	width:113px;
    21. 	margin:0px;
    22. 	padding:0 0 0 8px;
    23. 	display:inline-block; /*display:block;*/
    24. 	background:#808080;
    25. 	line-height:29px;
    26. 	border-right:1px solid #ccc;
    27. 	border-bottom:1px solid #ccc;
    28. 	text-decoration:none;
    29. }
    30. ul li a:hover{
    31. 	background-color:#666;
    32. 	border-bottom:1px dashed #ff0000;
    33. }
    34.  
    35. ul li ul li{
    36. 	height:25px;
    37. }
    38.  
    39. ul li ul li a{
    40. 	background-color:#666;
    41. 	line-height:24px;
    42. }
    43.  
    44. ul li ul{
    45. 	display:none; /*visibility:hidden;*/
    46. }
    47.  
    48. ul li:hover ul{
    49. 	display:block; /*visibility:visible;*/
    50. }
    51.  
    52. ul li ul li a:hover{
    53. 	background-color:#333;
    54. }

  • 并设置如下样式：
  • 整体样式和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.

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>二级下拉导航菜单</title>
  6. <link rel="stylesheet" href="CSS/style10.css">
  7. </head>
  8.  
  9. <body>
  10. <div id="nav">
  11. 	<ul>
  12.     	<li><a href="#">首页</a></li>
  13.         <li><a href="#">jQuery特效</a>
  14.         	<ul>
  15.       			<li><a href="#">jQuery图片特效</a></li>
  16.      			<li><a href="#">jQuery导航特效</a></li>
  17.      			<li><a href="#">jQuery选项卡特效</a></li>
  18.       			<li><a href="#">jQuery文字特效</a></li>
  19.      		</ul>
  20.         </li>
  21.         <li><a href="#">JavaScript特效</a></li>
  22.         <li><a href="#">Flash特效</a>
  23.         	<ul>
  24.                 <li><a href="#">Flash图片特效</a></li>
  25.                 <li><a href="#">Flash导航特效</a></li>
  26.                 <li><a href="#">Flash选项卡特效</a></li>
  27.                 <li><a href="#">Flash文字特效</a></li>
  28.         	</ul>
  29.         </li>
  30.         <li><a href="#">div+css教程</a></li>
  31.  		<li><a href="#">HTML5教程</a></li>
  32.     </ul>
  33. </div>
  34. </body>
  35. </html>

横向二级导航菜单

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

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

  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style11.css
    1. @charset "utf-8";
    2. /* CSS Document */
    3. /*定义外层图层样式*/
    4. #menu{
    5. 	padding-left:100px;
    6. 	margin:0 auto;
    7. 	width:100%;
    8. 	height:60px;
    9. 	background-color:#55aaee;
    10. 	border:1px solid #333;
    11. }
    12.  
    13. #menu ul{
    14. 	margin:0;
    15. 	padding:0;
    16. }
    17.  
    18.  /*定义存放子菜单的图层样式*/
    19. .submenu{
    20. 	width:900px;
    21. 	height:28px;
    22. 	text-align:center;
    23. }
    24.  
    25. #menu ul li{
    26. 	height:30px;
    27. 	width:115px;
    28. 	list-style-type:none;
    29. 	float:left;
    30. 	font:0.9em Arial, Helvetica, sans-serif;
    31. 	text-align:center;
    32. }
    33.  /*定义主菜单中超链接样式*/
    34. ul li a{
    35. 	color:#fff;
    36. 	width:114px;
    37. 	margin:0;
    38. 	padding:0 0 0 8px;
    39. 	text-decoration:none;
    40. 	display:block;
    41. 	background-color:#55a0ff;
    42. 	line-height:29px;
    43. 	border-bottom:1px solid #ccc;
    44. }
    45. /*定义子菜单中列表项的样式 */
    46. ul li .submenu ul li{
    47. 	height:25px;
    48. 	width:113px;
    49. 	list-style-type:none;
    50. 	float:left;
    51. 	font:0.8em Arial, Helvetica, sans-serif;
    52. 	text-align:center;
    53. }
    54. /*定义子菜单中超链接的样式 */
    55. ul li .submenu ul li a{
    56. 	background-color:#55aaee;
    57. 	line-height:24px;
    58. }
    59.  
    60. ul li a:hover{
    61. 	background-color:#666;
    62. 	border-bottom:1px dashed #ff0000;
    63. }
    64.  
    65. ul li .submenu{ /*定义子菜单初始状态为不显示 */
    66. 	display:none;
    67. }
    68.  
    69. ul li:hover .submenu{
    70. 	display:block;
    71. }
    72.  
    73. ul li .submenu ul li a:hover{
    74. 	background-color:#333;
    75. }

  • 并设置如下样式：
  • 定义外层图层样式（#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
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>横向二级导航菜单</title>
  6. <link rel="stylesheet" href="css/style11.css">
  7. </head>
  8.  
  9. <body>
  10. <div id="menu">
  11. 	<ul>
  12.     	<li><a href="#">首页</a></li>
  13.         <li><a href="#">jQuery特效</a>
  14.         	<div class="submenu">
  15.                 <ul>
  16.                     <li><a href="#">jQuery图片特效</a></li>
  17.                     <li><a href="#">jQuery导航特效</a></li>
  18.                     <li><a href="#">jQuery选项卡特效</a></li>
  19.                     <li><a href="#">jQuery文字特效</a></li>
  20.                 </ul>
  21.             </div>    
  22.         </li>
  23.         <li><a href="#">JavaScript特效</a></li>
  24.         <li><a href="#">Flash特效</a>
  25.         	<div class="submenu">
  26.                 <ul>
  27.                     <li><a href="#">Flash图片特效</a></li>
  28.                     <li><a href="#">Flash导航特效</a></li>
  29.                     <li><a href="#">Flash选项卡特效</a></li>
  30.                     <li><a href="#">Flash文字特效</a></li>
  31.                 </ul>
  32.             </div>
  33.         </li>
  34.         <li><a href="#">div+css教程</a></li>
  35.  		<li><a href="#">HTML5教程</a></li>
  36.     </ul>
  37. </div>
  38. </body>
  39. </html>

  • Web页面设计实例

  • 参照下图的显示效果完成网页的制作
  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style12.css
    1. @charset "utf-8";
    2. /* CSS Document */
    3. /* exp_10_1.css */
    4.  
    5. body { 
    6. 	font-family:Verdana; 
    7. 	font-size:16px; 
    8. 	margin:0;
    9. 	text-align:center;
    10. }
    11. h4{float:left;margin:45px auto;padding-left:50px;}
    12. p{margin:2px;font-size:14px;
    13. }
    14. #Container {margin:0 auto; 
    15. 	width:900px;
    16. }
    17. #Header { 
    18. 	height:118px;  
    19. 	border-bottom:5px;
    20. 	background-color:rgb(230,230,230);
    21.     border-bottom:5px solid #FFFFFF;   
    22. }
    23. #PageBody { 
    24. 	height:380px; 
    25. 	border-bottom:5px solid #FFFFFF;
    26. }
    27. #SideBar { 
    28. 	float:left; 
    29. 	width:200px; 
    30. 	height:380px; 
    31. 	background:#Dff100;
    32. 	text-align:center;
    33. 	padding:50px auto;	
    34. 	border-right:5px solid #FFFFFF;
    35. }
    36. #MainBody { 
    37. 	float:right; 
    38. 	width:695px; 
    39. 	height:380px; 
    40. 	background:#cff000;
    41. }
    42. #Footer { 
    43. 	height:60px; 
    44. 	background-color:rgb(230,230,230);
    45. 	text-align:center;
    46. 	font-family:"Courier New";
    47. 	font-size:12px;
    48. 	padding-top:10px;
    49. }
    50. #Header img{
    51. 	float:left;	
    52. }
    53.  span{margin-top:45px;width:50px;height:30px;font-size:20px;font-family:"华文新魏";padding:45px 10px; 
    54.  vertical-align:middle;text-align:center;
    55.  }
    56.  
    57. a{width:48px;height:24px;	
    58. 	font-size:20px;
    59. 	font-family:"华文新魏";	text-align:center;
    60. }
    61. ul{list-style-type:none;margin:0px;padding:35px;text-align:center;}
    62. li{ width:50px;height:30px;
    63. 	font-size:20px;
    64. 	font-family:"华文新魏";	
    65. 	padding:10px 35px;
    66. }
    67. h3{text-align:center;color:red;font-size:24px;
    68. background:#CFF000;padding:6px auto;}
    69. a:link,a:visited,a:active{text-decoration:none;display:block; }
    70. a:hover{border-bottom:2px solid #FF0000;background:#55A0FF;color:#FFFFFF;}

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Web页面设计实例</title>
  6. <link href=css/style12.css rel="stylesheet" />
  7. </head>
  8. <body>
  9. 	<div id="Container">
  10.   		<div id="Header">
  11.             <img src="images/Header.jpg">
  12.             <h4>
  13.             <span>首页</span>
  14.             <span>|</span>
  15.             <span>博客</span>
  16.             <span>|</span>
  17.             <span>设计</span>
  18.             <span>|</span>
  19.             <span>论坛</span>
  20.             <span>|</span>
  21.             <span>关于</span>
  22.             </h4>
  23.   		</div>
  24.   		<div id="PageBody">
  25.     		<div id="SideBar">
  26.              <ul>
  27. 				<li><a href="#">首页</a></li>
  28. 				  <li><a href="#">博客</a></li>
  29. 				<li><a href="#">设计</a></li>
  30. 				<li><a href="#">论坛</a></li>
  31. 				<li><a href="#">关于</a></li>
  32.              </ul>
  33. 			</div>
  34.     		<div id="MainBody">
  35. 			<h3>欢度新春佳节</h3>			
  36. <img src="images/huanduchunji.jpg" width="694" height="308" border="0" alt="">
  37. 			</div>
  38.   		</div>
  39.   		<div id="Footer">
  40.   			<p>Copyrights 2015-2020  Web前端开发工作室&copy; All rights reserved.  中国江苏</p>  	
  41.   		</div>
  42. 	</div>
  43. </body>
  44. </html>
  45.  </body>
  46. </html>

总结

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

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/98972
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号