导语：
修改发表于2011年11月20号 13点 阅读 10179 评论63 点赞11 ©著作权归作者所有
老小孩网推出网友自制“顶图信纸”后，大家很踊跃，已经有不少网友提供了自己制作的顶图信纸，网站也已经收录了部分供实际使用。
大家制作顶图信纸，基本上按习之的博客“老小孩博客的顶图信纸”里提供的数据和要求。由于习之的考虑不周，按该文格式发表的信纸，除了部分被网站收用外，其余只能欣赏，不能实际使用。尤其是在顶图和下面的文字区之间加了根细线，反而造成了部分网友的误会。因此习之将虎子、蓉荣、薇拉的部分信纸制作成可以实际使用的样式，就目前看，使用的效果还不错。
因此习之建议，今后再做“顶图信纸”可按下面这套代码制作。这样，网站可以从中选用，余下的还可以作为普通信纸拷贝使用。
代码如下：
这套代码的特点是尽量参照网站原来的网页布局，并采用DIV＋CSS格式，将顶图所需要的几个参数集中在一个DIV标签里声明。
这套代码中有几个需要替换的参数，现在是用中文标识的。顶图地址（url）、背景颜色（background-color）、文字颜色（color）三项，在上一篇博客里已经说明，这里不在赘述。只对：“标题离顶的距离”（padding-top）一项做些解释。
老小孩网的顶图信纸，其图案真正的作用是标题部分的背景，博客内容部分用的是单色背景。因此标题在背景上的位置需要控制，使文字与背景有一定的反差，使标题显得醒目、突出。
网站博客页面的标题区有两行，一行是博客标题，另一行是写作日期、阅读、分类、作者等的链接。两行总高80px。“标题离顶的距离”实际上就是合理安排这两行在顶图信纸上的位置。如果没有特殊原因，离顶的距离=顶图的高度-80px。如下图所示：（为分别，标题背景用了深色、博客文字背景用了浅色）：
上图是虎子老师做的一张顶图信纸。顶图尺寸940×200。虎子老师的顶图已经留出了“标题”的位置，因此“标题离顶距离”就是120px（200-80）。有部分网友制作的顶图，或尺寸大于200px，或在设计顶图的图案时，没有留出标题的位置，那么只能将“离顶距离”放大，即将标题下移。在用这套代码时请调整padding-top的数据，看看标题离顶的距离多少比较好。
原来要求顶图尺寸是：宽不小于940px；高不小于200px。现在部分网友制作顶图的高度大于200px，而且用了一些自然风景，渐变过渡区比较小，因此在实际使用中，选取适当的“标题离顶的距离”尤为重要。
注意点：顶图地址两边是圆括号，不是双引号 ；
背景颜色和文字颜色别漏了引导符号：# ；
离顶距离padding-top的单位 px 不能省。
至于顶图信纸的宽度，实际使用940px，建议做成960px。因为老小孩网页的“个性化设置”里的“标题背景图”，用的是960×200，都做成宽960可以使两者通用。注意：个性化设置里的“标题”指的是个人主页的标题，如“习之的博客”，它在代码里的层次比博客标题更高一级，因此宽度为960px。
老小孩网站目前对上传的图保存两张，一张是限宽800px的，一张是实际大小的。两图的地址在文件名里只差一个字符“t”，顶图要用没有“t”字符的地址。
限宽 800的地址是：《.../tblog_......jpg》；
实际大小的地址是：《.../blog_......jpg》。
2022年说明：
一：在这篇博客发表后不到半年，老小孩博客留给我们写博客的页面宽度已经扩大到960px。
二：网站对上传的图不再保存两张，地址里也不再出现字符“t”。已经上传的有“t”的地址，网页编辑器会直接无视t的存在。
三：这套代码是专用于老小孩博客（讲述）的，因此在这套代码里，没有设置博客的宽度。现在最大的博客宽度为960px。如果做的顶图没有那么宽也不要紧，代码会自动将顶图按比例扩展到宽960px。
让我们制作更多更美的顶图信纸，将老小孩的博客打扮得更加靓丽。
等11人点赞
2021-01-30 20:53:49
习之老师，老师的代码里怎么修改信纸宽度！
习之
《div id="blog_dt" style="width:(宽度)px; background-image: url(顶图地址);
说明因为回复里不能用英文的尖括号，因此用《 代
举报
习之
华龙老师：习之写这篇博客时，老小孩博客的宽度刚调整到920px，因此最初做的信纸的顶图都做成920px。后来博客宽度放到960px，直到如今。而老小孩又开辟了自己做信纸的专栏，习之就没有再来修改这篇博客。
下面是加宽度的代码。
这个代码里没有设定信纸宽度的代码。因此，显示的环境有多宽，就多宽。现在老小孩博客的宽度是960px，因此就显示960px。如果要加个限制宽度的代码，就在第一行里加：
原来：<div style="BACKGROUND-IMAGE: url.......
改成：<div style="width:960px; BACKGROUND-IMAGE: url.......
加的是 width:960px; 在style=" 的双引号后面，960px后面有个分号 ;。
宽度960px，可以改成920、940等，大于960没有用，因为老小孩博客最大960px。
举报
请选择你想添加的收藏夹
