首页 > 网站 > WEB开发 > 正文

CSS实现带箭头的DIV

2024-04-27 15:11:59
字体:
来源:转载
供稿:网友

毕业设计要做一个提示框:当鼠标放在某个链接上时,下边显示有提示功能的窗体。如下:

          具体代码实现如下:

     CSS

[css] view plain copy.rhsyyhqDIV{      position:absolute;      top:555px;      left:200px;      font-size: 9pt;      display:block;      height:335px;      width:405px;      background-color:transparent;      display: none;  }    s{      position:absolute;      top:-20px;      left:50px;      display:block;      height:0;      width:0;      font-size: 0;       line-height: 0;      border-color:transparent transparent #FA0505 transparent;      border-style:dashed dashed solid dashed;      border-width:10px;  }    i{      position:absolute;      top:-9px;      *top:-9px;      left:-10px;      display:block;      height:0;      width:0;      font-size: 0;      line-height: 0;      border-color:transparent transparent #FFFFFF transparent;      border-style:dashed dashed solid dashed;      border-width:10px;  }    .rhsyyhqDIV .content{      border:1px solid #FA0505;      -moz-border-radius:3px;      -webkit-border-radius:3px;      position:absolute;      background-color:#FEFEF4;      width:100%;      height:100%;      padding:5px;      *top:-2px;      *border-top:1px solid #FA0505;      *border-top:1px solid #FA0505;      *border-left:none;      *border-right:none;      *height:102px;  }  

    HTML

[html] view plain copy<div class="rhsyyhqDIV">      <div class="content">          <div  class="title">              <font>使用优惠码说明</font>          </div>          <div class="main">              <ul>                  <li> 如下图:登陆成功后,在文本框中输入优惠码,点击"使用"按钮</li>                  <li><img src="${/paixie/images/PRoscenium/rhsyyhq_01.jpg"/></li>                  <li><img src="${/paixie/images/proscenium/rhsyyhq_02.jpg"/></li>              </ul>          </div>      </div>      <s><i></i></s>  </div>  
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表