纯css定义带箭头的窗口代码

 代码如下 复制代码

<!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>无图片带箭头的窗口(二)</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<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>
<!--把下面代码加到<body>与</body>之间-->
<div class="rc_box1">
  <div class="rc_box2">
    <div class="rc_box3">oh, my god! http://www.111cn.net>
  </div>
  <div class="lov1"></div>
  <div class="lov2"></div>
  <div class="ov1"></div>
  <div class="ov2"></div>
</div>
</body>
</html>

 

时间: 2024-09-22 09:58:53

纯css定义带箭头的窗口代码的相关文章

纯CSS实现多级半透明效果菜单代码

 本文实例讲述了纯CSS实现多级半透明效果菜单代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的多级半透明菜单,最多可支持5级的CSS菜单,菜单样式可自己调整,默认先是这种,兼容多种浏览器. 运行效果截图如下:   具体代码如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dt

纯CSS导航条下拉菜单代码

提示:您可以先修改部分代码再运行 纯CSS导航条下拉菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

纯css实现精美箭头代码

图: HTML代码:  代码如下 复制代码 <div class="pre-wrap"> <div class="pre"> <div class="pre1"></div> <div class="pre2"></div> </div> </div>   CSS代码: .pre-wrap { width: 200px; heigh

纯CSS绘制三角形箭头效果

  最近我想修改一下这个网站,我想在上面放置一个提示框.这是很容易,但我想让提示框上有一个三角形的箭头.可是,一想到这需要使用图片,并且各种颜色,各种方向的箭头要准备无数种,这几乎是一种灾难.幸运的是,MooTools的核心开发着Darren Waddell告诉了我一个非常棒 使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码 复制代码 代码如下: /* create an arrow that points up */ div.arrow-up { widt

基于Jquery+div+css实现弹出登录窗口(代码超简单)_jquery

具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

纯CSS实现小箭头的案例

我们大多数的小箭头都是用小图片来做的,这里分享一款用纯CSS写的小箭头,大家可以看看,以后会放出更多的CSS小箭头来供大家参考. <div class="pre-wrap">     <div class="pre">         <div class="pre1"></div>         <div class="pre2"></div>    

纯css定义的下拉菜单效果代码

更多js特效请访问: 网页设计爱好者 http://www.111cn.net Blogroll Example Site Example Site Example Site Example Site Example Site Example Site Example Site Example Site Example Site Example Site Example Site Example Site

CSS实现带箭头的DIV提示框

 毕业设计要做一个提示框:当鼠标放在某个链接上时,下边显示有提示功能的窗体.如下: 具体代码实现如下: 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:-

纯css完美实现对联广告效果代码

css 代码  代码如下 复制代码 .couplet_ad /* 底部固定*/{position:fixed;bottom:auto; top:0; width: 120px; height: 230px; z-index:99999; margin-top:158px;} * html .couplet_ad /* IE6 底部固定*/{_position:absolute; _bottom:auto; _top:expression(eval(document.documentElement