CSS常用浮出层的代码

作者：简简单单 2012-12-22

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>实例：CSS常用浮出层的写法</title>
<style>
@charset "utf-8";
body,h1,h2,h3,h4,p,ul,li,ol,dl,dt,dd,input,textarea,figure,form{margin:0;padding:0}
body,input,textarea{font-size:12px;font-family:microsoft yahei}
body{text-align:center;color:#33383D;background:#f1f1f1 url(../../img/body.gif) repeat}
ul,ol{list-style:none}
img{border:0}
button,input {line-height:normal;*overflow:visible}
input,textarea{outline:none}
a{color:#3B8DD1;text-decoration:none}
a:hover{color:#8CAC52}
.demo-header{position:relative;background-color:#33363B;line-padding:2px 10px;text-align: left;}
.demo-name{color: #ccc;}
.demo-title,.demo-footer{height:0;overflow:hidden}
.demo-container{clear: both;padding:40px 10px 20px;text-align:left;margin:0 auto;line-}
.demo h2{font-size: 15px;padding-bottom: 6px;margin-bottom: 20px;border-bottom: solid 1px #ddd;}
</style>
</head>
<body>
<h1 class="demo-title">CSS常用浮出层的写法实例展示</h1>

<div class="demo-container demo">
	<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
.demo{position:relative;}
/* poptip */
.poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px 10px 4px;line-color: #DB7C22;font-size: 12px;background-color: #FFFCEF;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;}
.poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;}

.poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}
.poptip-arrow em{color: #FFBB76;}
.poptip-arrow i{color: #FFFCEF;text-shadow:none;}

.poptip-arrow-top,.poptip-arrow-bottom{left:12px;margin-left:-6px;}
.poptip-arrow-left,.poptip-arrow-right{top: 12px;margin-top:-6px;}

.poptip-arrow-top{top: -6px;}
.poptip-arrow-top em{top: -1px;}
.poptip-arrow-top i{top: 0px;}

.poptip-arrow-bottom{bottom: -6px;}
.poptip-arrow-bottom em{top: -8px;}
.poptip-arrow-bottom i{top: -9px;}

.poptip-arrow-left{left:-6px;}
.poptip-arrow-left em{left:1px;}
.poptip-arrow-left i{left:2px;}

.poptip-arrow-right{right:-6px;}
.poptip-arrow-right em{left:-6px;}
.poptip-arrow-right i{left:-7px;}

</style>
<div class="demo">
    <div class="poptip">
        <span class="poptip-arrow poptip-arrow-top"><em>◆</em><i>◆</i></span>
        <span class="poptip-arrow poptip-arrow-right"><em>◆</em><i>◆</i></span>
        <span class="poptip-arrow poptip-arrow-bottom"><em>◆</em><i>◆</i></span>
        <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span>
        Hi，知道吗？ ！
    </div>
    <div class="poptip" style="top:80px;">
        <span class="poptip-arrow poptip-arrow-top"><em>◆</em><i>◆</i></span>
        Hi，知道吗？ <br>！
    </div>
    <div class="poptip" style="top:160px;">
        <span class="poptip-arrow poptip-arrow-right"><em>◆</em><i>◆</i></span>
        Hi，知道吗？ <br>！
    </div>
    <div class="poptip" style="top:240px;">
        <span class="poptip-arrow poptip-arrow-bottom"><em>◆</em><i>◆</i></span>
        Hi，知道吗？ <br>！
    </div>
    <div class="poptip" style="top:320px;">
        <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span>
        Hi，知道吗？ <br>！
    </div>

</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

CSS常用浮出层的代码

相关文章

精彩推荐