第8天：CSS製作導覽列

最後更新：2017-08-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：type css 投資 src 無法 center font banner header

今天主要學習了網頁導覽列的製作。注意：引入外部CSS樣式時，如果使用background：url（../images/1.png）,一定記得用..跳出當前檔案夾，回到上級目錄。

一、導覽列實現步驟：

1、網頁整體分為頭部、內容、尾部。網頁中心內容部分為版心。版心是定寬的。

2、設定版心寬度。其餘每部分內容只需要設定高度即可。

3、header部分分為左、中、右三部分。分別用div包起來，可以設定padding。

4、nav部分用ul實現，li中的a標籤為行內元素，要用display轉為塊標籤，給li設定寬高、行高，可以實現置中。

5、滑鼠移上去的效果用a：hover實現。

導覽列代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<style>

*{
margin:0;
padding:0;
}
body{
font-family: "微軟雅黑";
font-size: 16px;
}
.header{
height:58px;
background: #191D3A;
}
.header .inner_c{
width:1000px;
margin: 0 auto;
}
.header .logo{
float:left;
padding-right: 50px;
}
.header .nav{
float:left;
}
.header .nav li{
line-height: 58px;
list-style: none;
float:left;
text-align: center;
border-right: 1px solid #212542;
}
.header .nav .last{
border: none;
}
.header .nav li a{
display: block;
height:58px;
width:100px;
text-decoration: none;
color: #6B6889;
}
.header .nav li .current{
color: #fff;
background: #252947;
}
.header .nav li a:hover{
color: #fff;
background: #252947;
};
.header .jrwm_box{
float: left;
}
.header .jrwm{
padding-left: 48px;
padding-top: 12px;
}

.banner{
height:465px;
background: url(images/banner.jpg) no-repeat center top;
}

</style>
</head>
<body>
<div class="header">
<div class="inner_c">
<div class="logo"><img src="images/logo.png" ></div>
<div class="nav">
<ul>
<li><a href="" class="current">首頁</a></li>
<li><a href="">博雅遊戲</a></li>
<li><a href="">博雅新聞</a></li>
<li><a href="">關於我們</a></li>
<li><a href="">客服中心</a></li>
<li class="l"><a href="">投資者關係</a></li>
</ul>
</div>
<div class="jrwm">
<a href=""><img src="images/jrwm.png" ></a>
</div>
</div>
</div>
</body>
</html>

運行效果：

二、!important

important提高權重，權重無窮大

font-size：24px !important;
提高的是一個屬性權重，不是選取器。
!important無法提升繼承的權重，該是0還是0
<div>
<p>哈哈哈哈哈哈</p>
</div>
div{color:red !important;}
p{color:blue;}
由於div是通過繼承來影響文字顏色的，所以無法提高權重。

important在建站中是不允許使用的，避免混亂，瞭解就好。

第8天：CSS製作導覽列

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More