<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title><![CDATA[剧情的落幕]]></title> 
<link>http://www.kinglau.cn/index.php</link> 
<description><![CDATA[那些你们喜欢和不喜欢我都喜欢的]]></description> 
<language>zh-cn</language> 
<copyright><![CDATA[剧情的落幕]]></copyright>
<item>
<link>http://www.kinglau.cn/read.php?12</link>
<title><![CDATA[不设置图片背景，在图片上写字]]></title> 
<author>liujincn &lt;admin@yourname.com&gt;</author>
<category><![CDATA[xhtml+css]]></category>
<pubDate>Fri, 16 Jul 2010 07:43:13 +0000</pubDate> 
<guid>http://www.kinglau.cn/read.php?12</guid> 
<description>
<![CDATA[ 
	<textarea name="code" class="css" rows="15" cols="100">
<style type="text/css">
body&#123; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0px;&#125;
ul&#123; margin:0px; padding:0px; list-style:none&#125;
img&#123; vertical-align:middle&#125;
#box&#123; width:950px; margin:0 auto;position:relative; &#125;
.text&#123; position:absolute;&nbsp;&nbsp;left:430px; top:130px; line-height:150%;&#125;
.btn&#123;position:absolute;&nbsp;&nbsp;left:680px; top:140px; &#125;
</style>
<style type="text/css">
body&#123; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0px;&#125;
ul&#123; margin:0px; padding:0px; list-style:none&#125;
img&#123; vertical-align:middle&#125;
#box&#123; width:950px; margin:0 auto;position:relative; &#125;
.text&#123; position:absolute;&nbsp;&nbsp;left:430px; top:130px; line-height:150%;&#125;
.btn&#123;position:absolute;&nbsp;&nbsp;left:680px; top:140px; &#125;
</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>
</textarea><br/><br/>不设置图片背景，在图片上写字<br/><br/>利用position:定位发式来做。
]]>
</description>
</item><item>
<link>http://www.kinglau.cn/read.php?11</link>
<title><![CDATA[图片垂直居中]]></title> 
<author>liujincn &lt;admin@yourname.com&gt;</author>
<category><![CDATA[xhtml+css]]></category>
<pubDate>Tue, 06 Jul 2010 08:08:05 +0000</pubDate> 
<guid>http://www.kinglau.cn/read.php?11</guid> 
<description>
<![CDATA[ 
	<textarea name="code" class="css" rows="15" cols="100">
<style type="text/css">
body&#123; margin:0px; font-size:12px; font-family:Arial, Helvetica, sans-serif&#125;
ul&#123; margin:0px; padding:0px; list-style:none&#125;
.pic2 &#123; margin:auto;width:600px;height:200px;border:#000 1px solid;&#125;
.pic2 li&#123; height:40px; line-height:40px; border-bottom:#CCCCCC 1px dashed&#125;
.pic2 img&#123; vertical-align:middle&#125;
 </style>

<!--[if IE 6]>
<style type="text/css">
.pic2 li span &#123;height: 100%; writing-mode: tb-rl;vertical-align: middle;&#125;
</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>&nbsp;&nbsp;

</textarea><br/>语法：writing-mode : lr-tb、tb-rl<br/>参数：lr-tb：从左向右，从上往下 　tb-rl：从上往下，从右向左<br/>&nbsp;&nbsp; <br/>&nbsp;&nbsp;<br/> <br/>
]]>
</description>
</item><item>
<link>http://www.kinglau.cn/read.php?10</link>
<title><![CDATA[ie6.0下，透明背景图片以及margin:负值显示不全的方法。]]></title> 
<author>liujincn &lt;admin@yourname.com&gt;</author>
<category><![CDATA[xhtml+css]]></category>
<pubDate>Fri, 02 Jul 2010 10:24:19 +0000</pubDate> 
<guid>http://www.kinglau.cn/read.php?10</guid> 
<description>
<![CDATA[ 
	<textarea name="code" class="css" rows="15" cols="100">#pic1&#123;background:url(images/pic1.jpg);width:100px; height:100px;z-index:1000;position:relative; &#125;
#pic2&#123;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;&#125;
<div id="pic1"></div>
<div id="pic2"></div>
</textarea><br/>_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pic2.png');<br/>_background-image: none;<br/>用于支持ie6.0的png图片透明<br/>z-index：div的层叠顺序，值越大，越在底层。
]]>
</description>
</item><item>
<link>http://www.kinglau.cn/read.php?9</link>
<title><![CDATA[li长度不够，隐藏内容，显示时间]]></title> 
<author>liujincn &lt;admin@yourname.com&gt;</author>
<category><![CDATA[xhtml+css]]></category>
<pubDate>Fri, 02 Jul 2010 04:36:12 +0000</pubDate> 
<guid>http://www.kinglau.cn/read.php?9</guid> 
<description>
<![CDATA[ 
	<textarea name="code" class="css" rows="15" cols="100">
<style type="text/css">
body &#123;font:normal 12px "宋体",Verdana, Arial, Helvetica, sans-serif; margin:0px;&#125;
ul &#123;margin:0; padding:0;&#125;
li &#123;list-style-type:none;&#125;
a &#123;color:#333; text-decoration:none;&#125;
a:hover &#123;color:#900; text-decoration:none;&#125;
.text &#123;width:300px; &#125;
.text ul&#123;width:240px; &#125;
.text li &#123;display:inline-block; *display:inline; zoom:1; position:relative; &#125;
.text li a &#123;display:block; *display:inline; zoom:1; height:26px; line-height:26px; overflow:hidden;&#125;
.text li span &#123;position:absolute; top:0; right:-60px; padding-left:10px; line-height:26px; color:#999; &#125;
</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>
</textarea><br/><br/>&nbsp;&nbsp;<br/>
]]>
</description>
</item><item>
<link>http://www.kinglau.cn/read.php?8</link>
<title><![CDATA[自由宽度滑动门]]></title> 
<author>liujincn &lt;admin@yourname.com&gt;</author>
<category><![CDATA[xhtml+css]]></category>
<pubDate>Thu, 01 Jul 2010 12:12:01 +0000</pubDate> 
<guid>http://www.kinglau.cn/read.php?8</guid> 
<description>
<![CDATA[ 
	<textarea name="code" class="css" rows="15" cols="100"><style> 
body &#123;font-size:12px;&#125; 
.nav &#123;margin:0 auto; text-align:center; font-weight:bold; border-bottom:3px solid #579cc6;&#125; 
.nav a &#123;display:inline-block; margin:0 3px; height:25px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg)&nbsp;&nbsp;left bottom&nbsp;&nbsp;no-repeat; padding-left:15px; color:#666; text-decoration:none; cursor:pointer;&#125; 
.nav a span &#123;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;&#125; 
.nav a:hover &#123;background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left top no-repeat; color:#FFF;&#125; 
.nav a:hover span &#123;background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right top no-repeat;&#125; 
.nav a.set &#123;background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left top no-repeat; color:#FFF; &#125; 
.nav a.set span &#123;background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right top no-repeat;&#125; 
</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> 
</textarea><br/>以前都是直接2张背景图，a&#123;&#125;，a:hover&#123;&#125;但都要设定width，这样就可以不设width。根据li中文字自动撑宽（当然最终宽度还是要取决于background-image的宽度）。 <br/>简单理解就是a&#123;&#125;为左边色块，a:hover&#123;&#125;为鼠标hover事件的色块。 <br/>span&#123;&#125;为右边色块 <br/>set&#123;&#125;为默认。 <br/>这里采取一张background-image，用background-position:&#123;&#125;选取~ 
]]>
</description>
</item>
</channel>
</rss>