網頁設計之div+css製作二級導航and廣告條的點擊關閉

最後更新：2018-12-05 來源：互聯網

上載者：User

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

我做的二級導航，並且實現廣告條點擊關閉的功能，代碼如下，複製即可預覽效果！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
<!--
.l1{
width:151px;
height:36px;
float:left;
background-color:#FF0000;
color:#000000;
list-style-type: none;
margin:0px;
padding:0px;

}
.a2{
font-size: 12px;
text-align: center;
display:block;
width:150px;
height:35px;
line-height:35px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CC3300;
border-right-color: #CC3300;
border-bottom-color: #CC3300;
border-left-color: #CC3300;

}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
#shang {
width:604px;
margin: 0 auto auto;}
span{
width:488px;
color:#F00;
background-color: #F00;
position:absolute;
top:38px;
padding:0px;
margin:0px;
display:none;
margin-left:10px;
}
.a1{
width:120px;
height:25px;
float:left;
display:block;
line-height:25px;
margin:0px;
color:#000;
font-size: 12px;
text-align: center;
border: 1px solid #CC3300;
}
.zhuti{
width:605px;
margin:auto;
}
.yejiao{
position:absolute;
top:46px;
width:32px;
height:15px;
line-height:15px;
font-size:12px;
color: #000;
display:block;
text-align:center;
cursor:hand;
background-color: #F00;
margin-left:563px;
border: 1px solid #CC3300;
}
.neirong{
width:593px;
margin:auto;
background-color: #F90;
border: 1px solid #CC3300;
font-size:12px;
color: #FFF;
padding: 5px;
}
body {
margin-top:2px;
}
-->
</style>
</head>

<body>
<script>
function show(n)
{
n.style.display="block";
}

function hid(n)
{
n.style.display="none";

}
</script>
<div id="shang">
<li class="l1">

   <a class="a2" href="#" onmouseover="this.style.backgroundColor='#CC3300';show(a1)" onmouseout="this.style.backgroundColor='#FF0000';hid(a1)">導航條(有子導航)
   </a>

<span id="a1">
<a class="a1" href="#" onmouseover="this.style.color='#ffffff';show(a1)" onmouseout="this.style.color='#000000';hid(a1)">子導航內容</a>
<a class="a1" href="#" onmouseover="this.style.color='#ffffff';show(a1)" onmouseout="this.style.color='#000000';hid(a1)">子導航內容</a>
<a class="a1" href="#" onmouseover="this.style.color='#ffffff';show(a1)" onmouseout="this.style.color='#000000';hid(a1)">子導航內容</a>
<a class="a1" href="#" onmouseover="this.style.color='#ffffff';show(a1)" onmouseout="this.style.color='#000000';hid(a1)">子導航內容</a>
</span>

</li>

<li class="l1">
   <a class="a2" href="#" onmouseover="this.style.backgroundColor='#CC3300';" onmouseout="this.style.backgroundColor='#FF0000'">導航條的內容
   </a>
</li>
<li class="l1">
   <a class="a2" href="#" onmouseover="this.style.backgroundColor='#CC3300';" onmouseout="this.style.backgroundColor='#FF0000'">導航條的內容
   </a>
</li>
<li class="l1">
   <a class="a2" href="#" onmouseover="this.style.backgroundColor='#CC3300';" onmouseout="this.style.backgroundColor='#FF0000'">導航條的內容
   </a>
</li>
</div>
<div class="zhuti" id="div1">
<div class="yejiao" onclick="div1.style.display='none'">關閉</div>
   <div class="neirong">
§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Γ埽擀洌 D♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑↓¤°＃＠＆＼＿︿￣―♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑↓¤°＃＠＆＼＿︿￣―♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Γ埽擀洌 D♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑↓¤°＃＠＆＼＿︿￣―♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑↓¤°＃＠＆＼＿︿￣―♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Γ埽擀洌 D♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑↓¤°＃＠＆＼＿︿￣―♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑↓¤°＃＠＆＼＿︿￣―♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Γ埽擀洌 D♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑↓¤°＃＠＆＼＿︿￣―♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑↓¤°＃＠＆＼＿︿￣―♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Γ埽擀洌 D♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑↓¤°＃＠＆＼＿︿￣―♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑↓¤°＃＠＆＼＿︿￣―♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰Α臁睢鎩稹頡瘛蟆簟酢駙偓‰▲△※←→↑〓↑↓¤°＃＠＆＼＿︿￣―♂♀§☆★○◎●◇◆□℃鈧搿鼇琛悖＃潰?   </div>
</div>
<div class="neirong" style="text-align:center; background-color:#F00">點擊“關閉”我就上來了！</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 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