摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网导航栏模仿</title> <style type="text/css"> *{margin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网导航栏模仿</title>
<style type="text/css">
*{margin: 0px;}
body{background-color: blue;}
.background{width: auto; height: 60px; background-color: #000;}
ul{position: absolute;top: 0px;}
ul li{color: #ccc;list-style: none;width: 100px; height: 60px;line-height: 60px;text-align: center;margin: 0px 30px;float: left;}
.clear{clear: both;}
.box{width: 200px; height: 100px;border: 1px solid #ccc;position: relative;top:5px;left: -50px;display: none;}
.main:hover .box{display: block;}
</style>
</head>
<body>
<div class="background"></div>
<ul>
<li>首页</li>
<li>视频教程</li>
<li>社区问答</li>
<li class="main">编程词典⬇
<div class="clear"></div>
<div class="box">
<span style="position:absolute;;left: 10px">php词典</span>
<span style="position:absolute;right: 10px">技术文章</span>
<span style="position:absolute;bottom: 5px;left: 10px">jquery词典</span>
<span style="position:absolute;bottom: 5px;right: 10px">PHP教程</span>
</div>
</li>
<li>手册下载</li>
<li>工具下载</li>
<li>类库下载</li>
<li>菜鸟学堂</li>
</ul>
</body>
</html>relative 相对定位
相对定位是根据元素本身位置进行变化的！！
absolute 绝对定位
绝对位置是根据父级相对定位进行变化！不存在相关父级就会以body进行定位！
align 排整齐 （text-align: center使文字居中）
line 界限（line-height 设置文字在框里的垂直位置）
float 浮动（float: left; 靠左边一行排列）
clear 清理（clear: both清除浮动）
行内元素绝对定位后会变成块元素
background-repeat:no-repeat（图片不平铺，不重复）repeat-y(沿着垂直方向平铺)repeat-x(沿着水平方向平铺)
background-position:center top（背景图片居中）
批改老师：PHP中文网批改时间：2018-11-04 09:00:01
老师总结：总结的很全面，这些定位多写几次，加深印象，后面会很频繁的用到这些内容
