css小提示框

来源：互联网发布：湖北网络安全教育编辑：程序博客网时间：2024/05/22 15:33

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>小提示窗口</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style>
        body
        {
            font-size: 12px;
        }
        a.tip
        {
            color: red;
            text-decoration: none;
            position: relative;
        }
        a.tip span
        {
            display: none;
        }
        a.tip:hover
        {
            cursor: hand;
        }
        a.tip:hover .popbox
        {
            display: block;
            position: absolute;
            top: 15px;
            left: 60px;
            width: 100px;
            background-color: #424242;
            color: #fff;
            padding: 10px;
        }

    </style>
    <script runat=server >

        protected void Page_Load(object sender, EventArgs e)
        {
            string[] arr1 = new string[8];
            string[] arr2 = new string[8];
            for (int i = 0; i < 8; i++)
            {
                arr1[i] = "this is test " + i;
                arr2[i] = "the result is " + i;
            }

            for (int i = 0; i < 8; i++)
            {
                TableRow tr = new TableRow();
                TableCell tc1s = new TableCell();

                Label lb2 = new Label();
                lb2.Text = arr2[i];
                lb2.CssClass = "popbox";
                HyperLink lb1 = new HyperLink();
                lb1.Text = arr1[i] + "<span class='popbox'>" + arr2[i] + "</span>";

lb1.CssClass = "tip";

tc1s.Controls.Add(lb1);

tr.Cells.Add(tc1s);

tb.Rows.Add(tr);
}

        }

    </script>
</head>
<body>
    <form id="from1" runat="server">
    <h1>
        CSS</h1>
    <p>
        目前推荐遵循的是W3C于1998年5月12日推荐 <a href="#" class="tip">CSS<span class="popbox">Cascading Style
            Sheets 层叠样式表</span></a> 。<a href="#" class="tip">W3C<span class="popbox">World Wide
                Web Consortium 万维网联盟</span></a>创建CSS标准的目的是以CSS取代<a href="#" class="tip">HTML<span
                    class="popbox">Hyper Text Mark-up Language 超文本标记语言</span></a>表格式布局、帧和其他表现的语言。纯CSS布局与结构式<a
                        href="#" class="tip">XHTML<span class="popbox">The Extensible HyperText Markup Language
                            可扩展超文本标记语言</span></a>相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。</p>
                            <div align=center >
    <asp:Table runat="server" ID="tb" CssClass ="">
    </asp:Table>
    </div>
    </form>
</body>
</html>