上部標(biāo)題列展示
1,設(shè)計上部標(biāo)題列初始狀態(tài)
<div id="nav"> <div id="inner-nav"> <a href="#">我的海賊</a> <a href="#">路飛簡介</a> <a href="#">索隆簡介</a> <a href="#">娜美簡介</a> <a href="#">其他人物簡介</a> </div> </div>
展示:
2,加上顏色樣式
body{ margin: 0; margin-bottom: 80px; background-color:lightblue; } #nav{ width: 100%; background-color: skyblue; height: 80px; left: 0; top: 0; position: fixed; z-index: 2; /*text-align: center;*/ } #inner-nav{ width: 1000px; margin: 0 auto; text-decoration: none; text-align: right; height: 80px; line-height: 80px; } #inner-nav a{ margin: 0 20px; text-decoration: none; color: blue; font-size: 24px; display: inline-block; height: 80px; } #inner-nav a:hover{ background-color: white; }
#展示如下: