<div class="c_page mt14 clearfix">
<span class="record">1/14P 134Records</span>
<span class="first disable"><em class="bar"></em><em class="leftjib"></em><em class="leftjib"></em> <em class="text">First</em></span>
<span class="prev disable"><em class="leftjib"></em><em class="text">Prev</em></span>
<span class="btnList">
<a href="" class="num current">1</a>
<a href="" class="num">2</a>
<a href="" class="num">3</a>
<a href="" class="num">4</a>
<a href="" class="num">5</a>
</span>
<span class="next "><em class="text">Next</em><em class="rightjib"></em></span>
<span class="last "><em class="text">Last</em><em class="rightjib"></em><em class="rightjib"></em><em class="bar"></em></span>
</div>
<style>
.c_page{color:#0078bd;padding:0 0 20px ;font-size:12px;}
.c_page em{font-style:normal;overflow:hidden;}
.c_page span{float:left;}
.record{color:#999;padding-right:9px;}
.first ,.prev ,.next ,.last{cursor:pointer;margin:0 8px;display:inline;}
.text{padding:0 4px;}
.bar{width:2px;height:10px;background-color:#0078bd;}
.leftjib{border-color:#fff #0078bd #fff #fff;border-style:solid solid solid none;}
.rightjib{border-color:#fff #fff #fff #0078bd;border-style:solid none solid solid;}
.bar ,.leftjib ,.rightjib ,.text {float:left;}
.bar ,.leftjib ,.rightjib{display:inline;margin-top:3px;}
.leftjib ,.rightjib{border-width:5px;width:0;height:0;}
.disable{color:#999;cursor:default;}
.disable .bar{background-color:#999;}
.disable .leftjib{border-color:#fff #999 #fff #fff;}
.disable .rightjib{border-color:#fff #999 #fff #fff;}
</style>
<!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=gb2312" />
<title>em实现倒三角的提示效果</title>
</head>
<style>
#menu {width:500px;padding:0;margin:40px auto;list-style-type:none;display:<span href="tag.php?name=tab" onclick="tagshow(event)" class="t_tag">tab</span>le;}
#menu li {width:100px; float:left; line-height:30px}
#menu a {position:relative;display:block; text-decoration:none; background:#cccccc;width:100px; }
#menu a span {display:block; font-weight:bold;color:#000; border-style:solid;border-width:0px 2px 2px 0px; border-color:#fff #fff #06a #fff;text-align:center; }
#menu a em {display:none;}
#menu a:hover {background:#FF0000;}
#menu a:hover span {color:#fff; }
#menu a:hover em {display:block; overflow:hidden; border:6px solid #06a; border-color:#06a #fff; border-width:6px 6px 0 6px; position:absolute; left:50%; top:100%;margin-left:-6px;}
</style>
<body>
<ul id="menu">
<li><a href="#"><span>M One</span><em></em></a></li>
<li><a href="#"><span>M Two</span><em></em></a></li>
<li><a href="#"><span>M Three</span><em></em></a></li>
<li><a href="#"><span>M Four</span><em></em></a></li>
</ul>
</body>
</html>
<!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>模拟表格对角线</title>
<style type="text/css">
*{padding:0;margin:0;} caption{font-size:14px;font-weight:bold;}
table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;}
th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;}
th{background:#D6D3D6;} /*模拟对角线*/
.out{ border-top:40px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/
width:0px;/*让容器宽度为0*/
height:0px;/*让容器高度为0*/
border-left:80px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/
position:relative;/*让里面的两个子容器绝对定位*/ }
b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}
.t1{background:#BDBABD;}
</style>
</head>
html+CSS实例效果(6):模拟表格对角线
<body>
<table>
<caption>用div+css模拟表格对角线</caption>
<tr>
<th style="width:80px;">
<div class="out"> <b>类别</b> <em>姓名</em> </div>
</th>
<th>年级</th>
<th>班级</th>
<th>成绩</th>
<th>班级均分</th>
</tr>
<tr>
<td class="t1">张三</td>
<td>三</td>
<td>2</td>
<td>62</td>
<td>61</td>
</tr>
<tr>
<td class="t1">李四</td>
<td>三</td> <td>1</td>
<td>48</td> <td>67</td>
</tr>
<tr>
<td class="t1">王五</td>
<td>三</td> <td>5</td>
<td>79</td> <td>63</td>
</tr>
<tr> <td class="t1">赵六</td> <td>三</td> <td>4</td> <td>89</td> <td>66</td> </tr>
</table>
</body>
</html>
html+CSS实例效果(7):纯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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS超过宽度显示省略号</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"新宋体";}
ol{ background:url(http://www.hemin.cn/blog/wp-content/uploads/2009/06/list.jpg) no-repeat left -2px;}
li{position:relative; padding:0 60px 0 20px; height:20px; overflow:hidden; line-height:20px; width:250px;
list-style:none;}
li a{ position:relative;background: url(http://www.hemin.cn/blog/wp-content/uploads/2009/10/pot.gif) no-repeat
230px top;display:inline-block; text-decoration:none; color:#000; padding-right:12px; margin-right:10px;}
li a:hover{ text-decoration:underline;}
li a em{width:10px; height:18px; overflow:hidden;background:#FFF; position:absolute;right:0; bottom:0;
text-indent:-999px;} li span{ position:absolute; padding-left:5px; color:#CCC;}
</style>
</head>
<body>
<ol>
<li><a href="#">练演员<em>...</em></a><span> 2009-6-21</span></li>
<li><a href="#">练演员的训演员<em>...</em></a><span> 2009-6-21</span></li>
<li><a href="#">杂技团美女演员的训练<em>...</em></a><span> 2009-6-21</span></li>
<li><a href="#">杂技团美女演员的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训演员的训练演员的训练< em>...</em></a><span>2009-6-21</span></li>
<li><a href="#">杂技团美女演员的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练练演员的训练演员的训练技团美女演员的训练演员技团美女演员的训练演员< em>...</em></a><span>2009-6-21</span></li>
</ol>
</body>
</html>
html CSS实例效果(8):纯CSS图片放大效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<META NAME="Author" CONTENT="hhshushu" />
<META NAME="Keywords" CONTENT="纯CSS图片放大效果" />
<META NAME="Description" CONTENT="纯CSS图片放大效果" />
<title>纯CSS图片放大效果</title>
<style type="text/css" title="">
body{width:320px;margin:0 auto;padding:20px;background:#000;color:#000;}
#main-content{border:5px solid #7bc809;padding:5px;background:#fff ;}
ul{ margin:0;padding:0;list-style:none;padding-bottom:300px; /*padding给图片撑开空间*/}
li{display:inline;}
li a{position:relative;}
li a:hover{position:relative;border:none;z-index:1000;}/*此处要有border:none属性，否则IE6下面无法显示出来，是IE6伪类的BUG*/
li a img{width:100px;height:100px;border:none;position:absolute;}/*使用绝对定位让图片固定从而脱离页面流*/
li a:hover img{position: absolute;left:-10px;top:-50px;width:240px;height:240px;padding:5px;background:#fff;border:2px solid #000;z-index:1000;} /*注意这里的z-index显示设置，否则会有重叠*/
li#pic-01 a img{top:0;left:0;}
li#pic-02 a img{top:0;left:100px;}
li#pic-03 a img{top:0;left:200px;}
li#pic-04 a img{top:100px;left:0;}
li#pic-05 a img{top:100px;left:100px;}
li#pic-06 a img{top:100px;left:200px;}
li#pic-07 a img{top:200px;left:0px;}
li#pic-08 a img{top:200px;left:100px;}
li#pic-09 a img{top:200px;left:200px;}
/*定位图片的排布*/
</style>
</head>
<body>
<div id="main-content" >
<ul>
<li id="pic-01"><a href="http://bbs.blueidea.com"><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="图1" /></a></li>
<li id="pic-02"><a href="http://bbs.blueidea.com"><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="图2" /></a></li>
<li id="pic-03"><a href="http://home.blueidea.com/apps.php?do=case&ac=lists&uid=560226&picid=68256"><img src="http://home.blueidea.com/attachment/201102/24/560226_12985459674K0h_t.jpg" alt="图3" /></a></li>
<li id="pic-04"><a href="#"><img src="#" alt="图4" /></a></li>
<li id="pic-05"><a href="#"><img src="#" alt="图5" /></a></li>
<li id="pic-06"><a href="#"><img src="#" alt="图6" /></a></li>
<li id="pic-07"><a href="#"><img src="#" alt="图7" /></a></li>
<li id="pic-08"><a href="#"><img src="#" alt="图8" /></a></li>
<li id="pic-09"><a href="#"><img src="#" alt="图8" /></a></li>
</ul>
</div>
</body>
</html>