摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航条</title> <style media="screen&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style media="screen" type="text/css">
body{background-color: #74e0f4;}
.box{float: left;margin: 0px 1px;}
.box:hover{background-color: #ccc;}
.box{width: 100px;height:40px;background-color: #3ac5f9;line-height: 40px;color: #ffffff;}
.main{width:100px;height:40px;background-color:#e24d4d;line-height: 40px;text-align:center;display:none;margin: 1px 0px;}
.box:hover .main{display: block;}
.main:hover{background-color: #000000;}
</style>
</head>
<body>
<ul>html
<li>基础入门</li>
<li>高手进阶</li>
<li>国外文档</li>
</ul>
<ul>css
<li>基础入门</li>
<li>高手进阶</li>
<li>国外文档</li>
</ul>
<ul>javaScript
<li>基础入门</li>
<li>高手进阶</li>
<li>国外文档</li>
</ul>
<ul>jquery
<li>基础入门</li>
<li>高手进阶</li>
<li>国外文档</li>
</ul>
<!-- 所有html元素都可以看做是一个盒子，padding可以定义元素的内边距，也通过left，top来控制单独一边的内边距，用margin可以设置外边距。
通过float可以设置浮动
body{background-color: #74e0f4;}可以设置html的背景颜色。
display-block将元素显示为块级元素， display-none可以隐藏元素，实现导航条的效果。
绝对定位的元素的位置相对于最近的已定位元素，相对定位=当前位置+要移动的像素
float: left;控制元素向左边浮动。-->
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-20 09:06:37
老师总结：理解的有点不对啊，是通过padding-left或者padding-right来控制内边距，还要复习一下啊
