教你做图书馆顶图

2017-02-15  清泉m   阅 17  转 1

分享：

教你做图书馆顶图

【准备阶段】先要确定你的图书馆首页版面顶部空出的高度，也就是你将设置的顶图的高度。

确定顶部空当高度的方法：击首页“装扮”/自定义皮肤。在“顶部高度”右侧

设定你的顶图高度即可。我的顶图高度是 165.

【第一阶段】用已给资料作固定图片图书馆顶图

一、资料 代码：

1、绝对定位标签：<table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td>

<div style="position: absolute; top: 0px; left: 0px;">

注：TOP值和  LEFT值可任意改变。

2、代码：<img width="800" height="175" src="图片地址">；

注：width值和 height 值可任意改变。

3、图片：

注：右击图片后，选击“属性”，复制其地址 可用。

二、作业：用上述资料作固定图片图书馆顶图。提示：

1、把上述绝对定位标签复制、粘贴到撰写页面的代码编辑态；

再把代码复制、粘贴到撰写页面的代码编辑态（绝对定位标签的下面）；

2、右击吹笛女图片，选击“属性”，复制其地址；

3、转到撰写页面，先把“图片地址”几个字删除，然后在此处右击，选击“粘贴”。

4、击左下“代码编辑”按钮。出图了，而且是按代码要求的宽和高出的图。

5、转到图书馆首页，装扮……出了顶图。但不理想：

①、图靠右了，须调整LEFT值。

②、图片横向不足，须加大width值；

③图片纵向多了，须减小height值。克服缺点操作如下：

6、把LEFT值修改为0；把width值修改为1000；把height值修改为165。

然后击左下“代码编辑”按钮。出图了，而且是按代码要求的宽和高出的图。

转到图书馆首页，重新装扮……就好了。

复习巩固知识与操作：用图片背景的表格标签作顶图

仍用前面用的绝对定位标签，咱们换个代码（标签）、换张图片：

第一阶段咱们用的是贴图标签现在换一下，改用图片背景的表格标签来做。标签如下：

<div style="POSITION: relative">

<table style="TEXT-ALIGN: left; WIDTH: 1000px; HEIGHT: 165px" border="0" cellspacing="0" cellpadding="0" background="图片地址" align="center">

<tbody><tr>

前面咱们用的图片是吹笛女图片，现在换一下，改用天安门图片来做。图片如下：

具体做法与以前一样，就是把图片地址代进代码中、修改或确认图片的宽高数和定位数值。 简单，就是换了个标签而已。以后，咱们就用这个表格标签，在它上面加东西，实现动图和移动字等。

用这个标签的目的一是复习巩固所学，二是承前启后，以后咱们就是在标签的基础上加东西，形成动画顶图或移动文字顶图等。

本阶段的重点就是四个数字的调整应用：top 是管上边线的，left 是管左边线的，这两个是定顶图位置的；width 是定图片横宽大小的 ，height 是定图片纵向大小的，这两个是定图片宽高的。换句话说 咱们解决了两件事：图片位置、图片大小。明白了吗？

好了，我等看你新做的完美顶图。

【第二阶段】定位粘贴动画顶图

完整顶图代码如下：

<table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td>

<div style="position: absolute; top: 0px; left: 0px;">

<div style="POSITION: relative">

<table style="TEXT-ALIGN: left; WIDTH: 1000px; HEIGHT: 165px"  border="0" cellspacing="0" cellpadding="0" background="背景图片地址" align="center">

<tbody><tr>

<td>

<img style="POSITION: absolute; WIDTH: 120px; HEIGHT: 100px; TOP: 0px; LEFT: 60px" class="divBorderStyle" border="0" src="透明动画地址">

<img style="POSITION: absolute; WIDTH: 100px; HEIGHT: 100px; TOP: 0px; LEFT: 200px" class="divBorderStyle" border="0" src="透明动画地址">

注：①、在下面参考图片地址中选择，把合适的图片地址带入代码中即可成图。

②、各WIDTH、HEIGHT、TOP、LEFT后面的数字你可任意修改，但冒号不能改。

③、 部分参考图片地址

参考背景图片地址：

http://userimage5.360doc.com/14/0704/21/3459959_201407042102400429.jpg

烦请你改用这幅顶图吧：

http://userimage8.360doc.com/17/0530/20/3459959_201705302032000658657845.gif        或用下边这幅：

http://userimage8.360doc.com/17/0530/20/3459959_201705302032010017401984.jpg

或改用下边这幅图：

http://userimage8.360doc.com/17/0530/20/3459959_201705302030500549825320.gif

参考透明动画地址：

http://image58.360doc.com/DownloadImg/2013/01/2123/29756826_30.jpg

http://image86.360doc.com/DownloadImg/2013/09/2413/55242674_1.gif

http://image58.360doc.com/DownloadImg/2013/01/2123/29756826_41.jpg

http://image51.360doc.com/DownloadImg/2012/04/2400/23445801_73

http://userimage3.360doc.com/12/1222/20/3459959_201212222003340478.gif

调整透明动画图片的位置:

调整动画图片的位置要靠改变该贴图标签里TOP数值（是动画图片距页面上边线的距离，TOP=0就是图片与上边线重合，数值越大动画离上边线越远。）和改变LEFT数值（是动画图片距页面左边线的距离，LEFT=0就是图片与左边线重合,数值越大动画离左边线越远）。