css 彈出介面
一。把div寫到a標籤下面
代碼如下：
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="BehanceLog.WebForm1" %>
<!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 runat="server">
<title></title>
<style type="text/css">
.menu{ display:block; width:200px; height:100px; background-color:Red; margin:20px auto;}
.showdiv{ display:none;}
.menu a{ display:block; background-color:Red; position:relative; width:100px; height:20px;}
.menu a:hover .showdiv
{
background-color:Yellow;
display:block;
position:absolute; z-index:200;
width:300px; height:200px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="menu">
<a href="About.aspx">請點擊我
<div class="showdiv">
<span>在困难的时候企业就是要手拉手，肩并肩，不能想单打独斗，抱团合作是唯一出路。</span>
</div>
</a>
</div>
</form>
</body>
</html>
說明如下：
1.先寫一個大的div menu包含a標籤，其實沒有也可以。這裡為了測試加上了。
2.定義a標籤，並且裏面包括要顯示的div
3.寫css
3.1 首先應該把要彈出的div進行設置
.showdiv{ display:none; }
3.2 定義a標籤，使產生浮動，為 了彈出的div確定位置
.menu a{ position:relative; }
3.3下a標籤的hover
.menu a:hover .showdiv
{
background-color:Yellow;
display:block;
position:absolute; z-index:200;
width:300px; height:200px;
}
3.4其他說明
彈出的div，最好設置背景，要不看不清楚。
postion 一定要設置，要不會把其他 數據推開。
z-index 一定要設置，要不會被其他div蓋住。
這樣就出現了效果。可以直接拷貝我的代碼運行。
二。div 寫到和a標籤同級
代碼如下：
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="BehanceLog.WebForm3" %>
<!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 runat="server">
<title></title>
<style type="text/css">
.menu{ display:block; width:200px; height:100px; background-color:Red; margin:20px auto;}
.menu ul { list-style:none; margin:0; padding:0; width:100px;}
.menu ul li{ display:block; position:relative; width:200px; float:left;}
.menu ul li a{ width:200px; display:block;}
.showdiv{ display:none;}
.menu ul li:hover .showdiv
{
display:block;
width:200px;
position:absolute;
background-color:Yellow;
z-index:100;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="menu">
<ul>
<li class="showli"><a href="#">檔案</a>
<div class="showdiv">
<span>在困难的时候企业就是要手拉手，肩并肩，不能想单打独斗，抱团合作是唯一出路。</span>
</div>
</li>
<li>編輯</li>
<li>小組</li>
<li>說明</li>
</ul>
</div>
</form>
</body>
</html>
在此不做說明。使用基本相同。
在firefox ie9 下測試通過。其他沒有測試。
