Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 157421
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
DIV+CSS实现HTML导航条以及导航条下拉面板

分类： Html/Css

2015-12-25 16:14:55


点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html;charset=utf8" />
  4. <title>
  5. 页面导航条
  6. </title>
  7. <style type="text/css">
  8. *{
  9.     padding:0;
  10.     margin:0;
  11.     border:0;
  12.     font-size:100%;
  13. }
  14. h1{
  15.     text-align:center;
  16.     margin:20px auto;
  17.     font-size:1.5em;
  18.     color:red;
  19.     text-shadow:0 0 1px blue;
  20. }
  21. body{
  22.     background:#f0f8ff;
  23. }
  24. .navigation{
  25.     height:50px;
  26.     background:black;
  27. }
  28. .navigation .nav{
  29.     height:50px;
  30.     width:960px;
  31.     margin:0 auto;
  32. }
  33. .navigation .nav li{
  34.     float:left;
  35.     width:119px;
  36.     height:50px;
  37.     text-align:center;
  38.     border-right:1px solid white;
  39.     font-size:1.2em;
  40.     line-height:50px;

  42. }
  43. .navigation .nav li:hover .product{
  44.     width:600px;
  45.     height:400px;
  46. }
  47. .navigation .nav li:hover .product li{
  48.     float:left;
  49.     width:200px;
  50.     height:400px;
  51.     background:white;
  52. }
  53. .navigation .nav li:hover .product li p span{
  54.     font-weight:bolder;
  55. }
  56. .navigation .nav li ul{
  57.     display:none;/*鼠标不悬浮该处时不显示元素*/
  58. }
  59. .navigation .nav li:hover ul{
  60.     display:block;
  61.     background:#f8f7f5;
  62. }
  63. .navigation .nav li:hover ul li{
  64.     font-size:1em;
  65.     border-right:none;
  66.     background:#bbbbbb;
  67. }
  68. .navigation .nav li:hover ul li a{
  69.     color:black;
  70. }
  71. .navigation .nav li:hover ul li a:hover{
  72.     color:black;
  73.     background:#888888;
  74. }
  75. .navigation .nav .last{
  76.     border-right:none;
  77. }
  78. .navigation .nav li a{
  79.     display:block;/*设置元素给块模式*/
  80.     text-decoration:none;
  81.     color:white;
  82. }
  83. .navigation .nav li a:hover{
  84.     display:block;
  85.     width:119px;
  86.     height:50px;
  87.     background:#F00;
  88. }
  89. </style>
  90. </head>
  91. <body>
  92. <h1>HTML导航条下拉面板</h1>
  93. <div class="navigation">
  94. <ul class="nav">
  95. <li><a href="#">首页</a></li>
  96. <li><a href="#">公司产品</a>
  97. <ul class="product">
  98. <li><p><span>指纹考勤机</span></p>
  99. <p>中控-XU</p>
  100. <p>中控-F12</p>
  101. <p>中控-F1000</p>
  102. <p>中控-M160</p>
  103. </li>
  104. <li><p><span>台式电脑</span></p>
  105. <p>lenovo启天4390</p>
  106. <p>lenovo扬天1991</p>
  107. <p>戴尔X60</p>
  108. <p>戴尔M232</p>
  109. <p>苹果OX-8</p>
  110. <p>AppleOX-110</p>
  111. </li>
  112. <li><p><span>手机</span></p>
  113. <p>APPLE</p>
  114. <p>SUMSUNG</p>
  115. <p>LENOVO</p>
  116. <p>VIVO</p>
  117. <p>OPPO</p>
  118. <p>HUAWEI</p>
  119. <p>NOKIA</p>
  120. </li>
  121. </ul>
  122. </li>
  123. <li><a href="#">公司简介</a>
  124. <ul>
  125. <li><a href="#">公司介绍</a></li>
  126. <li><a href="#">公司员工</a></li>
  127. <li><a href="#">企业实力</a></li>
  128. <li><a href="#">先进科技</a></li>
  129. </ul>
  130. </li>
  131. <li><a href="#">公司文化</a></li>
  132. <li><a href="#">大事记</a></li>
  133. <li><a href="#">登录</a></li>
  134. <li><a href="#">注册</a></li>
  135. <li class="last"><a href="#">联系我们</a></li>
  136. </ul>
  137. </div>
  138. </body>
  139. </html>


阅读(3156) | 评论(0) | 转发(0) |
0

上一篇：PHP操作MYSQL数据库

下一篇：PHP日期和JS日期那些事

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6