制作导航栏，通过ul>li实现。
浮动的应用。
去掉li标签小圆点以及a标签下划线
并实现鼠标滑过某一区域出现二维码，平时隐藏。
下面一个代码更加完善合理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<style>
li{
float: left; /*左浮动*/
color: #ccc; /*字体颜色*/
margin-left: 20px;
margin-right:20px; /*左右外边距*/
list-style-type: none; /*去掉li标签文字前面小圆点*/
}
a{
text-decoration: none; /*去掉a标签下划线*/
}
a:link{
color: yellow; /*链接为被访问过的状态*/
}
a:visited{
color: red; /*链接访问过的状态*/
}
a:hover{
color: blue; /*鼠标滑过链接*/
display: block;
}
a:active{
/*border: 5px;
margin: 50px;*/
color: black; /*鼠标点击时*/
}
#aaa{
width:50px;
height:50px;
background-color:red;
display: none;
}
/*#aa1:hover~div{
display: block;
}*/
#aa1:hover+div{
display: block; /*兄弟选择器方法，通过鼠标滑动到“其它”上，显示二维码*/
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">首页</a></li>
<li><a href="">目录</a></li>
<li><a href="">产品</a></li>
<li><a href="">下载</a></li>
<li><a href="">购物车</a></li>
<li><a href="">历史</a></li>
<li><a href="">个人</a></li>
<li><a href="" id="aa1">其它</a><div id="aaa">二维码</div></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<style>
li{
border:2px solid red; /*设置每一个li标签的边框，设置实心，颜色 */
width: 50px;
height: 20px; /*设置li标签宽高*/
/*background-color: gray;*/
float: left; /*左浮动*/
color: #ccc; /*字体颜色*/
margin:0; /*左右外边距*/
list-style-type: none; /*去掉li标签文字前面小圆点*/
}
a{
text-decoration: none; /*去掉a标签下划线*/
}
a:link{
color: yellow; /*链接为被访问过的状态*/
}
a:visited{
color: red; /*链接访问过的状态*/
}
a:hover{
background-color: green;
color: blue; /*鼠标滑过链接*/
display: block;
}
a:active{
/*margin: 50px;*/
color: black; /*鼠标点击时*/
}
#aaa{
width:50px;
height:50px;
background-color:red; /*设置想隐藏的二维码的属性*/
display: none;
}
/*#aa1:hover~div{
display: block;
}*/
#aa1:hover+div{
display: block; /*兄弟选择器方法，通过鼠标滑动到“其它”上，显示二维码*/
}
#aaa:hover{
display: block; /*让鼠标滑过二维码的时候，依然能不隐藏*/
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">首页</a></li>
<li><a href="">目录</a></li>
<li><a href="">产品</a></li>
<li><a href="">下载</a></li>
<li><a href="">购物车</a></li>
<li><a href="">历史</a></li>
<li><a href="">个人</a></li>
<li><a href="" id="aa1">其它</a><div id="aaa">二维码</div></li>
</ul>
</div>
<!-- <script>
var div = document.getElementById(aaa);
</script> -->
</body>
</html>