用戶登錄  |  用戶注冊
首 頁源碼下載網絡學院最新源碼源碼排行屏蔽廣告
當前位置:新興網絡 > 網絡學院 > 網頁制作 > CSS

純CSS實現尖角提示框效果

減小字體 增大字體 作者:佚名  來源:本站整理  發布時間:2010-12-04 11:25:43
沒有使用任何圖片,純CSS實現帶箭頭的提示框效果。方框大小可以自動適應文件長度。
HTML code運行代碼復制代碼編輯
<!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>
<head>
<title>純CSS實現尖角提示框效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.rc_box1,.rc_box2,.rc_box3{display:inline-block;*display:inline;*zoom:1;position:relative;border-style:solid;border-color:#ddd;}
.rc_box2,.rc_box3{border-width:0 1px;*left:-2px;background-color:#f3f3f3;}
.rc_box1{border-width:1px;line-height:1.5;}
.rc_box2{margin:0 -2px;}
.rc_box3{margin:1px -2px;padding:0 6px;}
.ov1,.ov2{position:absolute;left:44%;overflow:hidden;width:0;height:0;border-left:6px dotted transparent;border-right:6px dotted transparent;
border-top:6px solid transparent;}
.lov1,.lov2{position:absolute;top:34%;overflow:hidden;width:0;height:0;border-top:6px dotted transparent;border-bottom:6px dotted transparent;
border-right:6px solid transparent;}
.ov1{top:26px;border-top-color:#ddd;}
.ov2{top:25px;border-top-color:#f3f3f3;}
.lov1{left:-9px;border-right-color:#ddd;}
.lov2{left:-8px;border-right-color:#f3f3f3;}
</style>
</head>
<body>
<div class="rc_box1">
  <div class="rc_box2">
    <div class="rc_box3">OH!我的天啊,太牛了!</div>
  </div>
  <div class="lov1"></div>
  <div class="lov2"></div>
  <div class="ov1"></div>
  <div class="ov2"></div>
</div>
</body>
</html>

Tags:氣泡 提示框 CSS

作者:佚名
  • 好的評價 如果您覺得此文章好,就請您
      100%(1)
  • 差的評價 如果您覺得此文章差,就請您
      0%(0)

網絡學院評論評論內容只代表網友觀點,與本站立場無關!

   評論摘要(共 0 條,得分 0 分,平均 0 分) 查看完整評論
皮皮麻将官网下载 安徽快3爱彩乐 (*^▽^*)MG赌徒援彩金 (★^O^★)MG八宝一后免费试玩 新快3新快三开奖查询 (^ω^)MG K歌乐韵_官方版 国家会取消高频彩么 25选7怎么玩 (★^O^★)MG水果大战奖金赔率 甘肃快3开奖号 网赚论坛 (^ω^)MG艺伎故事彩金 (*^▽^*)MG浮冰流APP下载 本人自创九肖公式规律 (*^▽^*)MG神庙古墓游戏规则 今晚平特精版图 江苏体彩22选5