HTML5与CSS3学习笔记：导航栏（二）下拉菜单

最新推荐文章于 2024-05-19 09:58:49 发布

露露与之

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量4.4k

点赞数 1

分类专栏： html5 css3 文章标签： html5 css3

本文链接：https://blog.csdn.net/aoumeior/article/details/73711825

版权

html5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

在很久很久之前，我就学过html，但是为那时候没有动力去学，一个主要的原因就是恶心，我觉得那时候HTML不完美，各种标签滥用，无语义，布局方法不完美。

由于学过c++，我在毫不费力的在看完HTML文档后，就在HTML的各种框架中遨游起来，后来我发现。。。这就是个体力活，我花费的在修改HTML（css,js）中的时间，不亚于我去深入理解的它的时间，因此我打算重新学习一下这个语言。希望能收获很多。

我所认为优秀的前端代码，HTML语义清晰，css样式各司其职、并且能最小粒度的更改样式。

源码如下：

<html>
<head>
<meta charset="utf-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title>导航栏</title>

    <style>

        body {

            margin: 0px;
            padding: 0px;
        }


        a {

            font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu
        }

        ul {

            margin: 0px;
            padding:0px;
            width: 100%;

            display: inline-flex;
            display: -webkit-inline-flex;   /* Safari */
        }

        ul > li {

            display:  inline-block;

            flex-grow: 2;
            padding: 0.5vw;
            background-color: #000;
            text-align: center;
        }

        ul > li > a {

            color: #fff;
            font-size: 20px;
            text-decoration: none;
        }

        .dropdown {

            display: none;

            position: absolute;

            width: 200px;
            text-align: center;
        }

        .dropdown a {

            display: block;

            width: 200px;
            color: white;
            font-size: 15px;    
            line-height: 30px;      
        }

        ul  li:hover .dropdown {

            display: block;
            background-color: black;
        }



        @media only screen and (min-width: 0px) and (max-width: 640px) {

            .none_display {

                display: none;
            }


            .dropdown {

                display: none;

                width: 100px;
                text-align: center;
                position: absolute;
            }

            .dropdown a {

                display: block;

                color: white;
                width: 100px;
                font-size: 15px;    
                line-height: 30px;      
            }

        }

    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">语言</a>
            <div class="dropdown">
                <a href="webpage/about.htm">c++</a>
                <a href="webpage/about.htm">java</a>
                <a href="webpage/about.htm">python</a>
            </div>
        </li>
        <li><a href="#">导航</a>
            <div class="dropdown">
                <a href="webpage/about.htm">c++</a>
                <a href="webpage/about.htm">java</a>
                <a href="webpage/about.htm">python</a>
            </div>
        </li>
        <li><a href="#">导航</a></li>
        <li><a href="#">导航</a></li>
        <li class="none_display"><a href="#">导航</a></li>
        <li class="none_display"><a href="#">导航</a></li>
    </ul>
</nav>
</body>
</html>

下拉菜单写的方法其实就利用了absolute的破坏性，另外让下拉菜单内的a标签设为display:block这样才能变成一列的菜单。

虽说仅仅是入门的代码，却让我查了很多资料，一个比较让我认同的，也觉得写的比较好的我列一下

【1】css-相对绝对定位系列（一）
【2】css-相对绝对定位系列（二）

作者大量的引用了京东、淘宝的例子，为了说明margin在定位中比left更好，我比较不赞同作者的观点，一是京东和淘宝对不同的客户端是提供不同的html，另外是left的语义比margin更好。

对于自己我觉得这里的css选择器的写法还是有问题的，有时间多看看好的网站源码学习一下。

露露与之

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML5与CSS3学习笔记：导航栏（二）下拉菜单

在很久很久之前，我就学过html，但是为那时候没有动力去学，一个主要的原因就是恶心，我觉得那时候HTML不完美，各种标签滥用，无语义，布局方法不完美。由于学过c++，我在毫不费力的在看完HTML文档后，就在HTML的各种框架中遨游起来，后来我发现。。。这就是个体力活，我花费的在修改HTML（css,js）中的时间，不亚于我去深入理解的它的时间，因此我打算重新学习一下这个语言。希望能收获很多。我所认为
复制链接

扫一扫