<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>css模拟阴影和小三角</title>
<style>
a{ color:#666; text-decoration:none; line-height:25px; text-indent:24px;}
.w{ width:200px; position:absolute; background:#999; left:400px; top:200px; font-size:12px; text-align:left}/*模拟灰色阴影背景层*/
.h{ width:200px; position:absolute; background:#999; left:400px; top:300px; font-size:12px; text-align:left}/*模拟灰色阴影背景层*/
.x{ width:180px; position:relative; background:#ff9; border:1px solid #F96; padding:10px; left:-4px; top:-4px;}/*内容div*/
.y , .z{position:absolute; top:20px;}/*控制三角的位置上下左右*/
.y{ color:#ff9; left:183px; font-size:34px;}/*模拟小三角*/
.z{ color:#f96; left:185px;font-size:34px;}/*模拟小三角*/
.a , .b{position:absolute; top:20px;}/*控制三角的位置上下左右*/
.a{ color:#ff9; left:-16px; font-size:34px;}/*模拟小三角*/
.b{ color:#f96; left:-18px;font-size:34px;}/*模拟小三角*/
.l680{ left:680px;}
.t400{ top:400px;}
</style>
</head>
<body>
<div class="w">
<div class="x"><p><a href="#">用面向对象的思想去书写css,用面向对象的心态去书写css。(右三角)</a></p>
<div class="z">◆</div>
<div class="y">◆</div>
</div>
</div>
<div class="h">
<div class="x"><p><a href="#">用面向对象的思想去书写css,用面向对象的心态去书写css。(左三角)</a></p>
<div class="b">◆</div>
<div class="a">◆</div>
</div>
</div>
</body>
</html>
扫一扫
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
