<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到我的世界</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 设置此文件里所有外边距和填充都是默认值0 */
ul {
list-style-type: none;
/*美观去除列表标签 */
background-color: wheat;
/*设置导航栏的背景色*/
display: block;
overflow: hidden;
}
li {
float: left;
}
/* 设置列表水平排布，单独为此的话，列表项会挤在一起 */
a {
text-decoration: none;
/* 去除链接上的下划线，美观 */
display: inline-block;
/* 设置列表项的排布方式 */
color: rgb(184, 12, 169);
/* 设置列表项的文字颜色 */
padding: 12px 16px;
/* 使多个列表项分开，美观 */
border-left: 1px solid black;
/* 设置列表项之间的边框分割线，注意solid必须有*/
background-color: rgb(94, 211, 152);
/* 设置列表项的背景色 */
}
.made1 {
display: inline-block;
}
.made2 {
display: block;
}
.made2:hover .made3 {
display: block;
}
a:hover {
background-color: darkgrey;
color: darkslategray;
}
/* 设置指针悬浮在链接上时链接的背景色和文字颜色 */
.made3 {
display: none;
position: absolute;
background-color: #000000;
min-width: 97px;
text-align: center;
/*设置文本显示为中央*/
/* 之前错误一直在这里，我写重了两个display，一个为none，一个为inline-block */
}
.made3 a {
color: dimgray;
padding: 8px 8px;
text-decoration: none;
display: block;
}
.made1:hover .made3 {
display: block;
}
.made4 {
width: 100%;
height: 100px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p style="line-height: 0;"><img class="made4"
src="http://cdn.duitang.com/uploads/item/201211/21/20121121100635_yPV3U.jpeg" alt="头图片">
</p>
<p style="line-height: 0;">
<!-- 适用line-height消除行高，以便衔接 -->
<ul>
<!-- 以下为导航栏的内容设计，所有css属性均在上方 -->
<li><a href="#home">我的主页</a></li>
<li><a href="https://www.baidu.com">百度</a></li>
<li><a href="//www.greatytc.com">简书</a></li>
<li><a href="https://bilibili.com">破站</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/">MDN</a></li>
<div class="made1">
<a href="#" class="made2">更多内容</a>
<div class="made3">
<a href="https://github.com/">Github</a>
<a href="https://www.zhihu.com/signin?next=%2F">支护</a>
<a href="https://www.w3school.com.cn/">w3school</a>
</div>
</div>
</ul>
</p>
</body>
</html>
图
呼！终于把导航栏的最基本操作学会了，随便添加了页眉图片（虽然不知道是不是叫这个），但又冒出来新的问题！总结如下，收获挺大的，虽然都是基操……
- 难点在于实现下拉菜单，这可以通过至少两种方式实现（我只会两种），第一仅通过列表，这样需要每创建一个栏目都必须设置一个ul列表。第二种是一个列表加上div块，本文为后者。
- 下拉菜单注意css中class属性对于下拉菜单部分，要实现实际效果，必须使其在前面所有的块属性的hover设置都为block
如：本文关于设置导航栏，made3为最后一个，故必须有.made1：hover .made3和.made2：hover .made3,且其显示都应该为block。 - 当设置页眉图片时，由于上下行之间有行高，故采用line-height：0消除行高，也算一种应用吧？
- 设置图片时出现另一个问题，图片被压缩了，我设置了width：100%；height：100px，但图片被压缩了，我以为是显示上半部分，所以有待解决。
- 网上看都说css简单，如今看来，学会了才能说简单……
- 注意：我的所有文章都是个人感想，可能有很多错误，这就是我摸索的一个过程。
-
补：
对于第4点，可以采用clip剪裁，但很麻烦，也可以用div强制显示，但得不到想要的部分，而且图片显示随窗口变化也会变化显示部位，除了纯色，其它图片影响较大，纠结~
使用div强制显示
上次忘了
突然发现知乎打错了，尴尬，改是不可能改的！！！！
没有设置背景图片，因为用多了就懒得弄了，而且对于图片我才刚了解。
注意下拉菜单同样针对图片和文本，不应该仅仅局限于导航栏，故可以创建图片放大功能（即用一大一小图片分别显示）和提示文本，只是为达到目的，需将链接更换为button，文本，图片
未移动鼠标时
移动鼠标后
- 对应代码，注意由于是直接在原来基础上改的，故有多余内容未删减：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
下拉菜单的实现
</title>
<style>
* {
margin: 20px;
padding: 0;
border: 0px;
}
.class1 {
background-color: teal;
}
.class2 {
display: none;
position: absolute;
}
.class1:hover .class2 {
display: block;
position: absolute;
}
.class2:hover {
display: block;
border: 0;
margin: 0px;
padding: 0px;
position: absolute;
}
.class0 {
display: inline-block;
position: relative;
}
.class0:hover .class2 {
display: block;
margin: 0;
position: absolute;
}
.class3 {
text-align: center;
margin: 0;
padding: 0px;
}
</style>
</head>
<body>
<div class="class0">
<button class="class1">
<img src="https://www.easyicon.net/api/resizeApi.php?id=1239251&size=16" alt="">
</button>
<div class="class2">
<img src="https://www.easyicon.net/api/resizeApi.php?id=1239251&size=128" alt="">
<div class="class3"> 奇幻城堡</div>
</div>
</div>
</body>
</html>
# 注意可以使用
left: 105%;
top: -5px;
定位提示框在右侧，同理可以类推出左侧，上和下
