第一部分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;使其變為行內塊元素。

HTML+CSS頁面練習——legend第一部分