<!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=utf-8" />
<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}/*模拟灰色阴影背景层*/
.x{ width:180px; position:relative; background:#ff9; border:1px solid #F96; padding:10px; left:-4px; top:-4px;}/*内容div*/
.y , .z{position:absolute; left:130px;}
.y{ color:#ff9; top:-6px;}/*模拟小三角*/
.z{ color:#f96; top:-7px;}/*模拟小三角*/
.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="w l680">
<div class="x"><p><a href="#">将能节省更多的空间将能节省更多的空间将能节省更多的空间将能节省更多的空间将能节省更多的空间</a></p>
<div class="z">◆</div>
<div class="y">◆</div>
</div>
</div>
<div class="w t400">
<div class="x"><p><a href="#">就是很常见的一种布局：有容器A，里边排1~6，六个小层，每行3个如何实现：两侧的小层和容器的左右边缘对齐，中间间隔10像素，而这六个小层是循环的，都要用同一个样式 我从来没仔细考虑过这个问题，想问问前辈一般都怎么解决
</a></p>
<div class="z">◆</div>
<div class="y">◆</div>
</div>
</div>
<div class="w t400 l680">
<div class="x"><p><a href="#">鼠标移到 图标上： 就显示 那张红图 鼠标移到 图标上： 就显示 那张红图 鼠标移到 图标上： 就显示 那张红图 </a></p>
<div class="z">◆</div>
<div class="y">◆</div>
</div>
</div
</body>
</html>
本文作者:未知
相关CSS模拟div阴影和提示小三角