您的位置：首页 > Web前端 > HTML5

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

2017-06-25 12:19 253 查看

在很久很久之前，我就学过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选择器的写法还是有问题的，有时间多看看好的网站源码学习一下。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航