<?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>猫窝私语 — Makumo's Blog &#187; CSS</title>
	<atom:link href="http://www.makumo.com/tag/css/feed" rel="self" type="application/rss+xml" />
	<link>http://www.makumo.com</link>
	<description></description>
	<lastBuildDate>Wed, 24 Mar 2010 08:48:48 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>读书笔记（一）——可以遗忘的HTML标签</title>
		<link>http://www.makumo.com/html_to_forget.cat</link>
		<comments>http://www.makumo.com/html_to_forget.cat#comments</comments>
		<pubDate>Sun, 30 Nov 2008 13:51:58 +0000</pubDate>
		<dc:creator>玛酷猫</dc:creator>
				<category><![CDATA[读书笔记]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Tags]]></category>

		<guid isPermaLink="false">http://www.makumo.com/?p=187</guid>
		<description><![CDATA[长久以来项目网站首页结构一直没有改变，依旧是TABLE结构，随着越做越大，栏目内容越来越多，网站首页也越来越臃肿，访问打开时间也越来越长。趁着年末改版，首页DIV+CSS化也提上日程，虽然这部分工作主要是设计部门处理，不过也借着这个机会好好学一学页面重构方面的知识。最近借阅了本《CSS实战手册（CSS THE MISSING MANUAL）》，还在慢慢阅读中。俗话说：好记性不如烂笔头。把一些好东东记录下来，方便日后查找。这次主要提下一些可以遗忘的HTML标签和一些技巧。  
可以遗忘的标签：
&#60;font&#62;标签：这个在自己设计页面是也经常用到，有时候为了某几个字的表现效果，懒得去设置一个新的样式，直接使用&#60;font&#62;标签了，常常一个页面有着许多font，代码看起来有些凌乱，修改起来也不是很方便。
&#60;b&#62;、&#60;i&#62;粗体和斜体标签，这个自己倒是不用，基本在用&#60;strong&#62;，用Dreamweaver设计直接Ctrl+B就OK，斜体自己似乎从做网页也来就没有用过，总感觉字变斜了看起来怪怪的。 :bhan: 做图片的时候到偶尔会用用。
用于网页布局的&#60;table&#62;标签。这个就是自己期望达到的目标：除了显示数据表、图表之外，少或者不用&#60;table&#62;来显示网页结构，这个还需要慢慢来，毕竟是改变一种设计习惯，还需要一定过程
一些展现表现形式的标签属性，类如：color，backgroud，border，一系列调整边距属性，对齐属性等等。如果用过Dreamweaver CS4会发现在元素的设置里面没有了 backgroud 这个填写框了，（家里没装CS4，明天去单位补个图），这些效果的代码代码都很长，使代码变得臃肿的主要原因之一，而且可读性也大幅度下降，其实这些都可以用CSS来定义表现。
不要滥用&#60;br /&#62;标签。这块就不是很明白，按书上所写“浏览器自动地——有时令人愤怒地——在段落之间插入空格”，我倒是还没遇到过，先记下来了，或许书中后面、以后工作中会慢慢搞清楚。
一些技巧：

1
2
3
4
5
使用＜h1＞等系列标签来表示标题，使页面层次更分明，更主要的是有助于搜索引擎的收录；
使用无序列表＜ul&#38;gt;来显示菜单、一些相关项目；使用有序列表＜ol＞来显示排名、有顺序的项目；使用＜dl＞＜dt＞＜dd＞来显示术语表；
使用一些生僻的标签来展示一些特殊的信息，如＜cite＞＜address＞等等；
注意标签闭合；
使用W3C校验器来校验，能发现一些不容易看出的拼写、不规范等等错误；

暂时先写到这吧，书才刚开始看。以后再慢慢写了  
PS：读书学习中，难免有一些认识不足或者错误理解，欢迎斧正。
PS2：发现用高亮代码显示来当做&#60;ol&#62;用也挺不错  
]]></description>
			<content:encoded><![CDATA[<p>长久以来项目网站首页结构一直没有改变，依旧是TABLE结构，随着越做越大，栏目内容越来越多，网站首页也越来越臃肿，访问打开时间也越来越长。趁着年末改版，首页DIV+CSS化也提上日程，虽然这部分工作主要是设计部门处理，不过也借着这个机会好好学一学页面重构方面的知识。最近借阅了本《<a title="进入该书的官方网站" href="http://www.sawmac.com/">CSS实战手册（CSS THE MISSING MANUAL）</a>》，还在慢慢阅读中。俗话说：好记性不如烂笔头。把一些好东东记录下来，方便日后查找。这次主要提下一些可以遗忘的HTML标签和一些技巧。 <img src='http://www.makumo.com/wp-includes/images/smilies/icon_wink.gif' alt=':wink:' class='wp-smiley' /> </p>
<p><strong>可以遗忘的标签：</strong></p>
<p><strong>&lt;font&gt;</strong>标签：这个在自己设计页面是也经常用到，有时候为了某几个字的表现效果，懒得去设置一个新的样式，直接使用&lt;font&gt;标签了，常常一个页面有着许多font，代码看起来有些凌乱，修改起来也不是很方便。</p>
<p><strong>&lt;b&gt;、&lt;i&gt;</strong>粗体和斜体标签，这个自己倒是不用，基本在用&lt;strong&gt;，用Dreamweaver设计直接Ctrl+B就OK，斜体自己似乎从做网页也来就没有用过，总感觉字变斜了看起来怪怪的。 :bhan: 做图片的时候到偶尔会用用。</p>
<p><strong>用于网页布局的&lt;table&gt;标签</strong>。这个就是自己期望达到的目标：除了显示数据表、图表之外，少或者不用&lt;table&gt;来显示网页结构，这个还需要慢慢来，毕竟是改变一种设计习惯，还需要一定过程</p>
<p>一些展现表现形式的标签属性，类如：color，backgroud，border，一系列调整边距属性，对齐属性等等。如果用过Dreamweaver CS4会发现在元素的设置里面没有了 backgroud 这个填写框了，（家里没装CS4，明天去单位补个图），这些效果的代码代码都很长，使代码变得臃肿的主要原因之一，而且可读性也大幅度下降，其实这些都可以用CSS来定义表现。</p>
<p>不要滥用&lt;br /&gt;标签。这块就不是很明白，按书上所写“浏览器自动地——有时令人愤怒地——在段落之间插入空格”，我倒是还没遇到过，先记下来了，或许书中后面、以后工作中会慢慢搞清楚。</p>
<p><strong>一些技巧：</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="txt" style="font-family:monospace;">使用＜h1＞等系列标签来表示标题，使页面层次更分明，更主要的是有助于搜索引擎的收录；
使用无序列表＜ul&amp;gt;来显示菜单、一些相关项目；使用有序列表＜ol＞来显示排名、有顺序的项目；使用＜dl＞＜dt＞＜dd＞来显示术语表；
使用一些生僻的标签来展示一些特殊的信息，如＜cite＞＜address＞等等；
注意标签闭合；
使用W3C校验器来校验，能发现一些不容易看出的拼写、不规范等等错误；</pre></td></tr></table></div>

<p>暂时先写到这吧，书才刚开始看。以后再慢慢写了 <img src='http://www.makumo.com/wp-includes/images/smilies/icon_mrgreen.gif' alt=':mrgreen:' class='wp-smiley' /> </p>
<p>PS：读书学习中，难免有一些认识不足或者错误理解，欢迎斧正。</p>
<p>PS2：发现用高亮代码显示来当做&lt;ol&gt;用也挺不错 <img src='http://www.makumo.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':grin:' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.makumo.com/html_to_forget.cat/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>让DIV里面的文字垂直居中</title>
		<link>http://www.makumo.com/div_middle.cat</link>
		<comments>http://www.makumo.com/div_middle.cat#comments</comments>
		<pubDate>Thu, 21 Jun 2007 00:49:33 +0000</pubDate>
		<dc:creator>玛酷猫</dc:creator>
				<category><![CDATA[页面设计]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[DIV]]></category>

		<guid isPermaLink="false">http://nest.makumo.com/2007/06/div_middle.html</guid>
		<description><![CDATA[之前在做DIV+CSS的页面中经常遇到这种问题，虽然可以用定高以及DIV的位置解决，但是遇到文字内容不固定就比较头痛。今天无意中看到篇文章说到这点，转录如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.con_div&#123; 
  width:440px; 
  height:300px; 
  border:1px solid #777; 
  text-align:center; 
  display:table-cell; 
  vertical-align:middle; 
  background:red; 
  color:#fff 
&#125; 
/*FOR IE*/ 
.fixie&#123; 
  width:0; 
  height:100%; 
  display:inline-block; 
  vertical-align:middle; 
&#125;


17
&#60;div class=&#34;con_div&#34;&#62;测试内容&#60;/div&#62;

 
看来还是要找些CSS的书来看下
]]></description>
			<content:encoded><![CDATA[<p>之前在做DIV+CSS的页面中经常遇到这种问题，虽然可以用定高以及DIV的位置解决，但是遇到文字内容不固定就比较头痛。今天无意中看到篇文章说到这点，转录如下：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.con_div</span><span style="color: #00AA00;">&#123;</span> 
  <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">440px</span><span style="color: #00AA00;">;</span> 
  <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">300px</span><span style="color: #00AA00;">;</span> 
  <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#777</span><span style="color: #00AA00;">;</span> 
  <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span> 
  <span style="color: #000000; font-weight: bold;">display</span><span style="color: #3333ff;">:table-</span>cell<span style="color: #00AA00;">;</span> 
  <span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">middle</span><span style="color: #00AA00;">;</span> 
  <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">red</span><span style="color: #00AA00;">;</span> 
  <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span> 
<span style="color: #00AA00;">&#125;</span> 
<span style="color: #808080; font-style: italic;">/*FOR IE*/</span> 
<span style="color: #6666ff;">.fixie</span><span style="color: #00AA00;">&#123;</span> 
  <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> 
  <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span> 
  <span style="color: #000000; font-weight: bold;">display</span><span style="color: #3333ff;">:inline-</span>block<span style="color: #00AA00;">;</span> 
  <span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">middle</span><span style="color: #00AA00;">;</span> 
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>17
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;div class=&quot;con_div&quot;&gt;测试内容&lt;/div&gt;</pre></td></tr></table></div>

<p> <br />
看来还是要找些CSS的书来看下</p>
]]></content:encoded>
			<wfw:commentRss>http://www.makumo.com/div_middle.cat/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
