剧情的落幕

<style type="text/css"> body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0px;} ul{ margin:0px; padding:0px; list-style:none} img{ vertical-align:middle} #box{ width:950px; margin:0 auto;position:relative; } .text{ position:absolute;  left:430px; top:130px; line-height:150%;} .btn{position:absolute;  left:680px; top:140px; } </style> <style type="text/css"> body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0px;} ul{ margin:0px; padding:0px; list-style:none} img{ vertical-align:middle} #box{ width:950px; margin:0 auto;position:relative; } .text{ position:absolute;  left:430px; top:130px; line-height:150%;} .btn{position:absolute;  left:680px; top:140px; } </style> <div id="box"> <div class="text"><ul> <li>·软件版本：v7.1.1.1002</li> <li>·软件大小：609KB </li> <li>·更新日期：2010-07-07 </li> <li>·系统要求：Win2K / XP / Vista / Win7</li> <li>（超强查杀版支持32位XP / Vista / Win7）</li> </ul></div> <div class="btn"><a href="#"><img src="http://img.qihoo.com/images/2008/2010/20090729downloadx.gif" border="0" /></a></div> <ul> <li><img src="http://img.qihoo.com/images/2008/2010/360safe/20090729pic01.jpg" /></li> <li><img src="http://img.qihoo.com/images/2008/2010/360safe/20090729pic02x.jpg" /></li> <li><img src="http://img.qihoo.com/images/2008/2010/360safe/20090729pic03x.jpg" /></li> <li><img src="http://img.qihoo.com/images/2008/2010/360safe/20090729pic04xx.jpg" /></li> </ul></div>

不设置图片背景，在图片上写字

利用position:定位发式来做。

<style type="text/css"> body{ margin:0px; font-size:12px; font-family:Arial, Helvetica, sans-serif} ul{ margin:0px; padding:0px; list-style:none} .pic2 { margin:auto;width:600px;height:200px;border:#000 1px solid;} .pic2 li{ height:40px; line-height:40px; border-bottom:#CCCCCC 1px dashed} .pic2 img{ vertical-align:middle} </style> <!--[if IE 6]> <style type="text/css"> .pic2 li span {height: 100%; writing-mode: tb-rl;vertical-align: middle;} </style> <![endif]--> <div class="pic2"><ul> <li><span><img src="http://app.yz.szgla.com/Content/images/emot/qq.gif" /></span><span><img src="http://app.yz.szgla.com/Content/images/emot/ly.gif" /></span></li> <li><span><img src="http://app.yz.szgla.com/Content/images/emot/qq.gif" /></span>曾经盛大某游戏活动也有选秀。。。 哪个能被潜规则哪个能第一<span><img src="http://app.yz.szgla.com/Content/images/emot/ly.gif" /></span>有福了评委</li> <li><span><img src="http://app.yz.szgla.com/Content/images/emot/qq.gif" /></span>曾经盛大某游戏活动也有选秀。。。 哪个能被潜规则哪个能第一<span><img src="http://app.yz.szgla.com/Content/images/emot/ly.gif" /></span>有福了评委</li> <li><span><img src="http://app.yz.szgla.com/Content/images/emot/qq.gif" /></span>曾经盛大某游戏活动也有选秀。。。 哪个能被潜规则哪个能第一<span><img src="http://app.yz.szgla.com/Content/images/emot/ly.gif" /></span>有福了评委</li> <li><span><img src="http://app.yz.szgla.com/Content/images/emot/qq.gif" /></span>曾经盛大某游戏活动也有选秀。。。 哪个能被潜规则哪个能第一<span><img src="http://app.yz.szgla.com/Content/images/emot/ly.gif" /></span>有福了评委</li> </ul></div>  
语法：writing-mode : lr-tb、tb-rl
参数：lr-tb：从左向右，从上往下 　tb-rl：从上往下，从右向左
  
  

#pic1{background:url(images/pic1.jpg);width:100px; height:100px;z-index:1000;position:relative; } #pic2{height:100px;width:100px; margin-top:-40px; background:url(images/pic2.png) no-repeat;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pic2.png'); _background-image: none; z-index:0;position:relative;} <div id="pic1"></div> <div id="pic2"></div>
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pic2.png');
_background-image: none;
用于支持ie6.0的png图片透明
z-index：div的层叠顺序，值越大，越在底层。

<style type="text/css"> body {font:normal 12px "宋体",Verdana, Arial, Helvetica, sans-serif; margin:0px;} ul {margin:0; padding:0;} li {list-style-type:none;} a {color:#333; text-decoration:none;} a:hover {color:#900; text-decoration:none;} .text {width:300px; } .text ul{width:240px; } .text li {display:inline-block; *display:inline; zoom:1; position:relative; } .text li a {display:block; *display:inline; zoom:1; height:26px; line-height:26px; overflow:hidden;} .text li span {position:absolute; top:0; right:-60px; padding-left:10px; line-height:26px; color:#999; } </style> <div class="text"><ul> <li><a href="#">从邓加接过巴西队教鞭开始</a><span>2009-4-13</span></li> <li><a href="#">从邓加接过巴西队教鞭开始，从邓加接过巴西队教鞭开始，从邓加接过巴西队教鞭开始 </a><span>2009-4-13</span></li> <li><a href="#">从邓加接过巴西队教鞭开始从邓加接过巴西队教鞭开始</a><span>2009-4-13</span></li> <li><a href="#">从邓加接过巴西队教鞭开始</a><span>2009-4-13</span></li> <li><a href="#">从邓加接过巴西队教鞭开始</a><span>2009-4-13</span></li> <li><a href="#">从邓加接过巴西队教鞭开始</a><span>2009-4-13</span></li> <li><a href="#">从邓加接过巴西队教鞭开始</a><span>2009-4-13</span></li> <li><a href="#">从邓加接过巴西队教鞭开始从邓加接过巴西队教鞭开始</a><span>2009-4-13</span></li> <li><a href="#">从邓加接过巴西队教鞭开始</a><span>2009-4-13</span></li> <li><a href="#">从邓加接过巴西队教鞭开始</a><span>2009-4-13</span></li> </ul></div>

  

<style> body {font-size:12px;} .nav {margin:0 auto; text-align:center; font-weight:bold; border-bottom:3px solid #579cc6;} .nav a {display:inline-block; margin:0 3px; height:25px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg)  left bottom  no-repeat; padding-left:15px; color:#666; text-decoration:none; cursor:pointer;} .nav a span {display:inline-block; height:25px; line-height:25px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right bottom no-repeat; padding-right:15px;} .nav a:hover {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left top no-repeat; color:#FFF;} .nav a:hover span {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right top no-repeat;} .nav a.set {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left top no-repeat; color:#FFF; } .nav a.set span {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right top no-repeat;} </style> <div class="nav"> <a class="set" href="#"><span>首页</span></a> <a href="#"><span>分类一</span></a> <a href="#"><span>分类分类</span></a> <a href="#"><span>还可以再长一点</span></a> <a href="#"><span>欢迎</span></a> <a href="#"><span>我的博客</span></a> </div>
以前都是直接2张背景图，a{}，a:hover{}但都要设定width，这样就可以不设width。根据li中文字自动撑宽（当然最终宽度还是要取决于background-image的宽度）。
简单理解就是a{}为左边色块，a:hover{}为鼠标hover事件的色块。
span{}为右边色块
set{}为默认。
这里采取一张background-image，用background-position:{}选取~