導覽列篇
導覽列
標頭中,有很多可以使用的元素像是<header><nav><div>等等。 目前使用div使用方式,而像是其他元素都是可以這樣活用的。
浮動

<ul class="navi">
<li>
<a href="javascript:;">
商業平面設計
</a>
</li>
<li>
<a href="javascript:;">
數位繪畫
</a>
</li>
<li>
<a href="javascript:;">
前端網頁設計
</a>
</li>
<li>
<a href="javascript:;">
工業產品設計
</a>
</li>
<li>
<a href="javascript:;">
UI 介面設計
</a>
</li>
</ul>
浮動 - 1

<ul class="navi">
<li>
<a href="javascript:;">
商業平面設計
</a>
</li>
<li>
<a href="javascript:;">
數位繪畫
</a>
</li>
<li>
<a href="javascript:;">
前端網頁設計
</a>
</li>
<li>
<a href="javascript:;">
工業產品設計
</a>
</li>
<li>
<a href="javascript:;">
UI 介面設計
</a>
</li>
</ul>
導覽置中
.article {
padding: 10px;
width: 1080px;
margin-left: auto;
margin-right: auto;
}
.article p {
line-height: 1.7;
}
.navi{
width: 1100px;
list-style-type: none;
padding-left: 0;
height: 40px;
margin-right: auto;
margin-left: auto;
}
.navi li{
float: left;
margin-left: 10px;
margin-right: 10px;
}
.navi li a {
display: block;
width: 200px;
border-bottom:solid 2px #ccc;
text-align: center;
line-height: 40px;
text-decoration: none;
color: #000;
/* background-color: #ccc; */
}
.navi li a:hover{
background-color: #45f;
color:#fff;
}
<ul class="navi">
<li><a class="line_color1" href="javascript:;">商業平面設計</a></li>
<li><a class="line_color2" href="javascript:;">數位繪畫</a></li>
<li><a class="line_color3" href="javascript:;">前端網頁設計</a></li>
<li><a class="line_color4" href="javascript:;">工業產品設計</a></li>
<li><a class="line_color5" href="javascript:;">UI 介面設計</a></li>
</ul>
Last updated
Was this helpful?