核心提示：来来，整个html代码已经上传了!DOCTYPE htmlhtmlheadmeta charset=utf-8title导航栏与布局/titlestyle type=text/cssbody, ul,...
来来，整个html代码已经上传了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏与布局</title>
<style type="text/css">
body, ul, li, td { margin:0;padding:0; }
p { background-color: #339933; } /*整体的p的颜色*/
table { #margin: 10px auto;margin:auto;/*自动适应 居中了 哈哈*/border-collapse: collapse;/*去掉四周自带的边距*/ color:white;font-size: 20px; }
td { border-right:1px solid gray;width:150px;height:70px;text-align: center; position: relative;}
/* 盒子四周都有边框，可以单独制定某个方向的边框，最后一个td可以使用:last-child这样的伪类选择器单独指定样式 */
td:last-child { border-right:none; }
td:hover { color:orange; cursor: pointer; }
ul, li { list-style: none; width:150px; color:#F9F9F9;/*去掉小原点*/ }
li { padding:10px 0; /*设置li内容的内边距，上下为10px，左右为0*/ }
.menu { position: absolute; top:70px; left:0;background-color: #ffcccc; display: none; }
td:hover .menu { display: block; } /* display：none表示隐藏，display设置成inline，会直接显示出来，block是鼠标经过之后会显示出来*/
/* 页面的整体布局 */
#content { #margin:10px auto;width:100%;height:500px;text-align:center; display:flex;} /* 让块级的元素在同一行显示 也可以用display：flex */
#left { width:20%;height:500px;background-color: #ff66cc; }
#middle { width:60%;height:500px;background-color: #cc33cc; }
#right { width:20%;height:500px;background-color: #ffcc33; }
/*结尾栏*/
#footer { height:40px;background-color: #cccc33;text-align:center;}
</style>
</head>
<body>
<!-- 导航 -->
<p>
<table>
<tr>
<td>首页</td>
<td>课程
<ul class="menu">
<li>web</li>
<li>HTML</li>
<li>PHP</li>
<li>JAVA</li>
</ul>
</td>
<td>精英
<ul class="menu">
<li>喜洋洋</li>
<li>懒洋洋</li>
<li>沸羊羊</li>
</ul>
</td>
<td>学校
<ul class="menu">
<li>青青草原</li>
<li>灰太狼堡</li>
<li>太空学院</li>
</ul>
</td>
<td>视频
<ul class="menu">
<li>腾讯课堂</li>
<li>慕课网</li>
<li>菜鸟视频</li>
</ul>
</td>
<td>风采
<ul class="menu">
<li>师生互动</li>
<li>艺术赏析</li>
</ul>
</td>
</tr>
</table>
</p>
<!-- 内容 -->
<p id="content">
<p id="left">left</p>
<p id="middle">middle</p>
<p id="right">right</p>
</p>
<!-- 底部 -->
<p id="footer">footer</p>
</body>
</html>
