作者：zackcoolgirl_497 | 来源：互联网 | 2023-05-16 18:38
在很久很久之前，我就学过html，但是为那时候没有动力去学，一个主要的原因就是恶心，我觉得那时候HTML不完美，各种标签滥用，无语义，布局方法不完美。由于学过c++，我在毫不费力的在看
在很久很久之前，我就学过html，但是为那时候没有动力去学，一个主要的原因就是恶心，我觉得那时候HTML不完美，各种标签滥用，无语义，布局方法不完美。
由于学过c++，我在毫不费力的在看完HTML文档后，就在HTML的各种框架中遨游起来，后来我发现。。。这就是个体力活，我花费的在修改HTML（css,js）中的时间，不亚于我去深入理解的它的时间，因此我打算重新学习一下这个语言。希望能收获很多。
我所认为优秀的前端代码，HTML语义清晰，css样式各司其职、并且能最小粒度的更改样式。
源码如下：
<html>
<head>
<meta charset="utf-8">
<meta name=”viewport” content=”hljs-attribute">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;
}
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选择器的写法还是有问题的，有时间多看看好的网站源码学习一下。
京公网安备 11010802041100号