先说 css
Ⅰ. em
1. em 参考当前字体大小, 比如当前字体为 12px, 那么 1em 就等于 12px. 默认状态下 1em = 16px, 为了简化换算, 可以在 css 中的 body 元素中声明 font-size = 62.5%, 这样 em 值变为16px * 62.5% = 10px.
2. em 值不固定, 且继承父级元素的大小.
3. 实例: 如果父级元素中声明字体大小为 1.2em, 其子元素就只能用 1em, 如果也使用 1.2em 实际大小就会变成 1.2em * 1.2em = 1.44em, 此 em 非彼 em.
Ⅱ. margin
margin 值不能继承.
margin 的正值可以理解为设置边距为特定大小, 负值可以理解为将接触盒子的边距减去特定大小.
如果两个盒子垂直叠放在一起, [...]
最近一直在学习 css, 于是就把首页当成试验场. 接着上回的CSS 疑问之一(已解决), 现在又碰到了两个问题.
Q1. 原先为了使首页的竖列式导航栏在鼠标滑过的时候产生变色按钮的效果
#content a:link, #content a:visited {
padding: 10px 100px;
color: #667;
text-decoration: none;
outline: none;
}
#content a:hover {
padding: 10px 100px;
[...]
把 blog 放入二级目录后，我重新放了一个首页。虽然是个人网站，但有个索引自己用起来也方便。不过在实际应用中我发现了几个很奇怪的问题。
如果我没有在 footer 里放置网站统计 js 代码的话，在 FF2，IE6 和 IE7 里 footer 都会与文字的上下端有一定的空间，但如果我插入了网站统计代码，在 IE6 下 footer 会变得很窄，但 FF2 和 IE6 却没任何问题，除非我设置了 height，不知道这是何故。
第二，如果想定义一个层左右居中的话可以使用 margin: 0 auto; ，但如果想让这个层垂直居中的话使用 margin: auto 0; 却不可以。不知道怎样才能使层垂直居中呢，我现在只能设置一个 padding 来控制层与顶部的距离。
另外，outline: none; 对 IE 没用。
第一个问题我 google 了一圈也没发现答案，后两个问题也是没找到一个较好的解决方案，如果哪位知道请指点一下。
update: fcicq 的 这篇文章 解释了第一个问题
update 2: charlee 的 利用CSS使Div水平垂直居中 是一个不错的方案
另附 margin 属性的相关知识: 由浅入深漫谈margin属性
至于 outline: none 在 [...]
第一种是theme自带的原版代码：
blockquote {
margin: 0 20px;
padding: 0 10px 0 25px;
border-left: 4px solid #c9ee58;
}
code {
font-family: monospace;
color: #666;
}
第二种是我现在用的：
blockquote {
border-bottom: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
display:block;
padding: 5px 5px;
margin: 1em 20px;
background-color: #fffff0;
color: #f2984c;
font-family:”Courier New”, Courier, mono;
-moz-border-radius: 15px;
}
blockquote:hover {
background-color:#F7FEDC;
}
code {
display: block;
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #f0f0f0 url(code图片地址) left top repeat-y;
border: 1px solid #ccc;
padding: 20px 5px 20px 20px;
max-height:none;
line-height: 1.2em;
margin: 5px 0 0 15px;
}
code:hover {
background-color:#F7FEDC;
}
前两天有个叫阿峰的Blogger fans问我怎样给首页的每篇日志底下增加“阅读全文”和“收藏到…（比如del.icio.us）”的功能。
很高兴有网友开始向我提问，我不敢藏私，只是因为前两天功课比较忙，所以一直没时间写教程，今天刚好没事特此公开代码。
首先公布怎样给日志底下添加“阅读全文”，也就是首页只显示日志摘要
首先插入
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>
样式表通常接近模板顶部，在 <style> 与 </style> 标记之间
然后在模板中 <$BlogItemBody$> 标记后的某个位置添加以下代码：
<MainOrArchivePage><br />
<a href=”<$BlogItemPermalinkURL$>”>阅读全文</a>
</MainOrArchivePage>
最后要使用此功能的每个帖子都需要以下代码：
<span class=”fullpost”></span>
比如——Vayn自留地是什么呢，请阅读全文<span class=”fullpost”>Vayn自留地就是Vayn的自留地-_-b;</span>——span标签中间的内容只会在单页中显示，不会显示在首页。
这个功能实际上是为了某些内容超常的日志不占用首页太多空间而添加的。
那么，如何给日志添加网摘呢？比添加阅读全文还简单。只要在<blogger>和</blogger>之间添加以下代码就可以了（最好放在阅读全文的旁边，或者</BlogItemTitle>下面或者其他的什么地方，只要在blogger标签之间就行）：
<img src=http://images.del.icio.us/static/img/delicious.small.gif ><a target=”_blank” href=”http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>” >del.icio.us</a>
<img src=http://turen007.googlepages.com/diglog.gif ><a target=”_blank” href=”http://diglog.com/submit?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>”>diglog</a>
<img src=http://turen007.googlepages.com/digg.gif ><a target=”_blank” href=”http://www.digg.com/submit?phase=2&url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>”>digg</a>
<a target=”_blank” href=”http://www.365key.com/storeit.aspx?t=<$BlogItemTitle$>&u=<$BlogItemPermalinkURL$>”><font color=”DarkOrchid”>365K<font color=”#57c200″>e</font>y</font></a>
欢迎大家向我提问，我会尽我所能回答的。
注意：以上代码仅适用于传统模板！
–EOF–
首先要感谢GFANS网友Boboo共享出这段代码.
如果你是Blogger的用户, 那么可以在模板代码的适当位置插入以下代码, 来实现在页面中显示最新的日志评论
<MainOrArchivePage> <!– 如果不希望只在INDEX页显示, 就去掉这行 –>
<h2 class=”sidebar-title”>最新留言</h2>
<dl id=”comments-block”>
<Blogger>
<BlogItemCommentsEnabled>
<BlogItemComments>
<dt class=”comment-data” id=”t<$BlogCommentNumber <dt class=”comment-data” id=”t<$BlogCommentNumber$>”>
amp;gt;”>
<span class=”comment-poster”>
<$BlogCommentAuthor$></span>说:
</dt>
<dd class=”comment-body” id=”d<$BlogCommentNumber$>”>
<$BlogCommentBody$>
</dd>
</BlogItemComments>
</BlogItemCommentsEnabled>
</Blogger>
</dl>
<script type=”text/javascript”>
sortComments(document.getElementById(’comments-block’), 5);
</script>
</MainOrArchivePage> <!– 如果不希望只在INDEX页显示, 就去掉这行 –>
<mainorarchivepage>标签的说明:
<mainorarchivepage>和</mainorarchivepage>之间的内容, 表示仅在索引页(也就是index首页)显示的内容, 加上这个标签的代码 ,不会在其他日志页面显示(如果你设置了每篇日志独立发布为一个页面的话, 当然, 也包括存档的日志页面).
来自『妖精の翼』- BLOG寄生體
想直接在blogger里贴html源代码似乎是不可能的，因为系统每次都会转换代码。其实只要把代码的换为＆lt;与 ＆gt; 即可（请自己把＆换为&）。
如果想要美观，还可以在模版中添加如下css代码（放在</head>）之前：
CODE
{ display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt; overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px; max-height:200px;
line-height: 1.2em;
}
然后把想要显示的代码放入<code>和</code> 之间，就可以显示出上面的效果了。
特别感谢良人的大秘寶提供代码
