前端基础小案例-仿新浪网页下拉菜单

鱼与云游

于 2022-12-06 12:23:22 发布

阅读量489

点赞数

文章标签： javascript 前端 html css css3

本文链接：https://blog.csdn.net/weixin_51983027/article/details/128194693

版权

一、需要掌握的知识
二、思路
1. 阐述
2. 运行截图
3. 敲代码遇到的一些问题
4. 总结

一、需要掌握的知识

html无序列表的知识
a标签的使用
css基本样式的使用
选择器的基本使用
伪类的使用
js子节点的使用

二、思路

1.阐述

这个小案例html，css设置比较主要，js代码的逻辑很少，先是设置html骨架，这个不用说了吧，然后就是css样式属性的设置，这个因为是前面的知识，我也是有一点遗忘，说到的还是敲得不够，把小圆点，下划线清除，首先是吧ul>li看成一个整体就有四个li，然后float一下，就横着排列，然后设置大小，位置，里面的a呢，因为是继承也得到这些，但是得变成块元素才能拥有宽度，所以所以，然后在设置居中的css样式，设置边框线，因为是ul>li>ul的边框线，位置得找准，下划线呢，再往里面一层li设置下边框线然后设置一下伪类就大功告成，display：none；别忘了。js的语法就是获取元素，用到了子节点children，书写事件，onmouseover,onmouseout,记牢，显示隐藏呢？是li的第二个子节点所以childred[1]关键

代码如下（示例）：

   <style>
        *{
            margin: 0;
            padding:0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .nav>li{
            float: left;
            width: 80px;
            height: 40px;
            padding: 20px 40px;
        }
        .nav li a{
            display: block;
            line-height: 40px;
            text-align: center;

        }
        .nav li ul{
            display: none;
            border-left: 1px solid red;
            border-right: 1px solid yellow;
        }
        .nav li ul li{
            border-bottom: 1px solid blue;
        }
        .nav li ul a:hover {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
  <ul class="nav">
<li>
        <a href="#">登录</a>
    <ul>
        <li>
            <a href="#">用户名</a>
        </li>
        <li>
            <a href="#">密码</a>
        </li>
        <li>
            <a href="#">邮箱</a>
        </li>
        <li>
            <a href="#">验证码</a>
        </li>
    </ul>
</li>
    <li>
        <a href="#">微博</a>
    <ul>
        <li>
            <a href="#">评论</a>
        </li>
        <li>
            <a href="#">私信</a>
        </li>
        <li>
            <a href="#">@我</a>
        </li>
        <li>
            <a href="#">@你</a>
        </li>
    </ul>
</li>
<li>
        <a href="#">博客</a>
    <ul>
        <li>
            <a href="#">可读</a>
        </li>
        <li>
            <a href="#">不可读</a>
        </li>
        <li>
            <a href="#">可见</a>
        </li>
        <li>
            <a href="#">不可见</a>
        </li>
    </ul>
</li>
<li>
        <a href="#">邮箱</a>
    <ul>
        <li>
            <a href="#">免费的</a>
        </li>
        <li>
            <a href="#">VIP的</a>
        </li>
        <li>
            <a href="#">家用的</a>
        </li>
        <li>
            <a href="#">企业的</a>
        </li>
    </ul>
</li>
  </ul>
  <script>
    var nav=document.querySelector('.nav')
    var lis=nav.children;
    for(var i=0;i<lis.length;i++){
        lis[i].onmouseover=function(){
            this.children[1].style.display='block';
        }
        lis[i].onmouseout=function(){
            this.children[1].style.display='none';
        }
    }
  </script>

2.运行截图

3.敲代码遇到的一些问题

敲代码的过程中也是感觉困难重重啊，why？前面的知识有一些遗忘，需要补！！！具体是哪些问题的出现呢？display:block;因为没有给a设置block导致hover的时候只是在文本内显示，还有的就是 list-style: none;text-decoration: none;text-align: center;导致文本出现的方式很窄，a的下拉线还有消除小点等等这些小知识，逐步开始回顾，还有回顾块模型，和页面整体的一个排列方式，虽然这只有几个元素，还有children的使用还不是很熟，事件的名字记得不是很牢，继续学习父子节点的知识和使用，温故而知新！！！多敲代码！！！