[练习6]利用css+js 设计二层导航栏

最新推荐文章于 2024-03-14 16:50:43 发布

beiyuxinke

最新推荐文章于 2024-03-14 16:50:43 发布

阅读量693

点赞数

分类专栏：技术文章标签： js css 二层导航栏

本文链接：https://blog.csdn.net/beiyuxinke/article/details/51090157

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv ="Content-Type" content="text/html; charset=utf-8">
   <title>二级分层导航栏</title>
</head>
   <style type="text/css">
   body{
       text-align: center;/*这里和下面的margin: 0 auto;共同控制居中*/
   }

   #headNav{
       margin: 0 auto;
       height: 80px;
       width: 600px;
       border: 1px solid #f00;
   }

   #mainNav{
       margin: 0 auto;
       top: 2px;
       height: 30px;
       width: 800px;

   }
   .mainItem{
       float: left;//导致横列
       top: 3px;
       height: 27px;
       width: 74px;
       padding: 10px 0px;
       margin: 5px 10px; //这一行控制每个导航块的大小
       text-align: center;
       font-size: 13px;
       background-image: url(img/1.jpg);
       background-repeat: no-repeat;
   }
   .subItemNav{
       position: absolute;
       top: 60px;
       width: 500px;
       height: 30px;
       padding: 2px 0px 0px 50px;
       margin: 3px 10px;
       visibility: hidden;
       background-color: #61B38B;
   }
   .subItemNav a:link,.subItemNav a:visited{
       font-size: 80%;
       color: #ffffff;
   }

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

beiyuxinke

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[练习6]利用css+js 设计二层导航栏

二级分层导航栏 body{ text-align: center;/*这里和下面的margin: 0 auto;共同控制居中*/ } #headNav{ margin: 0 auto; height: 80px; width: 600px; border: 1
复制链接

扫一扫