W3School原网页：
效果图：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>W3School导航条</title><link rel="stylesheet" href=".//css/reset.css"><style>body{background-color: #FDFCF8;/* 设置网页的背景色 */}/* 导航条整体的设置 */.nav{width: 1210px;height: 48px;margin: 100px auto;background-color: #E8E7E3;}/* 每个菜单项的设置 */.nav a{height: 48px;float: left;/* 设置各菜单项为浮动元素 */font-size: 18px;color: #7F7F7F;line-height: 48px; /* 当line-height和父元素的高度相同时，元素会自动垂直居中 */text-decoration: none;/* 去除超链接的下划线 *//* 将每个菜单项的左右内边距设为相同的大小 */padding-right: 39px; padding-left: 39.5px;}/*由于导航栏末尾多出3px，故对其单独处理*/.nav li:last-child a{padding-left: 40px;padding-right: 40.25px;}/* 鼠标移入菜单项时的操作 */.nav a:hover{color: #E7E6E2;background-color: #3F3F3F;}</style></head><body><ul class="nav"><li><a href="">HTML/CSS</a></li><li><a href="">Browser Side</a></li><li><a href="">Server Side</a></li><li><a href="">Programming</a></li><li><a href="">XML</a></li><li><a href="">Web Building</a></li><li><a href="">Reference</a></li></ul></body></html>
积跬步，至千里！
加油！上学人！
