<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>baalchina &#187; css</title>
	<atom:link href="http://www.baalchina.net/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.baalchina.net</link>
	<description>baalchina技术日志</description>
	<lastBuildDate>Mon, 19 Jul 2010 08:30:49 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>DIV+CSS高度自适应</title>
		<link>http://www.baalchina.net/2010/07/css-height/</link>
		<comments>http://www.baalchina.net/2010/07/css-height/#comments</comments>
		<pubDate>Wed, 07 Jul 2010 06:12:01 +0000</pubDate>
		<dc:creator>baalchina</dc:creator>
				<category><![CDATA[网页制作]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[div]]></category>

		<guid isPermaLink="false">http://www.baalchina.net/2010/07/css-height/</guid>
		<description><![CDATA[ 
一共4个DIV。
最外面的容器main，css属性如下：
#main{overflow:hidden;}
&#160;

然后left个rigth添加属性如下：
#left,#right{padding-bottom:5000px;margin-bottom:-5000px;}&#160;&#160; 

搞定。
IE8和FF3测试通过。
]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.baalchina.net/wp-content/uploads/2010/07/css.jpg"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="css" border="0" alt="css" src="http://www.baalchina.net/wp-content/uploads/2010/07/css_thumb.jpg" width="364" height="484" /></a> </p>
<p>一共4个DIV。</p>
<p>最外面的容器main，css属性如下：</p>
<blockquote><p>#main{overflow:hidden;}</p>
<p>&#160;</p>
</blockquote>
<p>然后left个rigth添加属性如下：</p>
<blockquote><p>#left,#right{padding-bottom:5000px;margin-bottom:-5000px;}&#160;&#160; </p>
</blockquote>
<p>搞定。</p>
<p>IE8和FF3测试通过。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.baalchina.net/2010/07/css-height/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>一个js+css+div的幻灯特效</title>
		<link>http://www.baalchina.net/2009/05/javascript-slideshow/</link>
		<comments>http://www.baalchina.net/2009/05/javascript-slideshow/#comments</comments>
		<pubDate>Sun, 24 May 2009 06:52:02 +0000</pubDate>
		<dc:creator>baalchina</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[div]]></category>
		<category><![CDATA[js]]></category>

		<guid isPermaLink="false">http://www.baalchina.net/2009/05/javascript-slideshow/</guid>
		<description><![CDATA[其实个人不是很喜欢js，主要是不熟悉，而且花里胡哨的兼容性问题也不少。不过既然需要，那就搞一个吧。声明：也是抄的，非原创！

?View Code JAVASCRIPT1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//幻灯片代码for jwzx
function $&#40;s&#41;&#123;
    return document.getElementById&#40;s&#41;;
&#125;
var B=BigNews=&#123;
    current:0,
    next:0,
    scrollInterval:0,
    autoScroller:0
&#125;;
BigNews.turn=function&#40;index&#41;&#123;
    clearInterval&#40;BigNews.autoScroller&#41;;
    BigNews.scroll&#40;index&#41;;
&#125;
BigNews.scroll=function&#40;index&#41;&#123;
    var count=0;
    var step=260;
    var duration=16;
    var b=BigNews;
 [...]]]></description>
			<content:encoded><![CDATA[<p>其实个人不是很喜欢js，主要是不熟悉，而且花里胡哨的兼容性问题也不少。不过既然需要，那就搞一个吧。声明：也是抄的，非原创！</p>

<div class="wp_codebox_msgheader wp_codebox_hide"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p282code3'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p2823"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
</pre></td><td class="code" id="p282code3"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//幻灯片代码for jwzx</span>
<span style="color: #003366; font-weight: bold;">function</span> $<span style="color: #009900;">&#40;</span>s<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>s<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> B<span style="color: #339933;">=</span>BigNews<span style="color: #339933;">=</span><span style="color: #009900;">&#123;</span>
    current<span style="color: #339933;">:</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
    next<span style="color: #339933;">:</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
    scrollInterval<span style="color: #339933;">:</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
    autoScroller<span style="color: #339933;">:</span><span style="color: #CC0000;">0</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
BigNews.<span style="color: #660066;">turn</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    clearInterval<span style="color: #009900;">&#40;</span>BigNews.<span style="color: #660066;">autoScroller</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    BigNews.<span style="color: #000066;">scroll</span><span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
BigNews.<span style="color: #000066;">scroll</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> count<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> step<span style="color: #339933;">=</span><span style="color: #CC0000;">260</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> duration<span style="color: #339933;">=</span><span style="color: #CC0000;">16</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> b<span style="color: #339933;">=</span>BigNews<span style="color: #339933;">;</span>
    b.<span style="color: #660066;">next</span><span style="color: #339933;">=</span>index<span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>index<span style="color: #339933;">!=</span>b.<span style="color: #660066;">current</span><span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span>count<span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span>duration<span style="color: #339933;">/</span><span style="color: #CC0000;">8</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    clearInterval<span style="color: #009900;">&#40;</span>b.<span style="color: #660066;">scrollInterval</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> items<span style="color: #339933;">=</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'iiiyx_hd_item'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span><span style="color: #CC0000;">5</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        items<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">className</span><span style="color: #339933;">=</span><span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    items<span style="color: #009900;">&#91;</span>index<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">className</span><span style="color: #339933;">=</span><span style="color: #3366CC;">'up'</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> span<span style="color: #339933;">=</span>index<span style="color: #339933;">-</span>b.<span style="color: #660066;">current</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> begin_value<span style="color: #339933;">=</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'iiiyx_hd_img'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">scrollTop</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> chang_in_value<span style="color: #339933;">=</span>span<span style="color: #339933;">*</span>step<span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>b.<span style="color: #660066;">current</span><span style="color: #339933;">*</span>step<span style="color: #339933;">-</span>begin_value<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    b.<span style="color: #660066;">scrollInterval</span><span style="color: #339933;">=</span>setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>doit<span style="color: #009900;">&#40;</span>begin_value<span style="color: #339933;">,</span>chang_in_value<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">function</span> doit<span style="color: #009900;">&#40;</span>b<span style="color: #339933;">,</span>c<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'iiiyx_hd_img'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">scrollTop</span><span style="color: #339933;">=</span>cpu<span style="color: #009900;">&#40;</span>count<span style="color: #339933;">,</span>b<span style="color: #339933;">,</span>c<span style="color: #339933;">,</span>duration<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        count<span style="color: #339933;">++;</span>
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>count<span style="color: #339933;">==</span>duration<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
            clearInterval<span style="color: #009900;">&#40;</span>BigNews.<span style="color: #660066;">scrollInterval</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            scrollInterval<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
            count<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
            $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'iiiyx_hd_img'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">scrollTop</span><span style="color: #339933;">=</span>b<span style="color: #339933;">+</span>c<span style="color: #339933;">;</span>
            BigNews.<span style="color: #660066;">current</span><span style="color: #339933;">=</span>index<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #003366; font-weight: bold;">function</span> cpu<span style="color: #009900;">&#40;</span>t<span style="color: #339933;">,</span>b<span style="color: #339933;">,</span>c<span style="color: #339933;">,</span>d<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> c<span style="color: #339933;">*</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>t<span style="color: #339933;">=</span>t<span style="color: #339933;">/</span>d<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>t<span style="color: #339933;">*</span>t<span style="color: #339933;">+</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span>b<span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
BigNews.<span style="color: #660066;">auto</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    clearInterval<span style="color: #009900;">&#40;</span>BigNews.<span style="color: #660066;">scrollInterval</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    BigNews.<span style="color: #660066;">autoScroller</span><span style="color: #339933;">=</span>setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        BigNews.<span style="color: #000066;">scroll</span><span style="color: #009900;">&#40;</span>BigNews.<span style="color: #660066;">current</span><span style="color: #339933;">==</span><span style="color: #CC0000;">4</span><span style="color: #339933;">?</span><span style="color: #CC0000;">0</span><span style="color: #339933;">:</span>BigNews.<span style="color: #660066;">current</span><span style="color: #339933;">+</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
window.<span style="color: #660066;">attachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'onload'</span><span style="color: #339933;">,</span>BigNews.<span style="color: #660066;">auto</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>&#160;</p>
<p>&#160;</p>
<p>下面是div代码</p>

<div class="wp_codebox_msgheader wp_codebox_hide"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p282code4'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p2824"><td class="code" id="p282code4"><pre class="html" style="font-family:monospace;">&lt;div class=&quot;iiiyx_hd_go&quot;&gt;
  &lt;div id=&quot;iiiyx_hd_img&quot;&gt; 
  	&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://images.nau.edu.cn/jwzx/images/slide/logo_dev.jpg&quot; /&gt;&lt;/a&gt; 
	&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://images.nau.edu.cn/jwzx/images/slide/logo_net.jpg&quot; /&gt;&lt;/a&gt; 
	&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://images.nau.edu.cn/jwzx/images/slide/logo_cai.jpg&quot; /&gt;&lt;/a&gt; 
	&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://images.nau.edu.cn/jwzx/images/slide/logo_camera.jpg&quot; /&gt;&lt;/a&gt; 
	&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://images.nau.edu.cn/jwzx/images/slide/logo_classroom.jpg&quot; /&gt;&lt;/a&gt; 
	&lt;/div&gt;
  &lt;div id=&quot;slidedescrip&quot;&gt;部门职责&lt;/div&gt;
  &lt;ul id=&quot;iiiyx_hd_item&quot;&gt;
&nbsp;
    &lt;li class=&quot;up&quot; onmouseover=&quot;B.turn(0)&quot; onmouseout=&quot;B.auto()&quot;&gt;&lt;img src=&quot;http://images.nau.edu.cn/jwzx/images//icons/icon_dev.gif&quot; width=&quot;50&quot; height=&quot;36&quot; /&gt;
        &lt;dl&gt;
          &lt;dt&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;教学仪器设备&lt;/a&gt;
          &lt;dd&gt;设备采购与维修
        &lt;/dd&gt;&lt;/dl&gt;
&nbsp;
    &lt;li onmouseover=&quot;B.turn(1)&quot; onmouseout=&quot;B.auto()&quot;&gt;&lt;img src=&quot;http://images.nau.edu.cn/jwzx/images//icons/icon_net.gif&quot; width=&quot;50&quot; height=&quot;36&quot; /&gt;
        &lt;dl&gt;
&nbsp;
          &lt;dt&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;网络服务与建设&lt;/a&gt;
          &lt;dd&gt;空间、电子邮箱、网络帐号
        &lt;/dd&gt;&lt;/dl&gt;
&nbsp;
    &lt;li onmouseover=&quot;B.turn(2)&quot; onmouseout=&quot;B.auto()&quot;&gt;&lt;img src=&quot;http://images.nau.edu.cn/jwzx/images//icons/icon_cia.gif&quot; width=&quot;50&quot; height=&quot;36&quot; /&gt;
        &lt;dl&gt;
          &lt;dt&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;网络教学&lt;/a&gt;
&nbsp;
          &lt;dd&gt;电子课件，CIA
        &lt;/dd&gt;&lt;/dl&gt;
&nbsp;
    &lt;li onmouseover=&quot;B.turn(3)&quot; onmouseout=&quot;B.auto()&quot;&gt;&lt;img src=&quot;http://images.nau.edu.cn/jwzx/images//icons/icon_cam.gif&quot; width=&quot;50&quot; height=&quot;36&quot; /&gt;
        &lt;dl&gt;
          &lt;dt&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;视频新闻制作&lt;/a&gt;
          &lt;dd&gt;视频新闻的摄录与制作
&nbsp;
        &lt;/dd&gt;&lt;/dl&gt;
&nbsp;
    &lt;li onmouseover=&quot;B.turn(4)&quot; onmouseout=&quot;B.auto()&quot;&gt;&lt;img src=&quot;http://images.nau.edu.cn/jwzx/images//icons/icon_classroom.gif&quot; width=&quot;50&quot; height=&quot;36&quot; /&gt;
        &lt;dl&gt;
          &lt;dt&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;教室电脑维护&lt;/a&gt;
          &lt;dd&gt;教室教学电脑的维护管理
        &lt;/dd&gt;&lt;/dl&gt;
&nbsp;
&nbsp;
  &lt;/li&gt;&lt;/ul&gt;
&lt;/div&gt;</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.baalchina.net/2009/05/javascript-slideshow/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
