css 彈出界面面

wangminshe89

浏览: 693308 次

最近访客更多访客>>

sdwwld

u012363178

杨华生

805843923

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1144)

社区版块

存档分类

2012-03 ( 4)
2012-02 ( 148)
2012-01 ( 49)
更多存档...

一。把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

0
顶

0
踩

分享到：

5天不再惧怕多线程——第四天信号量

2012-03-19 09:03
浏览 766
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论