He Min Blog» Blog Archive » 各种html+CSS实例效果更新为2010.7.27

<!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>鼠标经过变换文字(www.hemin.cn)</title> <style> #Menu{ width:500px; margin:50px auto; border:1px solid #CCC; overflow:hidden; } #Menu ul{ margin:0;padding:0;list-style:none;} #Menu li{ width:100px; height:22px; line-height:22px; float:left; overflow:hidden; text-align:center; } #Menu a{ width:100px;float:left;overflow:hidden;} #Menu span{display:block;margin-top:-22px;} #Menu a:hover{padding-top:22px;} </style> </head> <body> <ul id="Menu"> <li><a href="#"><span>HOME</span>首页</a></li> <li><a href="#"><span>NEWS</span>新闻</a></li> <li><a href="#"><span>ABOUT</span>关于</a></li> <li><a href="#"><span>CONTACT</span>联系</a></li> <li><a href="#"><span>照片</span>PHOTO</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=gb2312" /> <title>边框为阴影效果(www.hemin.cn)</title> <style type="text/css"> div {border-width: 1px; border-style: solid; padding: 1px;} .a {background-color: #F3F3F3; border-color: #FBFBFB;} .b {background-color: #D8D8D8; border-color: #E8E8E8;} .c {background-color: #FFF; border-color: #BBB; height: 100px;color：#ff0000;} .middle-demo-4{ width:300px; border:#FF0000 1px solid; height: 300px; position:absolute; } .middle-demo-4 div{ border:#009900 1px solid; height:20px; width:300px; position:absolute; margin-top:-10px; top:50%; left:0; } .middle-demo-4 div div{ border:#330066 1px solid; height:20px; width:300px; margin-top:-12px; margin-left:-2px; position:relative; top: 50%; left:0; } </style> </head> <body> <div class="a"> <div class="b"> <div class="c">边框为阴影效果</div> </div> </div> <div class="middle-demo-4"> <div> <div>让内容垂直居中</div> </div> </div> </body> </html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>google analytics buttons(www.hemin.cn)</title> <style type="text/css"> /* default stuff */ body { padding:20px; font-family:arial; text-align:center; } p, li { font-size: 12px; line-height:18px; } h3 { margin-bottom:6px; } .examplesGoHere { text-align:left; margin:0 auto; } .letsGiveItAFixedWidthOf200Pixels { width:200px; } ul { list-style:none; margin-left:0; padding-left:0; margin-top:0; } ul li { margin-bottom:8px; margin-left:0; padding-left:0; } /* notched effect for links in the unordered list */ .notchedListItems a { display:block; border: solid #666; border-width: 0 1px; text-decoration: none; outline:none; color: #000; background: #e4e4e4; } .notchedListItems a b { display: block; position:relative; top: -1px; left: 0; border:solid #666; border-width:1px 0 0; font-weight:normal; } .notchedListItems a b b { border-width:0 0 1px; top: 2px; padding:1px 6px; } .notchedListItems a:hover, .notchedListItems a:hover b { background:#666; color:white; } .feature { border:solid #647aae; border-width:0 1px; background:#b0c0e6; } .feature div { position:relative; top: -1px; left: 0; border:solid #647aae; border-width:1px 0 0; } .feature div div { top: 2px; border-width:0 0 1px; padding: 0px 6px; } </style> </head> <body> <div class="examplesGoHere letsGiveItAFixedWidthOf200Pixels"> <h3>A list</h3> <ul class="notchedListItems"> <li><a href="#"><b><b>About</b></b></a></li> <li><a href="#"><b><b>Contact</b></b></a></li> <li><a href="#"><b><b>Cssrain</b></b></a></li> </ul> <h3>A div</h3> <div class="feature"> <div> <div> <p>This is an example of the notched corners as applied to a div container.</p> <p>This is an example of the notched corners as applied to a div container.</p> <p>This is an example of the notched corners as applied to a div container.</p> </div> </div> </div> <ul class="notchedListItems"> <li><a href="http://www.hemin.cn"><b><b>hemin.cn</b></b></a></li> </ul> </div>  </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> <title>CSS: Star Rating Redux(www.hemin.cn)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="http://www.hemin.cn/demo/xjpf/star_rating.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <h1>CSS: Star Rating Redux</h1> <ul class="star-rating"> <li class="current-rating" style="width:60%;">Currently 3/5 Stars.</li> <li><a href="#" title="1 star out of 5" class="one-star">1</a></li> <li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li> <li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li> <li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li> <li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li> </ul> <h1>CSS: Star Rating Redux inline</h1> Rate this: <span class="inline-rating"> <ul class="star-rating small-star"> <li class="current-rating" style="width:30%;">Currently 1.5/5 Stars.</li> <li><a href="#" title="1 star out of 5" class="one-star">1</a></li> <li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li> <li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li> <li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li> <li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li> </ul></span> And This: <span class="inline-rating"> <ul class="star-rating small-star"> <li class="current-rating" style="width:80%;">Currently 4/5 Stars.</li> <li><a href="#" title="1 star out of 5" class="one-star">1</a></li> <li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li> <li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li> <li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li> <li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li> </ul> </span> <h1>Let's make it smaller</h1> <ul class="star-rating small-star"> <li class="current-rating" style="width:50%">Currently 2.5/5 Stars.</li> <li><a href="#" title="1 star out of 5" class="one-star">1</a></li> <li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li> <li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li> <li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li> <li><a href="#" title="5 stars out of 5" class="five-stars">5</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=gbk" /> <title>Css Trick - Pure Css Text Gradients(www.hemin.cn)</title> </meta> <style> body { margin:0; padding:2em 4em; background:#fff; font:90% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } h1 { font-size:300%; line-height:1em; color:#8bb544; font-weight:bold; text-transform:uppercase; letter-spacing:-.05em; position:relative; } h2 { font-size:260%; color:#0079b6; font-weight:bold; letter-spacing:-.05em; position:relative; margin:.6em 0; padding-top:1px; /* use top padding to adjust the start of the gradient */ width:100%; } h3 { font-size:240%; color:#7365a0; font-weight:bold; text-transform:uppercase; letter-spacing:-.05em; padding-top:3px; position:relative; margin:.6em 0; width:100%; } h4 { font-size:220%; color:#dc5b24; font-weight:normal; letter-spacing:-.05em; position:relative; margin:.6em 0; padding-top:1px; width:100%; } h1 span, h2 span, h3 span, h4 span{ position:absolute; display:block; top:0; left:0; height:100%; width:100%; background:url(http://www.hemin.cn/demo/jianbian/gradient_1.png) repeat-x; } h1 span, h3 span{background:url(http://www.hemin.cn/demo/jianbian/gradient_2.png) repeat-x;} * html h1 span, * html h3 span{ background-color:#fff; back\ground-color:transparent; background-image: url(none.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.hemin.cn/demo/jianbian/gradient_2.png", sizingMethod="scale"); } * html h2 span, * html h4 span{ background-color:#fff; back\ground-color:transparent; background-image: url(none.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.hemin.cn/demo/jianbian/gradient_1.png", sizingMethod="scale"); } </style> </head> <body> <h1>纯净的CSS渐变文本<span></span></h1> <h2>CSSRAIN DEMO<span></span></h2> <h4>国外收集过来的.<span></span></h4> <h5>IE6.7,FF2通过.<span></span></h5> </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> <script type="text/javascript"> </script> <style type="text/css"> .list ul{position:relative;background:url(http://www.hemin.cn/Photo/list.gif) repeat 0 0;width:400px;} .list ul li{height:32px;line-height:32px;} .list ul li em{position:absolute;right:0px;} </style> </head> <body> <div class="list"> <h3>这是隔行变色啊..</h3> <ul> <li><a href="" alt="">这是隔行变色啊...</a><em>(2009-8-20)</em></li> <li><a href="" alt="">这是隔行变色啊...</a><em>(2009-8-20)</em></li> <li><a href="" alt="">这是隔行变色啊...</a><em>(2009-8-20)</em></li> <li><a href="" alt="">这是隔行变色啊...</a><em>(2009-8-20)</em></li> <li><a href="" alt="">这是隔行变色啊...</a><em>(2009-8-20)</em></li> </ul> </div> </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> <title>鼠标经过文本时提示的信息(www.hemin.cn)</title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> /*Tooltips*/ .tooltips { position:relative; /*这个是关键*/ z-index:2; } .tooltips:hover { z-index:3; background:none; /*没有这个在IE中不可用*/ } .tooltips span { display: none; } .tooltips:hover span { /*span 标签仅在 :hover 状态时显示*/ display:block; position:absolute; top:21px; left:9px; width:15em; border:1px solid black; background-color:#ccFFFF; padding: 3px; color:black; } </style> </head> <body> <a class="tooltips" href="#tooltips">这就是Tooltips<span>正是你见到的，这些附加的说明文字是在鼠标经过的时候显示。</span></a> </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" /> <meta name="author" content="Chomo" /> <title>三级级联菜单</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} .c_subNav { width:150px; } .c_subNav a { text-decoration:none; color:#333;} .c_subNav a:hover { color:#f60;} .c_subNav ul ul { position:absolute; display:none; right:-150px; top:-1px;} .c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left; width:100%;} .c_subNav a.li { position:relative;} .c_subNav li .option { display:block; line-height:15px; padding:5px 5px 5px 25px; background:no-repeat 5px 4px; cursor:pointer; font:12px Verdana; zoom:1; background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif) no-repeat;} .c_subNav li .option:hover { color:#f60; background-color:#ffa;} .c_subNav li .option span { display:block; padding-right:15px; background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif) no-repeat right 0;} .c_subNav li .option:hover span { background-position:right -15px;} .c_subNav .li:hover { z-index:2; background:transparent;} .c_subNav .li:hover ul { display:block;} .c_subNav .li:hover ul ul { display:none;} .c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;} .c_subNav .li:hover li { border-bottom:none;} .c_subNav .li:hover li .option { padding:2px 5px; background:transparent;} .c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;} .c_subNav .li:hover li .option:hover span { background-position:right -30px;} .c_subNav .li:hover .li:hover ul { display:block; left:145px; top:-2px;} .c_subNav .charges .option { background-position:4px -45px;} .c_subNav .biz .option { background-position:4px -70px;} .c_subNav .change .option { background-position:4px -95px;} .c_subNav .score .option { background-position:4px -120px;} .c_subNav .server .option { background-position:4px -145px;} .c_subNav .edit .option { background-position:4px -170px;} .c_subNav .sms .option { background-position:4px -195px;} </style> </head> <body> <div class="c_subNav"> <ul> <li class="li charges"> <a href="#nogo" class="option"><span>话费服务</span></a> <ul> <li class="li"> <a href="#nogo" class="option"><span>话费查询</span></a> <ul> <li class="li"><a href="#nogo" class="option">实时话费查询</a></li> <li class="li"><a href="#nogo" class="option">话费余额查询</a></li> <li class="li"><a href="#nogo" class="option">月账单查询</a></li> <li class="li"><a href="#nogo" class="option">月详单查询</a></li> <li class="li"><a href="#nogo" class="option">缴费历史查询</a></li> <li class="li"><a href="#nogo" class="option">资费优选推荐</a></li> </ul> </li> <li class="li"> <a href="#nogo" class="option"><span>定制话费信息</span></a> <ul> <li class="li"><a href="#nogo" class="option">定制短信账单</a></li> <li class="li"><a href="#nogo" class="option">话费余额短信提醒</a></li> <li class="li"><a href="#nogo" class="option">定制Email账单</a></li> </ul> </li> <li class="li"> <a href="#nogo" class="option"><span>网上交费</span></a> <ul> <li class="li"><a href="#nogo" class="option">网上缴费</a></li> <li class="li"><a href="#nogo" class="option">充值卡缴费</a></li> </ul> </li> </ul> </li> <li class="li biz"> <a href="#nogo" class="option"><span>业务办理</span></a> <ul> <li class="li"> <a href="#nogo" class="option"><span>日常业务办理</span></a> <ul> <li class="li"><a href="#nogo" class="option">来电显示</a></li> <li class="li"><a href="#nogo" class="option">呼叫等待</a></li> <li class="li"><a href="#nogo" class="option">呼叫转移</a></li> <li class="li"><a href="#nogo" class="option">三方通话</a></li> <li class="li"><a href="#nogo" class="option">来电提醒</a></li> <li class="li"><a href="#nogo" class="option">呼叫保持</a></li> <li class="li"><a href="#nogo" class="option">呼叫转移设置</a></li> <li class="li"><a href="#nogo" class="option">主叫隐藏</a></li> <li class="li"><a href="#nogo" class="option">彩铃</a></li> <li class="li"><a href="#nogo" class="option">国内漫游</a></li> <li class="li"><a href="#nogo" class="option">短信回执</a></li> <li class="li"><a href="#nogo" class="option">12580综合信息</a></li> <li class="li"><a href="#nogo" class="option">关爱一线通</a></li> </ul> </li> <li class="li"> <a href="#nogo" class="option"><span>数据业务</span></a> <ul> <li class="li"><a href="#nogo" class="option">手机上网</a></li> <li class="li"><a href="#nogo" class="option">GPRS</a></li> <li class="li"><a href="#nogo" class="option">飞信</a></li> <li class="li"><a href="#nogo" class="option">手机报</a></li> <li class="li"><a href="#nogo" class="option">无线音乐俱乐部</a></li> <li class="li"><a href="#nogo" class="option">手机邮箱</a></li> <li class="li"><a href="#nogo" class="option">号簿管家</a></li> <li class="li"><a href="#nogo" class="option">WLAN业务</a></li> <li class="li"><a href="#nogo" class="option">彩乐短信</a></li> </ul> </li> <li class="li"> <a href="#nogo" class="option"><span>手机报停/报开</span></a> <ul> <li class="li"><a href="#nogo" class="option">手机报停</a></li> <li class="li"><a href="#nogo" class="option">手机复机</a></li> </ul> </li> <li class="li"> <a href="#nogo" class="option">梦网查询与退订</a> </li> </ul> </li> <li class="li change"> <a href="#nogo" class="option"><span>套餐办理与变更</span></a> <ul> <li class="li"><a href="#nogo" class="option">GPRS套餐变更</a></li> <li class="li"><a href="#nogo" class="option">产品变更</a></li> </ul> </li> <li class="li score"> <a href="#nogo" class="option"><span>积分计划</span></a> <ul> <li class="li"><a href="#nogo" class="option">积分查询</a></li> <li class="li"><a href="#nogo" class="option">积分兑换</a></li> <li class="li"><a href="#nogo" class="option">积分明细查询</a></li> <li class="li"><a href="#nogo" class="option">积分兑换话费</a></li> <li class="li"><a href="#nogo" class="option">积分兑换历史查询</a></li> </ul> </li> <li class="li server"> <a href="#nogo" class="option"><span>在线客服</span></a> <ul> <li class="li"><a href="#nogo" class="option">号码归属地查询</a></li> <li class="li"><a href="#nogo" class="option">营业厅查询</a></li> <li class="li"><a href="#nogo" class="option">手机仿真</a></li> <li class="li"><a href="#nogo" class="option">在线咨询</a></li> </ul> </li> <li class="li edit"> <a href="#nogo" class="option"><span>个人信息管理</span></a> <ul> <li class="li"><a href="#nogo" class="option">个人资料修改</a></li> <li class="li"><a href="#nogo" class="option">服务密码变更</a></li> <li class="li"><a href="#nogo" class="option">服务密码重置</a></li> <li class="li"><a href="#nogo" class="option">PUK码查询</a></li> <li class="li"><a href="#nogo" class="option">套餐使用状态查询</a></li> <li class="li"><a href="#nogo" class="option">业务开通状态查询</a></li> </ul> </li> <li class="li sms"> <a href="#nogo" class="option">短信息服务</a> </li> </ul> </div> </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=gb2312" /> <title>em实现倒三角的提示效果</title> </head> <style>  </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> <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>

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

<!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> <title>小三角</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;} #info,#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;} #info div{background:#FF0000; width:0px; height:0px; overflow:hidden; margin-bottom:10px;} /*一些三角的写法*/ #com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;} #com_b{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;} #com_c{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;border-left:10px solid #FF3300;} #com_d{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} #com_e{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;} #com_f{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-left:10px solid #FFFFCC;} #com_g{ border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} #com_h{ border-top:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} #com_i{ border-top:10px solid #FF3300;border-right:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} </style> </head> <body> <div id="info"> <h1>一些三角形的写法</h1> <div id="com_a"></div> <div id="com_b"></div> <div id="com_f"></div> <div id="com_g"></div> <div id="com_c"></div> <div id="com_d"></div> <div id="com_e"></div> <div id="com_h"></div> <div id="com_i"></div> </div> </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>纯CSS超过宽度显示省略号(www.hemin.cn)</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> <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>

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

<!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="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/01.jpg" alt="" /></a></li> <li id="pic-02"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/02.jpg" alt="" /></a></li> <li id="pic-03"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/03.jpg" alt="" /></a></li> <li id="pic-04"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/04.jpg" alt="" /></a></li> <li id="pic-05"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/05.jpg" alt="" /></a></li> <li id="pic-06"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/06.jpg" alt="" /></a></li> <li id="pic-07"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/07.jpg" alt="" /></a></li> <li id="pic-08"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/08.jpg" alt="" /></a></li> <li id="pic-09"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/09.jpg" alt="" /></a></li> </ul> </div> </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=gb18030" /> <title>五星红旗</title> <style> html,body{ margin:0; padding:0;} body{ width:1300px; height:800px;} .clear{ clear:both;} #corner{ position:relative; width:0px; height:0px; overflow:hidden; border-top:30.8px solid #f00; border-right:10.0px solid #ff0; float:left; display:inline; margin-left:32.4px; } #corner2{ position:relative; width:0px; height:0px; overflow:hidden; border-top:30.8px solid #f00; border-left:10.0px solid #ff0; float:left; display:inline; } #nav{ position:relative; width:0px; height:0px; overflow:hidden; border-top:30.8px solid #ff0; border-left:42.4px solid #f00; float:left; display:inline; } #nav2{ position:relative; width:0px; height:0px; overflow:hidden; border-top:30.8px solid #ff0; border-right:42.4px solid #f00; float:left; display:inline; } #foot{ position:relative; width:28.9px; height:26.5px; background-color:#ff0; float:left; display:inline; margin-left:13.5px; overflow:hidden; z-index:5; margin-top:-11.2px; } #foot2{ position:relative; width:28.9px; height:26.5px; background-color:#ff0; float:left; display:inline; overflow:hidden; z-index:5; margin-top:-11.2px; } #fb{ position:relative; width:0px; height:0px; overflow:hidden; border-top:14.7px solid #ff0; border-right:28.9px solid #f00; float:left; display:inline; margin-top:11.8px; margin-top:12px; z-index:10; } #fb2{ position:relative; width:0px; height:0px; overflow:hidden; border-top:14.7px solid #ff0; border-left:28.9px solid #f00; float:left; display:inline; margin-top:11.8px; margin-top:12px; z-index:10; } #ft{ position:relative; width:0px; height:0px; overflow:hidden; border-top:26.5px solid #f00; border-right:13.5px solid transparent; float:left; display:inline; z-index:13; margin-top:-26.6px; } #ft2{ position:relative; width:0px; height:0px; overflow:hidden; border-top:26.5px solid #f00; border-left:13.5px solid transparent; float:right; display:inline; z-index:13; margin-top:-26.6px; } #one{ width:0px;height:0px; border-top:250px #ff0 solid; border-right:250px #000 solid; border-left:green 250px solid; border-bottom:red 250px solid; position:absolute; top:1000px; } #flag{ width:1000px; height:700px; position:absolute; border:1px solid #ff6600; background-color:#f00; top:50px; left:50px; } </style> </head> <body> <div id="flag"></div> <div id="star" style="position:absolute;top:100px;left:100px;"> <div id="corner"></div><div id="corner2"></div> <div class="clear"></div> <div id="nav"></div><div id="nav2"></div> <div class="clear"></div> <div id="foot"> <div id="fb"></div> <div id="ft"></div> </div> <div id="foot2"> <div id="fb2"></div> <div id="ft2"></div> </div> </div> <div id="star" style="position:absolute;top:80px;left:330px;"> <div id="corner"></div><div id="corner2"></div> <div class="clear"></div> <div id="nav"></div><div id="nav2"></div> <div class="clear"></div> <div id="foot"> <div id="fb"></div> <div id="ft"></div> </div> <div id="foot2"> <div id="fb2"></div> <div id="ft2"></div> </div> </div> <div id="star" style="position:absolute;top:180px;left:360px;"> <div id="corner"></div><div id="corner2"></div> <div class="clear"></div> <div id="nav"></div><div id="nav2"></div> <div class="clear"></div> <div id="foot"> <div id="fb"></div> <div id="ft"></div> </div> <div id="foot2"> <div id="fb2"></div> <div id="ft2"></div> </div> </div> <div id="star" style="position:absolute;top:280px;left:330px;"> <div id="corner"></div><div id="corner2"></div> <div class="clear"></div> <div id="nav"></div><div id="nav2"></div> <div class="clear"></div> <div id="foot"> <div id="fb"></div> <div id="ft"></div> </div> <div id="foot2"> <div id="fb2"></div> <div id="ft2"></div> </div> </div> <div id="star" style="position:absolute;top:360px;left:250px;"> <div id="corner"></div><div id="corner2"></div> <div class="clear"></div> <div id="nav"></div><div id="nav2"></div> <div class="clear"></div> <div id="foot"> <div id="fb"></div> <div id="ft"></div> </div> <div id="foot2"> <div id="fb2"></div> <div id="ft2"></div> </div> </div> </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"> body{ background-color:#D0DADF;} .flag{ width:450px; height:300px;box-shadow:5px 5px 5px #333; -moz-box-shadow:5px 5px 5px #333; float:left; margin:0px 15px 15px; -webkit-box-shadow:5px 5px 5px #999; position:relative; overflow:hidden;} .china{ background-color:#F00;} .china .bigStar{ color:#FF0; font-size:96px; position:absolute; top:20px; left:21px;} .china .smallStar{ color:#FF0; position:absolute; font-size:28px;} .china .one{-o-transform:rotate(23deg); -moz-transform:rotate(23deg); -webkit-transform:rotate(23deg); top:18px; left:143px;} .china .two{ -o-transform:rotate(46deg); -moz-transform:rotate(46deg); -webkit-transform:rotate(46deg); top:49px; left:173px;} .china .three{ -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); top:93px; left:167px;} .china .four{-o-transform:rotate(23deg); -moz-transform:rotate(23deg); -webkit-transform:rotate(23deg); top:129px; left:140px;} .congo{ background: #008836;} .congo .yellow{ width:150px; height:300px; -o-transform:skew(-45deg,0deg); -moz-transform:skew(-45deg,0deg); -webkit-transform:skew(-45deg,0deg); position:absolute; left:150px; background-color:#FEFE00;} .congo .red{ width:425px; height:425px; background-color:#F00; -o-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); position:absolute; top:88px; left:237px;} .korea{ background: #FEFEFE;} .korea .threeLine{ width:76px; position:absolute;} .korea .line{ width:76px;height:17px; background-color:#000000; margin-bottom:6px; position:relative;} .korea .line_dir_1{-o-transform:rotate(-48deg); -moz-transform:rotate(-48deg); -webkit-transform:rotate(-48deg); top:32px; left:55px;} .korea .line_dir_2{ -o-transform:rotate(48deg); -moz-transform:rotate(48deg); -webkit-transform:rotate(48deg); top:33px; right:57px;} .korea .line_dir_3{ -o-transform:rotate(48deg); -moz-transform:rotate(48deg); -webkit-transform:rotate(48deg); top:211px; left:51px;} .korea .line_dir_4{ -o-transform:rotate(-48deg); -moz-transform:rotate(-48deg); -webkit-transform:rotate(-48deg); top:211px; right:52px;} .korea .zindex_0{ z-index:0;} .korea .zindex_1{ z-index:1;} .korea .vline{ width:17px; height:65px; background-color:#fff; position:absolute; top:-1px; left:29px; z-index:1} .korea .mround{ width:180px; height:180px; border-radius:90px; -moz-border-radius:90px; -webkit-border-radius:90px; background-color:#FE0000; position:absolute; top:62px; left:128px;-o-transform:rotate(22deg); -moz-transform:rotate(22deg); -webkit-transform:rotate(22deg);} .korea .halfblueround{ width:180px; height:90px; border-radius:0px 0px 90px 90px; -moz-border-radius:0px 0px 90px 90px; -webkit-border-radius:0px; -webkit-border-bottom-left-radius:90px; -webkit-border-bottom-right-radius:90px;/*解决safari半圆显示问题*/background-color:#0B4199;position:absolute; bottom:0px;} .korea .Shalfblueround{ width:90px; height:45px; border-radius:45px 45px 0px 0px; -moz-border-radius:45px 45px 0px 0px; -webkit-border-radius:0px; -webkit-border-top-left-radius:45px; -webkit-border-top-right-radius:45px;background-color:#0B4199; position:absolute; right:0px; top:46px;} .korea .Shalfredround{ width:90px; height:45px; border-radius:0px 0px 45px 45px; -moz-border-radius:0px 0px 45px 45px; -webkit-border-radius:0px; -webkit-border-bottom-left-radius:45px; -webkit-border-bottom-right-radius:45px;background-color:#FE0000; position:absolute; left:0px; top:89px;} .tuerqi{ background:#FE0000;} .tuerqi .whiteRound{ width:156px; height:156px; background-color:#FEFEFE;border-radius:78px; -moz-border-radius:78px; -webkit-border-radius:78px; position:absolute; top:72px; left:88px;} .tuerqi .redRound{ width:126px; height:126px; background-color:#FE0000;border-radius:63px; -moz-border-radius:63px; -webkit-border-radius:63px; position:absolute; top:87px; left:123px;} .tuerqi .Star{ color:#fff; font-size:60px; position:absolute; top:113px; left:226px; transform:rotate(-16deg); -o-transform:rotate(-16deg);-moz-transform:rotate(-16deg); -webkit-transform:rotate(-16deg);} </style> </head> <body> <div class="flag china"> <div class="bigStar">★</div> <div class="smallStar one">★</div> <div class="smallStar two">★</div> <div class="smallStar three">★</div> <div class="smallStar four">★</div> </div> <div class="flag congo"> <div class="yellow"></div> <div class="red"></div> </div> <div class="flag korea"> <div class="threeLine line_dir_1"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="threeLine line_dir_2"> <div class="vline"></div> <div class="line zindex_0"></div> <div class="line zindex_1"></div> <div class="line zindex_0"></div> </div> <div class="threeLine line_dir_3"> <div class="vline"></div> <div class="line zindex_1"></div> <div class="line zindex_0"></div> <div class="line zindex_1"></div> </div> <div class="threeLine line_dir_4"> <div class="vline"></div> <div class="line zindex_0"></div> <div class="line zindex_0"></div> <div class="line zindex_0"></div> </div> <div class="mround"> <div class="halfblueround"></div> <div class="Shalfredround"></div> <div class="Shalfblueround"></div> </div> </div> <div class="flag tuerqi"> <div class="whiteRound"></div> <div class="redRound"></div> <div class="Star">★</div> </div> </body> </html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS3 - 机器猫</title> <style> body{ background:#fff; width:901px; margin:auto; } #doraemon{ position:fixed; margin:50px; float:left; width:500px; } #instr{ float:right; width:400px; font-size:14px; border-left:2px solid black; padding-left:20px; } #head_light{ width:50px; height:50px; transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); box-shadow:80px 20px 50px #fff; -webkit-box-shadow:80px 20px 55px #fff; -moz-box-shadow:80px 20px 50px #fff; border-radius:45px; -webkit-border-radius:45px; -moz-border-radius:60px; position:absolute; top:-20px; left:170px; opacity:0.5 } #face{ position:relative; width:310px; height:300px; border-radius:146px; -webkit-border-radius:146px; -moz-border-radius:146px; background:#07beea; background: -webkit-gradient(linear, right top, left bottom, from(#fff) ,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95, #000), to(#444)); background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); border:#333 2px solid; top:-15px; box-shadow:-5px 10px 15px rgba(0,0,0,0.45); -webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45); -moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45); } #base{ position:relative; top:-5px; } #base_white{ position:absolute; border:#000 2px solid; width:264px; height:196px; border-radius: 150px 150px; -webkit-border-radius: 150px 150px; -moz-border-radius: 150px 150px; background:#FFF; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000)); background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); z-index:1; top:85px; left:22px; } #eyes{ position:relative; top:-5px; } div.eye{ position:absolute; border-radius: 35px 35px; -webkit-border-radius: 35px 35px; -moz-border-radius: 35px 35px; border:2px solid #000; width:72px; height:83px; z-index:20; background:#fff; } div.black_eye{ position:absolute; width:15px; height:15px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; background:#333; z-index:21; -webkit-animation-name: cate; -webkit-animation-duration: 3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 200; } @-webkit-keyframes cate{ 0%{ margin:0 0 0 0; } 80% { margin:0px 0 0 0; } 85% { margin:-20px 0 0 0; } 90%{ margin:0 0 0 0; } 93%{ margin:0 0 0 7px; } 96%{ margin:0 0 0 0; } 100%{ margin:0 0 0 0; } } div.black_left{ top:100px; left:130px; } div.black_right{ top:100px; left:170px; } div.eye_left{ top:45px; left:82px; } div.eye_right{ top:45px; left:156px; } #nose{ width:32px; height:32px; border:2px solid #000; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; background:#c93e00; position:absolute; top:117px; left:139px; z-index:30; } #nose_light{ width:10px; height:10px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:19px 8px 5px #fff; -webkit-box-shadow:19px 8px 5px #fff; -moz-box-shadow:19px 8px 5px #fff; position:relative; top:0px; left:0px; } #nose_line{ background:#000; width:4px; height:100px; top:125px; left:156px; position:absolute; } #nose_line{ background:#333; width:3px; height:100px; top:140px; left:155px; position:absolute; z-index:20; } #mouth{ width:240px; height:500px; border-bottom:3px solid #333; border-radius:120px; -webkit-border-radius:120px; -moz-border-radius:120px; position:absolute; top:-263px; left:36px; z-index:10; } #mouth_rewrite{ background:#fff; width:240px; height:90px; position:relative; top:115px; left:35px; z-index:12; border-radius:45px; -webkit-border-radius:45px; -moz-border-radius:60px; } #firefox_mouth, x:-moz-broken, x:last-of-type, x:indeterminate { position:relative; width:170px; height:150px; -moz-border-radius:85px; border:3px solid #000; background:#FFF; z-index:11; top:-3px; left:70px; } .whiskers{ background:#333; height:2px; width:60px; position:absolute; z-index:20; } .whi_right{ top:165px; left:210px; } .whi_right_top{ top:145px; left:210px; } .whi_right_bottom{ top:185px; left:210px; } .whi_left{ top:165px; left:50px; } .whi_left_top{ top:145px; left:50px; } .whi_left_bottom{ top:185px; left:50px; } .rotate20{ transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); } .rotate160{ transform: rotate(160deg); -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -o-transform: rotate(160deg); } #choker{ position:relative; top:-55px; left:35px; z-index:100; } #belt{ width:230px; height:20px; border:#000 solid 2px; background:#ca4100; background: -webkit-gradient(linear, left top, left bottom, from(#ca4100), to(#800400)); background: -moz-linear-gradient(top, #ca4100, #800400); border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; position:relative; left:5px; } #bell{ width:40px; height:40px; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; border:2px solid #000; background:#f9f12a; background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100)); background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); box-shadow:-5px 5px 10px rgba(0,0,0,0.25); -webkit-box-shadow:-5px 3px 5px rgba(0,0,0,0.25); -moz-box-shadow:-5px 5px 10px rgba(0,0,0,0.25); position:relative; top:-15px; left:100px; } #bell_line{ width:36px; height:2px; background:#f9f12a; border:#333 solid 2px; position:relative; top:10px; } #bell_circle{ width:12px; height:10px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; background:#000; position:relative; top:14px; left:14px; } #bell_under{ width:3px; height:15px; background:#000; position:relative; top:10px; left:18px; } #bell_light{ width:10px; height:10px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; box-shadow:19px 8px 5px #fff; -webkit-box-shadow:19px 8px 5px #fff; -moz-box-shadow:19px 8px 5px #fff; position:relative; opacity:0.7; top:-35px; left:5px; } #doutai{ position:absolute; width:220px; height:165px; background:#07beea; background: -webkit-gradient(linear, right top, left top, from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be)); background: -moz-linear-gradient(right, #07beea, #0073b3 50%,#0096be 75%,#00b0e0 ,#0096be 100% ,#333 114%); border:#333 2px solid; top:262px; left:46px; } div.base_white2{ position:absolute; width:170px; height:170px; border-radius:85px; -webkit-border-radius:85px; -moz-border-radius:85px; border:2px solid #000; background:#FFF; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000)); background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); } .doutai_center{ top:230px; left:72px; } #circle{ position:relative; width:130px; height:130px; border-radius:65px; -webkit-border-radius:65px; -moz-border-radius:65px; background:#fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff)); background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff); border:2px solid #000; top:-120px; left:92px; } #circle_rewrite{ position:relative; width:134px; height:60px; background:#fff; border-bottom:2px solid #000; top:-250px; left:92px; } #hand_right{ position:absolute; top:272px; left:248px; width:100px; height:100px; } #arm_right{ position:relative; width:80px; height:50px; background:#07beea; background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555)); background: -moz-linear-gradient(top, #07beea, #07beea 85%, #555); border:solid 1px #000; z-index:-1; top:17px; transform: rotate(35deg); -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -o-transform: rotate(35deg); box-shadow:-10px 7px 10px rgba(0,0,0,0.35); -webkit-box-shadow:-10px 7px 10px rgba(0,0,0,0.35); -moz-box-shadow:-10px 7px 10px rgba(0,0,0,0.35); } #hand_left{ position:absolute; top:272px; left:-46px; width:100px; height:100px; } #arm_left{ position:relative; width:80px; height:50px; background:#0096be; border:solid 1px #000; z-index:-1; top:17px; left:36px; transform: rotate(145deg); -webkit-transform: rotate(145deg); -moz-transform: rotate(145deg); -o-transform: rotate(145deg); box-shadow:5px -7px 10px rgba(0,0,0,0.25); -webkit-box-shadow:5px -7px 10px rgba(0,0,0,0.25); -moz-box-shadow:5px -7px 10px rgba(0,0,0,0.25); } div.hand_circle{ position:absolute; width:60px; height:60px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; border:2px solid #000; background:#fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999)); background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); } .hand_right{ top:32px; left:40px; } .arm_rewrite_right{ position:relative; width:4px; height:45px; background:#07beea; top:-51px; left:18px; } .hand_left{ top:34px; left:10px; } .arm_rewrite_left{ position:relative; width:4px; height:50px; background:#0096be; top:-52px; left:92px; } #foot{ position:relative; width:280px; height:40px; top:-141px; left:20px; } #foot_left{ width:125px; height:30px; background:#fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999)); background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999); border:solid 2px #333; border-top-left-radius:80px; border-bottom-left-radius:40px; border-top-right-radius:60px; border-bottom-right-radius:60px; -webkit-border-top-left-radius:80px; -webkit-border-bottom-left-radius:40px; -webkit-border-top-right-radius:60px; -webkit-border-bottom-right-radius:60px; -moz-border-radius-topleft:80px; -moz-border-radius-bottomleft:40px; -moz-border-radius-topright:60px; -moz-border-radius-bottomright:60px; position:relative; left:8px; top:2px; box-shadow:-6px 0px 10px rgba(0,0,0,0.35); -webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); -moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); z-index:-1; } #foot_right{ position:relative; width:125px; height:30px; background:#fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999)); background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999); border:solid 2px #333; border-top-left-radius:60px; border-bottom-left-radius:60px; border-top-right-radius:80px; border-bottom-right-radius:40px; -webkit-border-top-left-radius:60px; -webkit-border-bottom-left-radius:60px; -webkit-border-top-right-radius:80px; -webkit-border-bottom-right-radius:40px; -moz-border-radius-topleft:60px; -moz-border-radius-bottomleft:60px; -moz-border-radius-topright:80px; -moz-border-radius-bottomright:40px; top:-32px; left:141px; box-shadow:-6px 0px 10px rgba(0,0,0,0.35); -webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); -moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); z-index:-1; } #foot_rewrite{ position:relative; width:20px; height:10px; background:#fff; background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff)); background: -moz-linear-gradient(right top, #666, #fff 83%, #fff); top:-76px; left:127px; border-top:2px solid #000; border-right:2px solid #000; border-left:2px solid #000; border-top-right-radius:40px; border-top-left-radius:40px; -webkit-border-top-right-radius:40px; -webkit-border-top-left-radius:40px; -moz-border-radius-topleft:40px; -moz-border-radius-topright:40px; } #shadow_doutai_left{ width:30px; height:200px; box-shadow:-10px 10px 15px rgba(0,0,0,0.45); -webkit-box-shadow:-10px 10px 15px rgba(0,0,0,0.45); -moz-box-shadow:-10px 10px 15px rgba(0,0,0,0.45); position:absolute; top:250px; left:46px; z-index:-10; } #shadow_doutai_right{ width:30px; height:200px; box-shadow:10px 10px 15px rgba(0,0,0,0.35); -webkit-box-shadow:10px 10px 25px rgba(0,0,0,0.35); -moz-box-shadow:10px 10px 15px rgba(0,0,0,0.35); position:absolute; top:240px; left:230px; z-index:-10; } #shadow_doutai_arm{ width:85px; height:165px; box-shadow:-100px 10px 15px rgba(0,0,0,0.0); -webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25); -moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25); position:absolute; top:230px; left:113px; z-index:10; opacity:0.5; transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); border-bottom-left-radius:40px; -webkit-border-bottom-left-radius:40px; -moz-border-radius-bottomleft:40px; border-top-left-radius:20px; -webkit-border-top-left-radius:20px; -moz-border-radius-topleft:20px; } #shadow_belt{ width:40px; height:30px; box-shadow:-100px 10px 15px rgba(0,0,0,0); -webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25); -moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25); position:absolute; top:240px; left:130px; z-index:10; border-bottom-left-radius:40px; -webkit-border-bottom-left-radius:40px; -moz-border-radius-bottomleft:40px; z-index:300; } #arm_left:not(\*|*), .arm_rewrite_left:not(\*|*){ background:#07beea; } #arm_left, .arm_rewrite_left{ background:#07beea\9; *background:#07beea; _background:#07beea; } #kiji{ position:relative; top:-150px; } </style> </head> <body> <div id="doraemon"> <div id="face"> <div id="head_light"></div> <div id="eyes"> <div class="eye eye_left"></div> <div class="black_eye black_left"></div> <div class="eye eye_right"></div> <div class="black_eye black_right"></div> </div> <div id="base"> <div id="base_white"></div> <div id="nose"> <div id="nose_light"></div> </div> <div id="nose_line"></div> <div id="mouth"></div> <div id="mouth_rewrite"></div> <div id="firefox_mouth"></div> <div class="whiskers whi_right_top rotate160"></div> <div class="whiskers whi_right"></div> <div class="whiskers whi_right_bottom rotate20"></div> <div class="whiskers whi_left_top rotate20"></div> <div class="whiskers whi_left"></div> <div class="whiskers whi_left_bottom rotate160"></div> </div> </div> <div id="choker"> <div id="belt"></div> <div id="bell"> <div id="bell_line"></div> <div id="bell_circle"></div> <div id="bell_under"></div> <div id="bell_light"></div> </div> </div> <div id="body"> <div id="doutai"></div> <div class="base_white2 doutai_center"></div> <div id="pocket"> <div id="circle"></div> <div id="circle_rewrite"></div> </div> </div> <div id="hand_right"> <div id="arm_right"></div> <div class="hand_circle hand_right"></div> <div class="arm_rewrite_right"></div> </div> <div id="hand_left"> <div id="arm_left"></div> <div class="hand_circle hand_left"></div> <div class="arm_rewrite_left"></div> </div> <div id="foot"> <div id="foot_left"></div> <div id="foot_right"></div> <div id="foot_rewrite"></div> </div> <div id="shadow_doutai_arm"></div> <div id="shadow_doutai_left"></div> <div id="shadow_doutai_right"></div> <div id="shadow_belt"></div> </div> </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>CSS3 QQ企鹅</title>  <style> body {margin:0; padding:0; background:#FFF;} #qq {position:absolute; margin:50px 30%; width:500px;} #face{ position:relative; z-index:100; width:260px; height:200px; border-radius:400px 400px 280px 280px; -webkit-border-radius:400px 400px 280px 280px; -moz-border-radius:400px 400px 280px 280px; background:#000; background: -webkit-gradient(linear, right top, left bottom, from(#999) ,color-stop(0.20, #333), color-stop(0.73, #000),color-stop(0.95, #000), to(#000)); background: -moz-linear-gradient(right top, #999,#333 20%, #000 73% ,#000 95% ,#000 155%); top:-15px; } #eyes{ position:relative; top:-5px; } div.eye{ position:absolute; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; width:50px; height:70px; z-index:20; background:#fff; } div.black_eye{ position:absolute; width:15px; height:20px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; background:#333; z-index:21; -webkit-animation-name: cate; -webkit-animation-duration: 3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 200; } div.black_left{ top:95px; left:90px; } div.black_right{ top:95px; left:160px; } div.eye_left{ top:70px; left:65px; } div.eye_right{ top:70px; left:140px; } .mouth_up { border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; position:absolute; overflow:hidden; border-bottom:3px solid #F90; width:180px; height:22px; top:145px; left:40px; } .mouth_down { position:absolute; overflow:hidden; width:150px; height:15px; top:164px; left:55px; } .mouth_in { position:absolute; border-radius: 400px; -webkit-border-radius: 400px; -moz-border-radius: 400px; background:#F90; width:400px; height:400px; } .mouth_up div { top:0; left:-110px; } .mouth_down div { border:3px solid #000; bottom:0; left:-124px; } .scarf { position:relative; border:2px solid #000; z-index:90; width:256px; height:200px; border-radius:600px 600px 280px 280px; -webkit-border-radius:600px 600px 280px 280px; -moz-border-radius:600px 600px 280px 280px; background:#D00; top:-185px; } .main_body { position:relative; z-index:80; width:340px; height:260px; border-radius:500px 500px 400px 400px; -webkit-border-radius:500px 500px 400px 400px; -moz-border-radius:500px 500px 400px 400px; background:#000; top:-270px; left:-40px; } .hand_left { position:absolute; width:150px; height:45px; border-radius:120px 0 0 25px; -webkit-border-radius:120px 0 0 25px; -moz-border-radius:120px 0 0 25px; background:#000; transform: rotate(-35deg); -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -o-transform: rotate(-35deg); top:75px; left:-75px; } .hand_right { position:absolute; width:150px; height:45px; border-radius:0 120px 25px 0; -webkit-border-radius:0 120px 25px 0; -moz-border-radius:0 120px 25px 0; background:#000; transform: rotate(35deg); -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -o-transform: rotate(35deg); top:75px; left:270px; } .main_body .belly { position:absolute; width:300px; height:220px; border-radius:500px 500px 400px 400px; -webkit-border-radius:500px 500px 400px 400px; -moz-border-radius:500px 500px 400px 400px; background:#FFF; background: -webkit-gradient(linear, right top, left bottom, from(#FFF) ,color-stop(0.50, #FEFEFE), color-stop(0.73, #F2F2F2),color-stop(0.95, #EEE), to(#BBB)); background: -moz-linear-gradient(right top, #FFF,#EEE 50%, #CCC 73% ,#999 95% ,#BBB 155%); top:30px; left:20px; } .main_body .belly .tie { position:absolute; width:35px; height:60px; border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; border:2px solid #000; background:#D00; transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); left:55px; top:48px; } .main_body .belly .tie .tie_line { position:absolute; width:2px; height:40px; background:#000; left:25px; } .foot_left { position:absolute; width:120px; height:45px; border-radius:160px 40px 100px 40px; -webkit-border-radius:160px 40px 100px 40px; -moz-border-radius:160px 40px 100px 40px; background:#F90; border:2px solid #000; top:370px; left:-40px; } .foot_right { position:absolute; width:120px; height:45px; border-radius:40px 160px 40px 100px; -webkit-border-radius:40px 160px 40px 100px; -moz-border-radius:40px 160px 40px 100px; background:#F90; border:2px solid #000; top:370px; left:176px; } </style> </head> <body> <div id="qq"> <div id="face"> <div id="eyes"> <div class="eye eye_left"></div> <div class="black_eye black_left"></div> <div class="eye eye_right"></div> <div class="black_eye black_right"></div> </div> <div class="mouth_up"> <div class="mouth_in"></div> </div> <div class="mouth_down"> <div class="mouth_in"></div> </div> </div> <div class="scarf"></div> <div class="main_body"> <div class="hand_left"></div> <div class="hand_right"></div> <div class="belly"> <div class="tie"> <div class="tie_line"></div> </div> </div> </div> <div class="foot_left"></div> <div class="foot_right"></div> </div> </body> </html>

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

此页面上的内容需要较新版本的 Adobe Flash Player。

He Min Blog 每一步细节注定你将来的命运。

各种html+CSS实例效果更新为2010.7.27

相关文章：

1 Comment

Webmaster

Category

Tag Cloud

Recent Article

Random Pages

Recent Comments

Gallery

Pigeonhole

Links

Tunnel

Translation

访问者分析

此页面上的内容需要较新版本的 Adobe Flash Player。

He Min Blog 每一步细节注定你将来的命运。

各种html+CSS实例效果 更新为2010.7.27

相关文章：

1 Comment

Webmaster

Category

Tag Cloud

Recent Article

Random Pages

Recent Comments

Gallery

Pigeonhole

Links

Tunnel

Translation

访问者分析

各种html+CSS实例效果更新为2010.7.27