本文适用不同风格的老小孩用户
在老小孩网上，还有好多朋友没有用上“宽屏”风格。而“窄屏”风格也有各种不同的博客宽度。基本上是两类，一类是宽约660px，(如咖啡豆用的白底的，好运会来用的黑底的)。另一类是老风格，510px∼560px宽度的。但是他们都是潜在的宽屏风格用户。
现在龙韵老师制作了那么多的音画背景图，如何也能使他们也能方便地使用呢？当然用PS是最直接的方法，但如果今后将风格改成宽屏了，那用PS做的博客，显示时还是窄屏的。
因此，这里提供一段简单的源代码，理论上能适应各种不同风格的显示宽度。宽屏、窄屏都好用。但由于它是用了源代码里的“层”、“相对长度”等概念，因此在用的时候，尽量不要再添加或删除自己吃不准的代码。
<div style="position:relative;left:0;top:0;width:100%">
<img style="border-style:none;" width="100%"
src="https://2img.net/h/img0.oldkids.cn/uploads/diary/200810/10080113776.jpg">
<div style="position:absolute;z-index:1;left:0;top:0;
padding-top:38%;padding-right:4%;padding-left:14%;
font-size: 14pt;color: #000080;line-height:1.5em;font-family:宋体;">
<p style="margin:0;text-indent:2em;text-align:left">文字写在这里</p>
</div>
</div>
源代码的简单解释：(关于padding 填充距的解释请见前文)
图片在网页上显示，最基本的方法是两种。一种是当背景来使用（background）。特点是图片以实际的大小显示；可将文字及其他的内容“写”在这背景图上。另一种方法是用 img 标签显示，特点正好相反：图片的大小可以改变，但上面不能再写字。现在要将龙韵老师的图片，用在不同宽度风格的博客上，办法就是用图的大小可改变的 img 方法，再在图的上面建立一个专门用来写文字的“层”。关于如何建“层”，请参阅我的关于“相对定位”和“绝对定位”两篇文字。在龙韵老师的画上，就可以建各种不同位置、不同用途的层。上述代码中，中间一对 div 标签之间就是一个完整的层的代码。只要在原地拷贝，修改里面的 left、top、的数值。并修改层号（Z-index）的值，注意每个层的层号应该是不同的，层号大的覆盖在小的上面。
我们要将图片设置成与博客日记一样宽，并使博客风格变宽时图片也能变宽，因此这段代码里用的长度值都是用百分比来表示的“相对长度”。其100%的实际值就是博客的宽度（现在的情况）。这段代码里的其他的百分数表示的实际值，就是以博客宽度为1的计算值。当然这个计算由电脑自动完成。图片的“高度”不要设置，也要电脑按原图的比例计算。
关于三个“填充距（padding）”的设置，特别是“上填充距”一定要用百分比值，因为随着图片的宽度的改变，图片的高度也是变的，用px度量的绝对尺寸，在这里是不合适的。
要改的就是代码里的红字部分。将上述代码拷贝到日记的“源代码”状态的编辑框里，将您喜欢的龙老师的背景图的地址，替换到代码里。接下来是修改padding-top\padding-left\padding-right的数据了。在代码里都用的百分比的值。100%的长度就是您的风格的显示宽度。您不必正确地知道具体的数字，建议您拿把尺（有刻度就行），量一量您编辑框的宽度，记住数字，以此作为100%值的参考。再用这把尺量出您文字希望下移的尺寸，两者相除，就是偏移的百分比值（可以大于100，譬如150%也行）。同样的方法，可以估计出左右“填充距”的百分比值，4%是常用值，宽度是720时，该值就是29px。
上面的这些工作，也可以除了替换图片地址外先什么也不改，写好文字，发到“草稿”里去看看，就能估计到上下左右还要做多少调整。原来的百分比数据就是最好的参考依据。只要知道了100%是怎么回事，相信会有各种更好的方法来估计出这三个数据的。
原文：http://www.oldkids.cn/blog/view.php?bid=18195
新浪微博
QQ空间
人人网
腾讯微博
Facebook
Google+
Plurk
Twitter
Line
