第一部分navbar-wrapper
简要介绍：
本部分为导航部分，会固定在浏览器页面的顶部，不会随文档的滚动而移动。运用无序列表中放入链接（<ul><li><a></a></li></ul>）的方式来实现导航。当鼠标放在该元素上面时，其样式会发生变化。
页面效果：
字体的引入：
<link href=‘http://fonts.googleapis.com/css?family=Quattrocento:400,700‘ rel=‘stylesheet‘ type=‘text/css‘>
<link href=‘http://fonts.googleapis.com/css?family=Patua+One‘ rel=‘stylesheet‘ type=‘text/css‘>
<link href=‘http://fonts.googleapis.com/css?family=Open+Sans‘ rel=‘stylesheet‘ type=‘text/css‘>
HTML代码：
<div class="navbar-wrapper" >
<h1 id="log">Legend!</h1>
<nav id="navbar">
<ul id="menu-main" class="nav">
<li><a href="#Portfolio">Portfolio</a></li>
<li><a href="#Services">Services</a></li>
<li><a href="#News">News</a></li>
<li><a href="#Team">Team</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
</div>
CSS代码：
body{
margin: 0px;
}
.navbar-wrapper{
overflow: hidden; /* 元素内容如果溢出元素框，则会被隐藏*/
width: 100%; /* 宽度铺满全屏*/
height:45px;
padding: 15px;
margin: 0px;
position: fixed; /*使其固定到一个位置，不随页面滚动而移动。*/
left:0px; /*固定到浏览器的顶部。*/
top:0px; /*top属性和left属性定位固定的位置。*/
border-bottom: 1.5px solid #f0bf00;
/*在页面导航的下方添加一条分界线 */
}
#log{
color:white;
font-family: ‘Patua One‘, cursive; /*字体类型*/
padding: 0px 0px 0px 100px;
margin: 0px;
font-size:2.5em;
display:inline-block;
/*inline-block为行内块元素，使元素水平排列*/
}
#navbar{
float:right; /* 导航栏从右往左水平排列*/
padding: 0px 120px 0px 0px;
margin: 0px;
}
#menu-main li {
list-style-type: none; /*列表样式类型*/
float:left; /* 使导航从左往右水平排列*/
}
#menu-main li a{
color:white;
text-decoration: none; /*设置文本无下划线*/
padding:15px;
font-size:1.25em;
font-family: ‘Patua One‘, cursive;
}
#menu-main li a:hover{ /*当鼠标放在元素上时，元素样式发生改变*/
padding:9px 15px;
border-radius:3px;
}
总结：
实现这部分时，遇到的几个问题：
1、如何使它固定在浏览器页面的顶端。
2、列表的默认排列是垂直的，如何使它水平排列。
3、去掉列表前的符号。
4、如何使两个元素在一条水平线上分布。
解决方法：
1、在元素的样式中运用position:fixed;top:0;left:0; fixed表示元素的定位是固定的。top和left为0表示元素定位固定在浏览器页面的顶端。
2、在<li>元素的样式中运用float:left;属性。（从左往右水平排列）
3、在<li>元素的样式中运用list-style-type:none;属性。
4、在第一个元素的样式中运用display:inline-block;使其变为行内块元素。