本文适用不同风格的老小孩用户
在老小孩网上,还有好多朋友没有用上“宽屏”风格。而“窄屏”风格也有各种不同的博客宽度。基本上是两类,一类是宽约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