
			<p>浮出层是web页面中经常用到的功能，带有小小尖角的浮出层则更为生动，所以今天带给大家的是有角的浮出层，一起看看吧！</p>
<p style="text-align: center;"><img title="poptip" src="http://www.daqianduan.com/wp-content/uploads/2012/08/poptip.png" alt="" width="450" height="387" /></p>
<p style="text-align: center;"><a class="btn-demo" href="http://www.daqianduan.com/example/?pid=4518" target="_blank">点此查看实例展示</a></p>
<p>是的，我们即将实现的就是以上功能，是不是很生动？</p>
<h2>贴上HTML：</h2>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;div</span> <span style="color: #00c;">class</span>=<span style="color: #a11;">"poptip"</span><span style="color: #170;">&gt;</span>
    <span style="color: #170;">&lt;span</span> <span style="color: #00c;">class</span>=<span style="color: #a11;">"poptip-arrow poptip-arrow-top"</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;em</span><span style="color: #170;">&gt;</span>◆<span style="color: #170;">&lt;/em</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;i</span><span style="color: #170;">&gt;</span>◆<span style="color: #170;">&lt;/i</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;/span</span><span style="color: #170;">&gt;</span>
    <span style="color: #170;">&lt;span</span> <span style="color: #00c;">class</span>=<span style="color: #a11;">"poptip-arrow poptip-arrow-right"</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;em</span><span style="color: #170;">&gt;</span>◆<span style="color: #170;">&lt;/em</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;i</span><span style="color: #170;">&gt;</span>◆<span style="color: #170;">&lt;/i</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;/span</span><span style="color: #170;">&gt;</span>
    <span style="color: #170;">&lt;span</span> <span style="color: #00c;">class</span>=<span style="color: #a11;">"poptip-arrow poptip-arrow-bottom"</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;em</span><span style="color: #170;">&gt;</span>◆<span style="color: #170;">&lt;/em</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;i</span><span style="color: #170;">&gt;</span>◆<span style="color: #170;">&lt;/i</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;/span</span><span style="color: #170;">&gt;</span>
    <span style="color: #170;">&lt;span</span> <span style="color: #00c;">class</span>=<span style="color: #a11;">"poptip-arrow poptip-arrow-left"</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;em</span><span style="color: #170;">&gt;</span>◆<span style="color: #170;">&lt;/em</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;i</span><span style="color: #170;">&gt;</span>◆<span style="color: #170;">&lt;/i</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;/span</span><span style="color: #170;">&gt;</span>
    Hi，知道吗？ <span style="color: #170;">&lt;br</span><span style="color: #170;">&gt;</span>大前端D7主题很快就疯抢了！
<span style="color: #170;">&lt;/div</span><span style="color: #170;">&gt;</span></pre>
<p>以上HTML构成了一个浮出层和四个方向的尖角，其实你只需要其中的一个span标签，所以真正用上的代码并没那么多。</p>
<h2>贴上CSS：</h2>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #a50;">/* poptip */</span>
.<span style="color: #170;">poptip</span>{<span style="color: #000;">position</span>: <span style="color: #164;">absolute</span>;<span style="color: #000;">top</span>: <span style="color: #164;">20px</span>;<span style="color: #000;">left</span>:<span style="color: #164;">20px</span>;<span style="color: #000;">padding</span>: <span style="color: #164;">6px</span> <span style="color: #164;">10px</span> <span style="color: #164;">5px</span>;*<span style="color: #164;">padding</span>: <span style="color: #164;">7px</span> <span style="color: #164;">10px</span> <span style="color: #164;">4px</span>;<span style="color: #000;">line-height</span>: <span style="color: #164;">16px</span>;<span style="color: #000;">color</span>: <span style="color: #219;">#DB7C22</span>;<span style="color: #000;">font-size</span>: <span style="color: #164;">12px</span>;<span style="color: #000;">background-color</span>: <span style="color: #219;">#FFFCEF</span>;<span style="color: #000;">border</span>: <span style="color: #164;">solid</span> <span style="color: #164;">1px</span> <span style="color: #219;">#FFBB76</span>;<span style="color: #000;">border-radius</span>: <span style="color: #164;">2px</span>;<span style="color: #000;">box-shadow</span>: <span style="color: #164;">0</span> <span style="color: #164;">0</span> <span style="color: #164;">3px</span> <span style="color: #219;">#ddd</span>;}
.<span style="color: #170;">poptip-arrow</span>{<span style="color: #000;">position</span>: <span style="color: #164;">absolute</span>;<span style="color: #000;">overflow</span>: <span style="color: #164;">hidden</span>;<span style="color: #000;">font-style</span>: <span style="color: #164;">normal</span>;<span style="color: #000;">font-family</span>: <span style="color: #164;">simsun</span>;<span style="color: #000;">font-size</span>: <span style="color: #164;">12px</span>;<span style="color: #000;">text-shadow</span>:<span style="color: #164;">0</span> <span style="color: #164;">0</span> <span style="color: #164;">2px</span> <span style="color: #219;">#ccc</span>;}

.<span style="color: #170;">poptip-arrow</span> <span style="color: #170;">em</span>,.<span style="color: #170;">poptip-arrow</span> <span style="color: #170;">i</span>{<span style="color: #000;">position</span>: <span style="color: #164;">absolute</span>;<span style="color: #000;">left</span>:<span style="color: #164;">0</span>;<span style="color: #000;">top</span>:<span style="color: #164;">0</span>;<span style="color: #000;">font-style</span>: <span style="color: #164;">normal</span>;}
.<span style="color: #170;">poptip-arrow</span> <span style="color: #170;">em</span>{<span style="color: #000;">color</span>: <span style="color: #219;">#FFBB76</span>;}
.<span style="color: #170;">poptip-arrow</span> <span style="color: #170;">i</span>{<span style="color: #000;">color</span>: <span style="color: #219;">#FFFCEF</span>;<span style="color: #000;">text-shadow</span>:<span style="color: #164;">none</span>;}

.<span style="color: #170;">poptip-arrow-top</span>,.<span style="color: #170;">poptip-arrow-bottom</span>{<span style="color: #000;">height</span>: <span style="color: #164;">6px</span>;<span style="color: #000;">width</span>: <span style="color: #164;">12px</span>;<span style="color: #000;">left</span>:<span style="color: #164;">12px</span>;<span style="color: #000;">margin-left</span>:<span style="color: #164;">-6px</span>;}
.<span style="color: #170;">poptip-arrow-left</span>,.<span style="color: #170;">poptip-arrow-right</span>{<span style="color: #000;">height</span>: <span style="color: #164;">12px</span>;<span style="color: #000;">width</span>: <span style="color: #164;">6px</span>;<span style="color: #000;">top</span>: <span style="color: #164;">12px</span>;<span style="color: #000;">margin-top</span>:<span style="color: #164;">-6px</span>;}

.<span style="color: #170;">poptip-arrow-top</span>{<span style="color: #000;">top</span>: <span style="color: #164;">-6px</span>;}
.<span style="color: #170;">poptip-arrow-top</span> <span style="color: #170;">em</span>{<span style="color: #000;">top</span>: <span style="color: #164;">-1px</span>;}
.<span style="color: #170;">poptip-arrow-top</span> <span style="color: #170;">i</span>{<span style="color: #000;">top</span>: <span style="color: #164;">0px</span>;}

.<span style="color: #170;">poptip-arrow-bottom</span>{<span style="color: #000;">bottom</span>: <span style="color: #164;">-6px</span>;}
.<span style="color: #170;">poptip-arrow-bottom</span> <span style="color: #170;">em</span>{<span style="color: #000;">top</span>: <span style="color: #164;">-8px</span>;}
.<span style="color: #170;">poptip-arrow-bottom</span> <span style="color: #170;">i</span>{<span style="color: #000;">top</span>: <span style="color: #164;">-9px</span>;}

.<span style="color: #170;">poptip-arrow-left</span>{<span style="color: #000;">left</span>:<span style="color: #164;">-6px</span>;}
.<span style="color: #170;">poptip-arrow-left</span> <span style="color: #170;">em</span>{<span style="color: #000;">left</span>:<span style="color: #164;">1px</span>;}
.<span style="color: #170;">poptip-arrow-left</span> <span style="color: #170;">i</span>{<span style="color: #000;">left</span>:<span style="color: #164;">2px</span>;}

.<span style="color: #170;">poptip-arrow-right</span>{<span style="color: #000;">right</span>:<span style="color: #164;">-6px</span>;}
.<span style="color: #170;">poptip-arrow-right</span> <span style="color: #170;">em</span>{<span style="color: #000;">left</span>:<span style="color: #164;">-6px</span>;}
.<span style="color: #170;">poptip-arrow-right</span> <span style="color: #170;">i</span>{<span style="color: #000;">left</span>:<span style="color: #164;">-7px</span>;}</pre>
<p>这段CSS写的已经很简练了，所以不要嫌多，因为它具有很强的扩展性。</p>
<p>如果你希望尖角居中显示，可以在<code>.poptip-arrow</code>这个span上加上<code>style="left:50%"</code>或者<code>style="top:50%"</code></p>
<p>这个代码兼容IE6-10、Chrome、Firefox等基本上所有主流浏览器，所以不必担心其兼容性和实用性。据悉，支付宝等站点采用的也是此方式。</p>
<p>当然，不排除还有更好的实现方式，如你知道，请留言告诉大家，谢谢！</p>
<p>转载请注明：<a href="http://www.daqianduan.com">大前端</a> &raquo; <a href="http://www.daqianduan.com/css-poptip/">CSS常用浮出层的写法</a></p>		