网页结构分析实例

第三章　网页代码结构分析

第一节　网页结构分析方法

本节讲解网页结构分析方法。下面讲解的内容为：一、网页结构分析方法，二、在“代码编辑”页面分析网页的代码结构。

前面的两章，已经讲解了代码的基础知识，讲解了常用标签的应用方法。想来您对代码已经熟悉了，也能够应用代码制作许多漂亮的网页了。但是，也许你曾经遇到过这样的问题：看到别人制作的漂亮的网页，还是不大会分析，不知道人家的网页效果是如何制作出来的，是如何安排其网页结构的。本章我就讲解一下这方面的内容，帮助您熟悉网页结构，引导您分析别人制作的网页，使您能够更好地安排网页结构，得心应手地制作出更多的漂亮网页来。

一、网页结构分析方法：

网页结构分析方法，归纳起来，大约有三种方法：

1、在网页“浏览页面”分析网页的结构：

大多数的网页，在打开网页、浏览网页的页面中，即可清楚网页的结构。这个网页中有多少段文字，有多少个图片，还有什么内容，它们的结构是如何安排的，都可一目了然。但是，也有例外。例如：一幅漂亮的动态图片，是动画图片，还是在一个静态图片中插入了动画？一个美丽的边框，它究竟是几重边框？边框中的诸多内容，是放置在同一层次的边框中，还是放置在不同层次的边框内？诸如此类的问题，在此页面中是很难分辨清楚的，只有分析它的代码，才能知道庐山真面目。

2、在网页的“修改页面”分析网页的结构：

收藏到你的图书馆中的文章，在打开文章、浏览文章的页面中，点击页面左上方或者左下方的“修改”按钮，就进入文章的修改页面，也就是文章图片的编撰页面。

“网页的修改页面”，尽管与网页的真实面目之间有一定的差别，但是还是有它的独到之处的。在“网页的修改页面”中，可以分辨清楚应用表格在图片中添加文字、图片、动画等内容的情况，还可以分辨清楚调用css绝对定位、相对定位的情况，在这些地方，往往会出现一个虚线框或者蓝色的方框，显示添加文字、图片，使用定位代码的具体情况，帮助你了解网页的结构状况。

3、在网页的“代码编辑页面”分析网页的代码结构：

网页的“代码编辑页面”，全面地详细地毫无差别地展现了网页代码的真实面目。要真正学会分析网页的代码结构，要真正学习代码，弄懂代码，应该在这个页面中去分析网页代码结构。本章要讲解的内容，就是在网页的“代码编辑页面”中，来分析网页的代码结构。

二、在“代码编辑”页面分析网页的代码结构：

网页代码，对于不懂代码的朋友而言，简直就是一部天书。密密麻麻乱七八糟的一大片代码，真不知该从哪里入手。就是对于稍有一点儿代码基础的馆友而言，也是一件头痛的事儿，究竟该如何进行分析呀！

别犯愁！只要掌握了方法，分析网页代码结构也不是什么难事。在讲解分析方法之前，我们先来复习一下有关的基础知识。复习什么内容呢？答案是“标签”。

什么是“标签”？

在《代码入门教程（２）》中我已经讲过了：在html语言里，标签是由一个尖括号和它里面的内容组成的统一体。

形如：<CENTER>、<table border="5" cellSpacing="1" cellPadding="3" width="650" height="210">的，都是标签。大部分的标签，都是成对使用的，前面有其首标签，后面必定有其尾标签。

那么，什么是首标签，什么是尾标签呢？我们可以这样来理解：在成对使用的一对标签中，用在内容前面的那个标签就是首标签，用在内容后面的那个标签就是尾标签。

首标签表示此项内容的开始处。标签内的第一小段代码就是这个标签的名称，后面的代码都是这个标签的属性与属值。标签名称与属性属值之间用空格隔开，属性与属值之间用等号连接起来，各个属性之间也是用空格隔开。首标签内可以添加若干个属性与属值，也可以不添加。

尾标签表示此项内容的结束处。尾标签内没有属性与属值，在标签名称的前面有一条斜杆。

首标签与尾标签之间的内容，就是它们管辖的、修饰的、限制的内容。

“首标签与尾标签之间的内容，就是它们管辖的、修饰的、限制的内容。”，这一点非常重要。我们在分析网页的代码结构时要经常用到。有不少的朋友不会分析网页代码结构，其实就是没有真正弄懂这一点。

下面举个例子：

上面的代码是成对使用的一对标签，是文字标签。

前面的标签：<FONT color=#ff0000 size=6 face=隶书>是首标签，首标签内第一小段代码FONT是标签名称：文字标签。标签名称后面有三个属性与属值：文字颜色＝红色，字号＝６号，字体＝隶书。

后面的标签 </FONT>是尾标签，尾标签内只有一条斜杆和标签名称。

中间的内容：“春天没来”欢迎您是这一对文字标签“管辖的、修饰的、限制的内容”。

上面这段代码发表以后的网页页面，是用红色的６号隶书字体显示“春天没来”欢迎您的文字内容。

书归正传，下面讲解分析网页代码结构的方法：（点击“回车键”整理代码，查看标签分析代码）

在你的图书馆内，随便找一个网页（开始练习，要找简单一点的欧！），复制其代码。然后把光标置于标签的前面（第一个标签除外），点击一下“回车键”。每一个标签都这样操作一下，这样就把各个标签代码都分为了一个段落。接着，就可以分析各个段落的代码情况了。

举例如下：

<p align="center"><font color="#008080" size="6">夫妻就像一双筷子</font></p><p style="text-indent: 2em;" align="center"></p><p style="text-indent: 2em;" align="center"><a href="http://www.360doc.com/userhome/4127803" target="_blank"><img alt="夫妻牵手" src="http://image31.360doc.com/DownloadImg/2011/06/2605/13371766_1.jpg">

</a></p><p style="text-indent: 2em;"><font color="#008080" size="5"><font face="宋体"> 夫妻像一双筷子，男人是一根筷子，女人是另一根筷子。两根筷子有缘握在一起，成为一双筷子，那才是夫妻。</font></font></p><p style="text-indent: 2em;"><font color="#008080" size="5">一双筷子，心往一处想，劲往一处使，才能把美味的佳肴送进口中。男人和女人，少了哪一个都不行。两个人只有一条心，彼此才会亲密无间。两个人只有和平相处，才不会难堪。一根筷子，永远捕捉不到生活的真正滋味。</font></p><p style="text-indent: 2em;"><font color="#008080" size="5">想让两根毫不相干的筷子牢牢地夹住食物，其中的一根就应该放低姿态，给另一根筷子一个有力的支点。如果两人都想占上风，双方都会受到伤害。</font></p><p style="text-indent: 2em;"><font color="#008080" size="5">筷子的作用总是需要双方共同来完成的，夹子也可以夹起东西，但是夹子无法张的更大，而筷子是自由的，它可以狮子大口，把一切美好的东西尽收囊中，这就是爱情的力量。因此，不要忘记，一双筷子应该是平行的。夫妻也是一种选择，虽然没有完美，但是平行也是一种珍贵。</font></p><p style="text-indent: 2em;"><font color="#008080" size="5">筷子有很多种，人也一样。一根筷子太长，另一根就不能太短。一根太粗，另一根太细，也不行。看看自己是怎样的一根筷子，才可以在茫茫人海中尽快找到自己的另一半。</font></p><p style="text-indent: 2em;"><font color="#008080" size="5">夫妻之所以像一双筷子，最根本的一点在于：他们之间谁也离不开谁，为了生活，永远不分开。他们总是一起品尝生活的酸甜苦辣，共同承担苦难，分享幸福。夫妻只有相恋相爱一生，才是世上的至宝。</font></p>

把上面的代码按照我讲的方法整理一下，其结果如下：

夫妻就像一双筷子</font></p>

</a><p></p>

<font color="#008080" size="5"><font face="宋体"> 夫妻像一双筷子，男人是一根筷子，女人是另一根筷子。两根筷子有缘握在一起，成为一双筷子，那才是夫妻。</font></font></p>

<p style="text-indent: 2em;"><font color="#008080" size="5">一双筷子，心往一处想，劲往一处使，才能把美味的佳肴送进口中。男人和女人，少了哪一个都不行。两个人只有一条心，彼此才会亲密无间。两个人只有和平相处，才不会难堪。一根筷子，永远捕捉不到生活的真正滋味。</font></p>

<p style="text-indent: 2em;"><font color="#008080" size="5">想让两根毫不相干的筷子牢牢地夹住食物，其中的一根就应该放低姿态，给另一根筷子一个有利的支点。如果两人都想占上风，双方都会受到伤害。</font></p>

<p style="text-indent: 2em;"><font color="#008080" size="5">筷子的作用总是需要双方共同来完成的，夹子也可以夹起东西，但是夹子无法张的更大，而筷子是自由的，它可以狮子大口，把一切美好的东西尽收囊中，这就是爱情的力量。因此，不要忘记，一双筷子应该是平行的。夫妻也是一种选择，虽然没有完美，但是平行也是一种珍贵。</font></p>

<p style="text-indent: 2em;"><font color="#008080" size="5">筷子有很多种，人也一样。一根筷子太长，另一根就不能太短。一根太粗，另一根太细，也不行。看看自己是怎样的一根筷子，才可以在茫茫人海中尽快找到自己的另一半。</font></p>

<p style="text-indent: 2em;"><font color="#008080" size="5">夫妻之所以像一双筷子，最根本的一点在于：他们之间谁也离不开谁，为了生活，永远不分开。他们总是一起品尝生活的酸甜苦辣，共同承担苦难，分享幸福。夫妻只有相恋相爱一生，才是世上的至宝。</font></p><p></p>

分析此代码的结构如下：

上面的代码（网页）一共分为９个段落：

第1段是文章的标题，用#008080颜色的６号字体显示，文章的对齐方式为居中对齐，文字内容为：夫妻就像一双筷子。

第2段是空段落。其目的是为了把文章标题与下面的内容间隔两行。

第3段是一个链接图片，点击图片，就会进入http://www.360doc.com/userhome/4127803这个网址。

第4段用#008080颜色的5号字体显示文字内容，段落行首缩进2em。文字内容为：“夫妻像一双筷子，男人是一根筷子，女人是另一根筷子。两根筷子有缘握在一起，成为一双筷子，那才是夫妻。”

第5段用#008080颜色的5号字体显示文字内容，段落行首缩进2em。文字内容为：“一双筷子，心往一处想，劲往一处使，才能把美味的佳肴送进口中。男人和女人，少了哪一个都不行。两个人只有一条心，彼此才会亲密无间。两个人只有和平相处，才不会难堪。一根筷子，永远捕捉不到生活的真正滋味。”。

第6段用#008080颜色的5号字体显示文字内容，段落行首缩进2em。文字内容为：“想让两根毫不相干的筷子牢牢地夹住食物，其中的一根就应该放低姿态，给另一根筷子一个有力的支点。如果两人都想占上风，双方都会受到伤害。”。

第7段用#008080颜色的5号字体显示文字内容，文字内容为：“筷子的作用总是需要双方共同来完成的，夹子也可以夹起东西，但是夹子无法张的更大，而筷子是自由的，它可以狮子大口，把一切美好的东西尽收囊中，这就是爱情的力量。因此，不要忘记，一双筷子应该是平行的。夫妻也是一种选择，虽然没有完美，但是平行也是一种珍贵。”

第8段用#008080颜色的5号字体显示文字内容，段落行首缩进2em。文字内容为：“筷子有很多种，人也一样。一根筷子太长，另一根就不能太短。一根太粗，另一根太细，也不行。看看自己是怎样的一根筷子，才可以在茫茫人海中尽快找到自己的另一半。”。

第9段用#008080颜色的5号字体显示文字内容，段落行首缩进2em。文字内容为：“夫妻之所以像一双筷子，最根本的一点在于：他们之间谁也离不开谁，为了生活，永远不分开。他们总是一起品尝生活的酸甜苦辣，共同承担苦难，分享幸福。夫妻只有相恋相爱一生，才是世上的至宝。”。

作业：

1、掌握标签的定义，弄清楚各种标签的首标签与尾标签。

2、“首标签与尾标签之间的内容，就是它们管辖的、修饰的、限制的内　　容。”在分析网页代码结构的时候，请你牢牢记住这一点。

3、“点击'回车键’整理代码，查看标签分析代码。”这是分析网页代码结构最基本的方法。应用这种方法，试着分析几篇网页代码的结构。

2013年2月15日于北京

“春天没来”祝福朋友新春快乐

第三章　网页代码结构分析

第二节　网页

结构分析实例

本节继续讲解网页结构分析方法。下面以具体的实例分析讲解。

例1：代码：

<table border="3" cellSpacing="0" borderColorLight="#e7efff"

borderColorDark="#08094a"cellPadding="0" width="750"

background=http://image48.360doc.com/DownloadImg/2012/01/0319/20499710_16.jpg

align="center" height="562">

<tbody>

<tr>

<td>

<p align="center"><marquee style="filter: glow(color=#55fa0a, strength=45);"

behavior="alternate" scrollAmount="3" align="center"> <font style="font-size: 32px;"

color="#ff0000"><strong>美　丽　风　景　惹　人　醉</strong>

</font></marquee></p>

<p><embed height="400" type="application/octet-stream" width="750"

src="http://www.xcwhw.cn/fla/bb/hc/522.swf " wmode="transparent" invokeurls="false"

quality="high" allowScriptAccess="never" allowNetworking="internal"></p>

<p><embed height="230" type="application/x-shockwave-flash" width="360"

src="透明flash动画网址" quality="high" menu="false" wmode="transparent">

</p></div></td></tr></tbody></table>

解析：

这是一篇在大图片中添加文字和动画图片的网页代码，是比较简单的网页代码，无需点击回车键给代码分段。分析方法为：先看整篇代码的首尾，再看整篇代码的中间部分。

代码的开始处是：<table border="3" cellSpacing="0" borderColorLight="#e7efff"

borderColorDark="#08094a" cellPadding="0" width="750" background=

"http://image48.360doc.com/DownloadImg/2012/01/0319/20499710_16.jpg"

align="center" height="562">

<tbody>

<tr>

<td>

这是表格的一套首标签。其顺序是：表格标签、表格的主体标签、表格的行标签、表格的列标签。

代码的结束处是：</td></tr></tbody></table>

这是表格的一套尾标签。其顺序是：表格的列标签、表格的行标签、表格的主体标签、表格标签。

表格的一套尾标签与表格的一套首标签顺序正好是相反的。你制作表格或者应用表格的时候，千万别弄错哦！

代码的中间部分：

在单元格内（“单元格内”在什么地方呢？就是<td>与</td>之间的地方。）设置了一个空块区：<div> </div>这个空块区的作用是让输入的文字的位置靠下一些。

接下来又设置了一个宽度为750px高度为500px的块区，块区中设置了两个段落。第一个段落中放入了移动的glow滤镜文字，内容为：美丽风景惹人醉。第二个段落中放入了两个动画图片（标签名称为：embed 的图片就是动画图片）。

代码2：

<table border="1" cellSpacing="60" borderColorLight="#cccccc"

borderColorDark="#cccccc" cellPadding="0" width="100%"

background="http://image37.360doc.com/DownloadImg/2011/09/1515/17656971_11.jpg"

align="center">

<tbody>

<tr>

<td>

<table border="1" cellSpacing="30" borderColorLight="#cccccc"

borderColorDark="#cccccc" cellPadding="0" width="100%"

background="http://userimage3.360doc.com/12/0930/21/4127803_201209302127430446.jpg"

align="center">

<tbody>

<tr>

<td>

<table border="0" cellSpacing="18" cellPadding="0" width="100%"

background="http://image37.360doc.com/DownloadImg/2011/09/1515/17656971_57.jpg">

<tbody>

<tr>

<td>

<table border="1" cellSpacing="0" cellPadding="0" width="100%"

background="http://image16.360doc.com/DownloadImg/2010/10/2316/6213864_3.jpg"

bgColor="#cccccc">

<tbody>

<tr>

<td>

<table border="1" cellSpacing="10" borderColorLight="#cccccc"

borderColorDark="#cccccc" cellPadding="0" width="85%"

background="http://image7.360doc.com/DownloadImg/2010/03/0602/2474078_27.jpg"

align="center">

<tbody>

<tr>

<table border="0" cellSpacing="0" cellPadding="0" width="700"

align="center">

<tbody>

<tr>

<font style="width: 100%; height: 80px; color: rgb(5, 250, 0); line-height:

150%; font-family: 黑体; font-size: 35pt;"><strong>祝您蛇年万事如意

</strong></font></td></tr></tbody></table></marquee></td></tr>

<tr>

pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod

Version=ShockwaveFlash width="700"

src="http://yy.2000y.net/20101120s/201212/2012121121320491715.swf"

allowNetworking="internal" AllowScriptAccess="never"

WMode="Transparent"> </td></tr>

<tr>

<img src=http://image57.360doc.com/DownloadImg/2012/12/2318/29122834_3.jpg width="700"

height="600"> </td></tr>

<tr>

<img src=http://image6.360doc.com/DownloadImg/2009/12/3114/2089132_6.gif

width="700" height="555"> </td></tr>

<tr>

<table border="0" cellSpacing="0" borderColor="#990000"

cellPadding="0" width="700" background="地址" bgColor="#000000"

height="300">

<tbody>

<tr>

<td>

<p style="width: 100%; color: rgb(255, 255, 0); line-height: 150%;

font-family: 华文行楷; font-size: 30pt; filter: glow(color=#ff0000,

strength=8);"><b>远在他方的朋友<br>美好的祝福送给您<br>祝您在新的一年里<br>一帆风顺二龙腾飞 <br>三羊开泰四季平安<br>五福临门六六大顺 <br>七星高照八方来财 <br>九九同心十全十美<br>百事亨通万事如意<br>家庭幸福事业辉煌</b>

</p></center></marquee></td></tr></tbody></table></td></tr>

<tr>

<table border="0" cellSpacing="0" cellPadding="0" width="700"

height="600">

<tbody>

<tr>

<td><embed style="margin: 5px; color: rgb(69, 221, 28);

background-color: rgb(8, 0, 0);" height="550" type="application/x-shockwave-flash"

pluginspage=http://www.macromedia.com/go/getflashplayer width="700"

src=http://bbs.sdinfo.net/attachments-bak/day_100207/1002071849725a14054cbb1aed.swf

allownetworking="internal" allowscriptaccess="never" quality="high"

invokeurls="false" wmode="transparent"> </td></tr></tbody></table>

</td></tr></tbody></table>

</td></tr></tbody></table></div>

解析：

这是我制作的一篇《新春祝福贺卡》的网页代码，是一篇比较复杂的网页代码。说它复杂，就在于多次使用了表格标签。在多重表格（边框）中，放置了文字、图片，并且有的文字、图片又放入了表格之中，再加上还使用了一些其它标签（例如：移动标签）来修饰、限制文字或者图片，像这样的网页代码是比较难分析的网页代码。　　分析比较复杂的网页代码，其方法依然是先看首尾，再看中间。

这篇代码的开始处是“块区标签”，结尾处是“块区尾标签”。这说明整个网页的内容都是这个块区的内容。设置这个块区的目的，一是为了放入所有的内容，二是为了使放入的内容居中显示。

接下来，代码的开始处有五套表格的首标签，（第五套表格的首标签下面就是移动标签了），代码的结尾处有六套表格的尾标签。这说明网页的内容是放在了一个五层表格中的，并且其最后一个内容是放在一个表格之中的。

下面我们再来分析中间部分的代码，即放入第五层表格中的内容：

第一行的单元格内，是移动标签控制的内容。其内容为移动的shadow滤镜文字：“祝您蛇年万事如意”。

第二行的单元格内，放入了一个地址为http://yy.2000y.net/20101120s/201212/2012121121320491715.swf的动画图片；

第三行的单元格内，放入了一个地址为http://image57.360doc.com/DownloadImg/2012/12/2318/29122834_3.jpg的图片；

第四行的单元格内，放入了一个地址为http://image6.360doc.com/DownloadImg/2009/12/3114/2089132_6.gif的图片

第五行的单元格内，放入了一个表格，表格中的内容是向上移动的文字，其文字内容为：远在他方的朋友　美好的祝福送给您　祝您在新的一年里　一帆风顺二龙腾飞　三羊开泰四季平安　五福临门六六大顺　七星高照八方来财　九九同心十全十美　百事亨通万事如意　家庭幸福事业辉煌

第六行的单元格内，放入了一个表格，表格中的内容是地址为

http://bbs.sdinfo.net/attachments-bak/day_100207/1002071849725a

14054cbb1aed.swf的播放器。

代码3：

<table border="1" cellSpacing="20" borderColor="#0000ff" cellPadding="0"

width="650" bgColor="#ff34b3" height="550">

<tbody>

<tr>

<img src=http://image52.360doc.com/DownloadImg/2012/06/1605/24886308_1

width="650" height="200">

<table border="0" cellSpacing="0" borderColor="#ab82ff" cellPadding="0"

width="650" bgColor="#ff34b3" height="156">

<tbody>

<tr>

<font style="width: 20px; color: rgb(255, 255, 0); line-height: 150%;

font-family:隶书; font-size: 20pt; writing-mode: tb-rl;"><strong>山没有母亲的爱高<br>海没有母亲的爱深<br>天没有母亲的爱广<br>地没有母亲的爱容</strong></font></marquee></p></td>

<td>

<table border="0" width="200"

background=http://image52.360doc.com/DownloadImg/2012/06/1605/24886308_8

align="center" height="302">

<tbody>

<tr>

src="http://tmflash.6000y.com/flashxuexi/QQ249181841-115.swf" quality="high"

menu="false" wmode="transparent">

</td></tr>

<tr>

<td align="center"><p align="center"><strong><font style="font-size: 24px;"

color="#ffff00">难忘母爱</font></strong></p></td></tr></tbody></table></td>

<font style="width: 20px; color: rgb(255, 255, 0); line-height: 150%; font-family:

隶书; font-size: 20pt; writing-mode: tb-rl;"><strong>地没有母亲的爱容<br>天没有母亲的爱广<br>海没有母亲的爱深<br>山没有母亲的爱高</strong></font></marquee></p></td></tr>

<tr>

<img style="border: 4px solid rgb(153, 153, 255);"

src=http://image52.360doc.com/DownloadImg/2012/06/1605/24886308_2

width="180">

<img style="border: 4px solid rgb(153, 153, 255);"

src=http://image52.360doc.com/DownloadImg/2012/06/1605/24886308_3

width="180">

<img style="border: 4px solid rgb(153, 153, 255);"

src=http://image52.360doc.com/DownloadImg/2012/06/1605/24886308_4

width="180"><img style="border: 4px

solid rgb(153, 153, 255);"

src=http://image52.360doc.com/DownloadImg/2012/06/1605/24886308_5

width="180"><img style="border: 4px solid rgb(153, 153, 255);"

src="http://image52.360doc.com/DownloadImg/2012/06/1605/24886308_6"

width="180"><img style="border: 4px solid rgb(153, 153, 255);"

src="http://image52.360doc.com/DownloadImg/2012/06/1605/24886308_7"

width="180"></marquee></td></tr></tbody></table>

</td></tr></tbody></table>

解析：

分析方法：先看首尾，再看中间。在分析的过程中，一定要留心观察各种标签的尾标签在什么地方，其首标签与尾标签之间的内容，就是这个标签所管辖的内容。特别是表格标签，尤其应该注意，一定要弄清楚你分析的这个网页中的表格究竟是几重表格。

上面的代码分析如下：

这篇代码的开始处，是一套表格标签。表格的单元格中已经放入了一个图片，接着又是一套表格标签，并且，下面的几行内也不见表格的尾标签。

这篇代码的结束处，是两套表格标签。这就不难判断，这个网页的大部分内容，都是放入第二个表格以后，把第二个表格又放入第一个表格中的。

下面我们再来分析中间部分的代码，也就是第二个表格中的内容。

第二个表格是一个两行三列的表格。

在第二个表格的第一行的第一个单元格内设置了一套段落标签。在段落中输入了一段竖排版的“向右”移动的文字，文字的内容是：“山没有母亲的爱高　　海没有母亲的爱深　　天没有母亲的爱广　　地没有母亲的爱容”。

在第一行的第二个单元格内设置了一个两行一列的表格。在表格标签中设置了一个地址为：http://image52.360doc.com/DownloadImg/2012/06/1605/24886308_8的背景图片；在第一行的单元格中插入了一个动画图片；在第二行的单元格中输入了“母爱难忘”的文字。

在第一行的第三个单元格内设置了一套段落标签。在段落中输入了一段竖排版的“向左”移动的文字，文字的内容是：“山没有母亲的爱高　　海没有母亲的爱深　　天没有母亲的爱广　　地没有母亲的爱容”。

第二个表格的第二行，是一个合并了列的单元格，把三个单元格合并为一个单元格，放入了六个左右“来回走”的移动小图片。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。