<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="css/rss.xslt"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>Sipo Blog - CSS/设计</title><link>http://www.dc9.cn/</link><description>淡泊明志 - </description><generator>RainbowSoft Studio Z-Blog 1.8 Walle Build 100427</generator><language>zh-CN</language><copyright>Copyright Sipo.</copyright><pubDate>Wed, 08 Sep 2010 07:20:17 +0800</pubDate><item><title>不如换一种思路做边框布局</title><author>a@b.c (sipo)</author><link>http://www.dc9.cn/post/594.html</link><pubDate>Thu, 26 Aug 2010 09:44:45 +0800</pubDate><guid>http://www.dc9.cn/post/594.html</guid><description><![CDATA[<table cellspacing="1" cellpadding="1" border="1" style="width: 383px; height: 249px;">    <tbody>        <tr>            <td bgcolor="#ff0000" colspan="3">&nbsp;</td>        </tr>        <tr>            <td bgcolor="#6666ff">            <p>&nbsp;</p>            <p>&nbsp;</p>            </td>            <td rowspan="3" style="text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 内容</td>            <td bgcolor="#6666ff">&nbsp;</td>        </tr>        <tr>            <td bgcolor="#99ff00">            <p>&nbsp;</p>            <p>&nbsp;</p>            <p>&nbsp;</p>            </td>            <td bgcolor="#99ff00">&nbsp;</td>        </tr>        <tr>            <td bgcolor="#6666ff">            <p>&nbsp;</p>            <p>&nbsp;</p>            </td>            <td bgcolor="#6666ff">&nbsp;</td>        </tr>        <tr>            <td bgcolor="#ff0000" colspan="3">&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;绿色是无限拉伸的部分。</p><p>当边框这样的时候，通常我们为了向能够节省材料会把它按照现在可视的部分切割为红紫绿8大部分。然后分别置于div中，这样的问题是，绿色部分如果要随着内容自动变长撑开表格必须要复杂的js支持，如果不用js就必须给一个高度，这个高度必须每一个页面都要生成，实在太扯淡了。我实现之后，觉得很不满意。后来我还想用table实现这个，但是ff下面的td不支持position：relative属性，因此没法td里面做div的绝对定位，于是也放弃了table布局。</p><p>就是认为把需求弄复杂了。有点2.//www.dc9.cn</p><p>于是干脆把红色和紫色白色做成2个图，两个绿色和中间白色做成1个图纵向平铺。这样上中下3个图是最普遍的思想了，但是很费材料，但是相比较而言，最原始的思想才是最他妈简单的。中间的内容怎办呢？</p><p>中间的内容一个wrapper+inner，里面的inner左右margin小些，上下margin为负数。最后-----》搞定。</p><p>虽然材料看上去多了点白色。但是，正如上一篇所说的，白色的压缩量可以忽略不计。图片亦然。</p>]]></description><category>CSS/设计</category><comments>http://www.dc9.cn/post/594.html#comment</comments><wfw:comment>http://www.dc9.cn/</wfw:comment><wfw:commentRss>http://www.dc9.cn/feed.asp?cmt=594</wfw:commentRss><trackback:ping>http://www.dc9.cn/cmd.asp?act=tb&amp;id=594&amp;key=d2374402</trackback:ping></item><item><title>firefox下background-image的垂直平铺repeat-y不设置height的解决办法</title><author>a@b.c (sipo)</author><link>http://www.dc9.cn/post/513.html</link><pubDate>Mon, 30 Jun 2008 21:33:36 +0800</pubDate><guid>http://www.dc9.cn/post/513.html</guid><description><![CDATA[ff下面<br/><p class="code"><code>background-image:url("main_bg.gif");<br/>&nbsp;&nbsp;&nbsp;&nbsp;background-repeat:&nbsp;repeat-y;</code></p>必须指定height才能显示<br/>但是，大多数情况下都是动态高度于是<br/>设置下面的即可<br/><p class="code"><code>overflow:auto;</code></p>]]></description><category>CSS/设计</category><comments>http://www.dc9.cn/post/513.html#comment</comments><wfw:comment>http://www.dc9.cn/</wfw:comment><wfw:commentRss>http://www.dc9.cn/feed.asp?cmt=513</wfw:commentRss><trackback:ping>http://www.dc9.cn/cmd.asp?act=tb&amp;id=513&amp;key=e220670b</trackback:ping></item><item><title>CSS 首字母大写</title><author>a@b.c (sipo)</author><link>http://www.dc9.cn/post/509.html</link><pubDate>Wed, 28 May 2008 23:58:53 +0800</pubDate><guid>http://www.dc9.cn/post/509.html</guid><description><![CDATA[<p class="code"><code>.post-body&nbsp;p:first-letter&nbsp;{color:#444;display:inline;float:left;font:3.1em&nbsp;Georgia,arial;text-transform:uppercase;margin:0&nbsp;0.12em&nbsp;0&nbsp;0;}<br/></code></p>有两个注意的!<br/>p:first-letter <br/>表示p标记下面第一个字母执行<br/>text-transform:uppercase;<br/>]]></description><category>CSS/设计</category><comments>http://www.dc9.cn/post/509.html#comment</comments><wfw:comment>http://www.dc9.cn/</wfw:comment><wfw:commentRss>http://www.dc9.cn/feed.asp?cmt=509</wfw:commentRss><trackback:ping>http://www.dc9.cn/cmd.asp?act=tb&amp;id=509&amp;key=3bd8cb63</trackback:ping></item><item><title>一般来说word-wrap和word-break用哪个？</title><author>a@b.c (sipo)</author><link>http://www.dc9.cn/post/427.html</link><pubDate>Sat, 28 Jul 2007 14:52:07 +0800</pubDate><guid>http://www.dc9.cn/post/427.html</guid><description><![CDATA[写一篇超级短小的教程。<br/>嗯。<br/>一般来说，用我们不用word-break:break-all;<br/>这个不好，他把英文单词不管三七二十一给弄断了，影响阅读。<br/>一般来说在BLOG等系统中，我们要用word-wrap:break-word来代替word-break<br/>有什么好处呢？<br/>word-wrap:break-word不仅可以把超级长的英文单词截断，还可以根据空格区分英文单词，保持它的可读性。<br/>嗯，教程结束。<br/><br/>另外上述两个属性FF下不起作用。要用JS实现。<br/>——<br/>CSS３赶快出b...]]></description><category>CSS/设计</category><comments>http://www.dc9.cn/post/427.html#comment</comments><wfw:comment>http://www.dc9.cn/</wfw:comment><wfw:commentRss>http://www.dc9.cn/feed.asp?cmt=427</wfw:commentRss><trackback:ping>http://www.dc9.cn/cmd.asp?act=tb&amp;id=427&amp;key=bcf6b6cc</trackback:ping></item></channel></rss>
