日期：2010-11-25 08:19:00 来源：本站整理

css定义带箭头的窗口[网站美工]

赞助商链接

分享到： QQ空间新浪微博腾讯微博人人网

　　本文“css定义带箭头的窗口[网站美工]”是由七道奇为您精心收集，来源于网络转载，文章版权归文章作者所有，本站不对其观点以及内容做任何评价，请读者自行判断，以下是其具体内容：

前天看一个朋友的css写了一个很漂亮的带箭头效果,认为是图片做的,后来发现他是无图片带箭头的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> 
<div class="lov1"></div> 
<div class="lov2"></div> 
<div class="ov1"></div> 
<div class="ov2"></div> 
</div> 
</body> 
</html>

　　以上是“css定义带箭头的窗口[网站美工]”的内容，如果你对以上该文章内容感兴趣，你可以看看七道奇为您推荐以下文章：

css定义带箭头的窗口

<b>具体解读网页筹划中的DIV+CSS定位</b>

利用CSS定位页面的"footer"

本文地址：

与您的QQ/BBS好友分享!

[] [返回上一页] [打印]

好的评价　如果您觉得此文章好，就请您
0%(0)
差的评价　如果您觉得此文章差，就请您
0%(0)

文章评论评论内容只代表网友观点，与本站立场无关！

评论摘要(共 0 条，得分 0 分，平均 0 分) 查看完整评论

栏目导航

赞助商链接

免责条款 - 广告合作 - 下载声明 - 欢迎投稿 - 友情连接 -