Tip的实现

最新推荐文章于 2024-07-18 13:52:01 发布

sunsanyou2004

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量508

点赞数

分类专栏：技术文章文章标签： border class div xhtml server input

技术文章专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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">

    <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>

    <title></title>
    <style type="text/css">
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{padding: 0;margin: 0;}
        table{border-collapse: collapse;border-spacing: 0;}
        fieldset, img{border: 0;}
        address, caption, cite, code, dfn, em, th, var{font-weight: normal;font-style: normal;}
        strong, b{font-weight: bold;}
        ol, ul{list-style: none;}
        caption, th{text-align: left;}
        h1, h2, h3, h4, h5, h6{font-weight: 700;}
        h1{font-size: 18px;}
        h2{font-size: 16px;}
        h3{font-size: 14px;}
        h4{font-size: 14px;}
        h5{font-size: 12px;}
        h6{font-size: 12px;}
        q:before, q:after{content: '';}
        abbr, acronym{border: 0;}
        hr{margin: 0;padding: 0;border: 0;color: #CDCDCD;background-color: #CDCDCD;height: 1px;}
        blockquote{color: #666;font-style: italic;}
        sup, sub{line-height: 0;}
        abbr, acronym{border-bottom: 1px dotted #666;}
        pre{white-space: pre;}
        pre, code, tt{font: 12px 'andale mono' , 'lucida console' , monospace;line-height: 1.5;}
        .SD-tipbox{background-color: #FFFFE9;border: 1px solid #FFDE8E;border-radius: 5px 5px 5px 5px;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);font-size: 12px;left: 50px;top: 50px;position: absolute;z-index: 100;}
        .SD-tipbox{background-color: #FFFFE9;border: 1px solid #FFDE8E;padding: 5px 25px 5px 10px;margin: 10px;position: absolute;z-index: 100;font-size: 12px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2);-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2);box-shadow: 1px 1px 2px rgba(0,0,0,.2);}
        .SD-tipbox .close-ico, .SD-notice-tip .close-ico{position: absolute;top: 5px;right: 5px;display: block;width: 16px;height: 16px;text-indent: -900px;overflow: hidden;}
        .SD-tipbox .close-ico:hover, .SD-notice-tip .close-ico:hover{background-position: 0 -16px;}
        .SD-tipbox p{line-height: 1.5;}
        .SD-tipbox .SD-tipbox-direction{position: absolute;}
        .SD-tipbox .SD-tipbox-direction em, .SD-tipbox .SD-tipbox-direction span{height: 19px;width: 17px;font-family: Simsun;font-size: 16px;line-height: 21px;overflow: hidden;position: absolute;}
        .SD-tipbox .SD-tipbox-direction em{color: #FFDE8E;}
        .SD-tipbox .SD-tipbox-direction span{color: #FFFFE9;}
        .SD-tipbox .SD-tipbox-up{left: 50px;margin-left: -8px;top: -10px; *top:-11px;_top:-10px;}
        .SD-tipbox .SD-tipbox-up span{top: 1px;}
        .SD-tipbox .SD-tipbox-down{left: 50%;margin-left: -8px;bottom: 9px;}
        .SD-tipbox .SD-tipbox-down span{top: -1px;}
        .SD-tipbox .SD-tipbox-right{top: 50%;margin-top: -8px;right: 7px;}
        .SD-tipbox .SD-tipbox-right span{left: -1px;}
        .SD-tipbox .SD-tipbox-left{top: 50%;margin-top: -8px;left: -8px;}
        .SD-tipbox .SD-tipbox-left span{left: 1px;}
        /*--------------*/
        .SD-notice-tip{width: 200px;margin: 0px;}
        .SD-notice-tip p{line-height: 22px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="SD-tipbox">
        <div class="cntBox">
            <p>
                <a href=" http://www.css88.com/archives/3904">Tip中小三角的实现!</a>
            </p>
        </div>
        <div class="SD-tipbox-direction SD-tipbox-up">
            <em>◆</em> <span>◆</span>
        </div>
        <div class="SD-tipbox-direction SD-tipbox-down">
            <em>◆</em> <span>◆</span>
        </div>
        <div class="SD-tipbox-direction SD-tipbox-left">
            <em>◆</em> <span>◆</span>
        </div>
        <div class="SD-tipbox-direction SD-tipbox-right">
            <em>◆</em> <span>◆</span>
        </div>
        <a class="close-ico" href="#" οnclick="return false" title="关闭">关闭</a>
    </div>
    </form>
</body>
</html>

sunsanyou2004

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tip的实现

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{padding: 0;margin: 0;
复制链接

扫一扫

专栏目录