直接上代码了
html结构
写好上面的结构代码之后，也就是将我们页面展示的内容显示了，但是我们此时要利用我们学过的知识点来布局页面
首先我们要做导航栏，并排显示元素，第一想 浮动，想到使用浮动之后，一定记得清除浮动元素。
css代码如下：
*{ padding: 0; margin: 0; } ul{ list-style: none; } .nav{ width: 960px; /*height: 40px;*/ overflow: hidden; margin: 100px auto ; background-color: purple; /*设置圆角*/ border-radius: 5px; } .nav ul li{ float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; } .nav ul li a{ display: block; width: 160px; height: 40px; color: white; font-size: 20px; text-decoration: none; font-family: 'Hanzipen SC'; } /*a标签除外，不继承父元素的color*/ .nav ul li a:hover{ background-color: red; font-size: 22px; }