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 下測試通過。其他沒有測試。

 



posted @ 2012-03-17 10:15  無限遐想  阅读(1461)  评论(7编辑  收藏  举报