手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS实现带箭头的DIV(鼠标放上显示提示框)
CSS实现带箭头的DIV(鼠标放上显示提示框)
摘要:毕业设计要做一个提示框:当鼠标放在某个链接上时,下边显示有提示功能的窗体。如下:具体代码实现如下:CSS:.rhsyyhqDIV{posit...

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

CSS实现带箭头的DIV(鼠标放上显示提示框)1

具体代码实现如下:

CSS:

.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

<div>

<div>

<div>

<font>使用优惠码说明</font>

</div>

<div>

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

【CSS实现带箭头的DIV(鼠标放上显示提示框)】相关文章:

实现div垂直居中的display:table-cell方法示例介绍

纯CSS实现的鼠标经过文本时提示的信息

css实现文字的自动隐藏

CSS实现让同一行文字和输入框对齐的方法

用css实现十字的布局示例代码

如何用CSS自定义鼠标显示的形状

利用CSS实现禁止双击选择页面内容的实例展示

CSS定义DIV圆角边框

纯CSS实现鼠标悬停提示的方法

CSS3实现漂亮的按钮动画

精品推荐
分类导航