从零开始学做专题
从零开始学做专题
原帖：http://bbs.bianews.com/thread-43578-1-1.html
本来想了一大段的前言来解释写本文的目的，后来觉得太浪费大家时间，删掉了。先说说我对网编在网页设计制作这一块技能上的理解吧（如果大家有什么不同看法欢迎提出，我会尽力去完善这些教程）。网编日常工作中，跟本版有关的主要有下面几种情况：
1、利用cms 发布文章
例如新闻常识、文字编辑能力、SEO 、新闻图片处理等技能这里就不谈了。跟本版有关的就是图文排版。通过记事本、网络编辑工具箱或者Dreamweaver 等工具进行基础的排版可以节省很多时间。不过更复杂的排版还是得熟练使用cms 的在线编辑器、熟练使用html 和css 等。个人觉得，各类网站当中，蓝色理想、poco 、个人博客的排版是做的比较好的；论坛是做的最差的。本版在这方面的文章暂时空缺。
2、制作专题
这块内容是本版的建设重心所在。对于制作专题本版对网编的分工是这样的：由于大专题有美工与技术人员配合，网编只需要组织内容。故实际上只有小专题才需要网编自己设计、制作，或者根据已有模板修改。
为此，本文《从零开始学做专题》给大家建议的学习路线是这样的：
1、什么是Html 和常用的html 标签
html 是基础的基础。这里对大家学习的要求是：你要熟记常用的几个html 标签。以下这篇
教程清新简洁，建议大家阅读学习： http://bbs.bianews.com/thread-35529-1-2.html
2、什么是css
大家应该感谢css 。因为它的存在，我们再不用去理会html 标签那些复杂的标签属性。从此html 标签里除了class=和id=之外，非常的干净！（表单和个别特殊标签除外） 这里对大家的要求也不高，只需要了解什么是css ，和css 一些基本的语法。下面有两套教程供参考：
a 、http://bbs.bianews.com/thread-20657-1-2.html 《5日精通CSS 层叠样式表》 对于这套教程，你要做的就是看完“第一日”那部分并且熟记。后面四日的内容，可以大概地浏览一遍。
b 、http://bbs.bianews.com/thread-37323-1-5.html 《编程之邦-CSS-视频教程》 如果你觉得文字教程太枯燥，那么建议你阅读这套视频教程。同样，认真看完第一章《课前须知》并熟记；第二章《第二章常用选择和属性》可以大概地看一遍
3、Dreamweaver 的基本操作 http://bbs.bianews.com/thread-32121-1-4.html
软件的基本操作还是得看看视频教程比较容易上手。文字太难描述了。
4、专题实例教程
下面隆重推荐本版原创教程，新手专题系列教程。暂时只有第一期，重点教如何利用div+css进行基本的布局和美化。即使经过了上面三个步骤的入门，本篇教程仍显得枯燥。因为这里开始遇到了很多不熟悉甚至没见过的代码。大家看的时候最好准备好纸笔，把不懂的地方记下来。
第一期目录：
新手专题教程第一期修订版(1)
新手专题教程第一期修订版(2)
新手专题教程第一期修订版(3)
新手专题教程第一期修订版(4)
新手专题教程第一期修订版(5)
附录1-基本操作
附录2-css 逐行解释
新手专题教程第一期(答疑)
专题效果预览
第二期正在筹备中......
5、知识碎片积累和案例积累
经过简单的入门后，如果不是打算学精，那么就没什么必要进行系统的学习了（如果要进一步学习，最好到其他专业的论坛。本版仅限于网编实用级别的技术教学）。这个阶段，更多的是需要积累。积累零碎的知识碎片和经验，多看看别人的专题是怎么做的。比方说大家可以把这个板块的帖子都认真看看。
http://bbs.bianews.com/thread-28023-1-1.html
新手专题教程第一期修订版（1）
选题和版式
教程初定分4个帖子：
∙
∙
∙
∙ 选题和版式确定 构建DIV+CSS页面 布置内容 美化
先看看效果：http://blog.gzauto.edu.cn/topic/bianews/ (打开网速可能有点慢，请大家稍等)
这是第一期教程，以本版内容为主题做一个示范专题。然后根据大家的反馈情况，对第一期教程的内容进行调整，同时开始准备第二期教程。
一、首先是热身阅读。
先对专题有一个大概的了解。这部分内容节选自论坛内不同的帖子：
http://bbs.bianews.com/thread-28270-1-6.html
二、选题。
这里要做的教程就以本版内容为例咯。
内容才是一个专题的灵魂。页面什么的只是一种载体。不过这里我也只能写写载体的搭建教程。至于如何做出有内涵的专题，请大家多留意《网编经验》的帖子。
三、确定布局
四、布局
这里，我按照番茄的方法，画了一个div 布局图。这个布局图很明显地表明了不同的div 之间的关系：
怎样把直观的图片变成代码呢？在每个框的开头加上
框的结尾加上
然后按照整个图的顺序，从左到右、从上到下把代码排列起来。完整代码如下
(适当增加段落缩进，便于看清div 之间的关系(为注释部分，可以删去) ：
选题和版式部分到此结束。这一节中有些地方不是很科学。例如div 的命名。大家可以参考DW 版的其他帖子。 附上上面那个div 布局图的psd 原图：http://bbs.bianews.com/attachment.php?aid=7889
新手专题教程第一期修订版（2）
构建DIV+CSS页面
我们在上一章已经把确定了专题的选题和版式。在这一章里，我们就利用Dreamweaver 8中文版，把这个框架一步步构建出来。
一、建站
在桌面上新建个文件夹"bianews" ，然后打开Dreamweaver8中文版。以下操作均在Dreamweaver 里进行
1.
2.
3. 新建站点，站点名称为“网编是怎样练成的”；本地根文件夹为桌面上的“bianews ”文件夹 新建页面，保存在bianews 文件夹根目录，命名为“index.html ”；编码为utf-8 新建css ，保存在bianews 文件夹根目录，命名为“index.css ”
好，建站准备工作到此结束。
二、写Xhtml
1、写div 部分
切换回index.html ，切换到代码界面，在之间插入如下代码(注意，全部是小写字母) ：
2、给index.html 链接css 文件
3、编写css
index.html 初步编写完毕。记得保存。 源文件参考：http://bbs.bianews.com/attachment.php?aid=7890
切换至index.css(css部分解释请阅读附录2-css 逐行解释)
首先输入以下代码【全局控制部分】：
css 源文件参考： http://bbs.bianews.com/attachment.php?aid=7898
然后开始【逐行控制】
先看看这个帖子：http://bbs.bianews.com/thread-35041-1-1.html
这个帖子里边列举了很多种情况。这里我们直接套用里边的布局
先给总容器一个宽度
第一行#header，logo 和banner ，要套用里边“单行两列”的布局
即规定#header、#logo和#banner的宽度、高度，然后header 居中对齐，最后logo 向左浮动，banner 向右浮动 把原例子修改一下，把#后边的名字改成我们自己的，修改下宽度高度，就可以了
代码如下：
css 黑色加粗部分为背景色，纯粹用于测试效果。测试结束后记得删掉。——包括后边的一个分号
以上是单行2列的布局，如果网页仅有这一行容器，那么上面的css 代码就算是完成了。 而实际上，如果几个行容器从上到下层叠的时候，需要在容器末尾加上一个clear 。 这里是一个难点。下面给大家两个选择：
1.
2. 个人建议，新手先记住这个步骤，以后再慢慢看教程，理解clear 的含义 如果大家觉得不明白这个clear 的话会看不下去，那么建议你先阅读以下帖子：
http://bbs.bianews.com/thread-35236-1-1.html
或者蓝色理想的系列教程：http://www.blueidea.com/tech/web/2007/4545.asp
那么什么时候要加clear 呢？ 看图：
即#header部分要修改成这样子(黑体字为增加部分) ：
css 部分增加：
至此，第一行已经成功漂浮了。大家可以把index.html 和index.css 保存后，按F12预览效果
那个logo 和banner 是不是在同一行并排了呢(看背景色) ？是的话，很好，第一步成功了。
新手专题教程第一期修订版（3）
构建DIV+CSS页面（2）
第二行#menu只有一列，套用“单行单列”的布局
即规定#menu宽度、高度，还有居中对齐
css 部分代码如下（黑色加粗部分是背景色，方便大家看效果。记得去除，以下不再罗唆）：
第三行#base比较棘手，是一行三列的布局，套用“单行三列”－“float定位一”的布局
首先要在xhtml 部分做以下修改
（不记得怎么改的复习这里：http://bbs.bianews.com/thread-31591-1-1.html）：
css 部分：
第三行的布局到此结束。大家可以按下F12看看效果了。 接下来的布局工作很轻松，因为布局方式都是重复的。
1.
2.
3. 第四行#advanced是单行三列，跟第三行#base相同（除了div 名、宽度、高度要做修改，下同）； 第五行#other是单行两列，跟第一行#header相同； 第六行#footer单行单列，跟第二行#menu相同。
于是分别写出第四、五、六三行的xhtml 和css
第四行#advanced
xhtml ：
css ：
第五行#other
xhtml:
css:
第六行#footer(只有一列，不用加入clear ，所以只需要修改css)
css ：
ok ，按下F12，一个不同色块相间的拼图是不是已经出现在你眼前了呢？接下来，我们补充完最后一段代码，布局部分的工作就基本完成了。
最后一段css 代码是：
还记得最外层的#container么？其实在这个固定宽度的页面里，他可有可无。以上代码的意思是：
最小宽度600px ；最大宽度1200px （注意黑体加粗部分）
呵呵，这个就是自适应宽度的代码。当我们对最外层的div 设置了最小最大宽度，里边其他行容器只需要把宽度设置为100％，就可以实现自动适应窗口大小了。这个我会在以后的教程里用到。 好了，第二节《构建DIV+CSS页面》就到这里。
附件：http://bbs.bianews.com/attachment.php?aid=7912
新手专题教程第一期修订版（4）
布置内容
(另存为logo.gif)
(另存为banner.gif)
素材准备
在bianews 文件夹里新建一个文件夹images ，把logo.gif 和banner.gif 放进去
css 代码里的背景颜色记得去掉
需要布置内容的div 一共有12个，分为以下5种类型：
1、布置图片——#logo和#banner
2、布置菜单——#menu
3、布置文章列表——
#html
#css
#dw
#color
#pic
#lay
4、布置图文信息——#down、#example
5、版权信息——#footer
下面分别对这5种类型的内容布置进行讲解。在这个专题里也好，在其他网站里也好，同一类型的布置方法是可以相同的，大家注意触类旁通，甚至背下来都可以，以后照搬就是。
1、布置图片
布置图片有两种方法：插入图片和使用背景图
1.1插入图片
（可以对图片设置超链接）
在#logo插入图片logo.gif ，就在
和
之间插入图片，修改后代码如下：
1.2
使用背景图
（不能对图片设置超链接）
找到css 里以下这段：
在任一个“; ”后面，添加以下代码：
修改后的代码如下(banner也一并加入了) ：
2、布置菜单
在xhtml 中找到以下代码：
在两行之间加入以下代码：
css 部分加入以下代码：
到此菜单添加完毕。保存，按下F12预览效果吧
3、布置文章列表
一共有六个div 需要插入文章列表。他们有许多特性会是相同的，例如高度、宽度、样式等等。这里要用到“类” 首先，在每个div 里(#html、#css、#dw、#color、#pic、#lay)插入两个子div
给他们指定高度，在css 部分添加以下代码：
现在开始添加文字：
在每个
里输入对应的列表标题
在每个
里输入：
跟上一节一样，
是列表的开头和结尾，是列表项的开头结尾
以上是添加文字的方法。不过输入代码太繁琐。另一种方法：
1.
2.
3. 切换回index.html 的【设计】界面 找到各个.title 的位置，输入对应的标题；（图） 找到各个.list 位置，插入列表（图），然后把论坛里的带有链接的标题逐行复制进去（每个列表8篇文章）
ps ：如果【设计】界面出现显示错位的，请检查是否忘了把css 里边测试效果用的背景色全部去掉
这一步是体力活。大家可以直接下载完成了的
http://bbs.bianews.com/attachment.php?aid=7919 index.html 看源代码：
4、布置图文信息
保存到images 文件夹，另存为1.jpg
保存到images 文件夹，另存为2.jpg
保存到images 文件夹，另存为3.jpg
保存到images 文件夹，另存为4.jpg
如果大家已经明白了上一节的布置文章列表，那么这一节应该不难理解了。
1.
2. 先熟悉一下什么是dl 列表：http://bbs.bianews.com/thread-35403-1-1.html 然后，在每个div 里插入（#down、#example）两个子div
在每个
里输入对应的列表标题（跟文章列表一样）
（在【设计】窗口预览可能会错位，所以尽量在【代码】窗口编辑）
在每个
里输入：
类似于前两节，
是列表的开头和结尾，
是列表项的开头结尾; 每个dd 里边有两个标签，第一个用于插入图片，第二个插入对应的文字 这个例子中，每个列表里使用两个列表项
xhtml 部分：
css 部分：
呼... 终于快完了。F12预览一下吧，接着进入最后一节：
5、布置版权信息
这个好办... 打开清风大哥的网编访谈专题：http://bbs.bianews.com/topic/fangtan， 查看源代码，找到下边这段
然后，放到#footer里边吧... 嘿嘿... 套用现成的
保存一下，再F12预览效果吧。然后下载这个：http://bbs.bianews.com/attachment.php?aid=7927 对比一下代码，看看有没有什么漏洞。
新手专题教程第一期修订版（5）
美化
考虑到大多数网编在美工方面不在行，美化这节的教程主要教大家如何借用互联网上的资源。分析html 部分不做详细介绍，要求阅读者对html 有一定的了解，如果不了解，请先阅读本版相关教程，或者直接跳过分析，只阅读、照搬代码练习。
第一期教程不要求大家一次性学会div+css制作专题，只是想让大家先熟悉一下这个制作流程，为下一期的教程打下基础。所以本期教程只要求大家记住这些步骤和一些固定不变的代码，如两列布局和三列布局等等。至于如何理解这些代码，大家在初步熟悉流程以后，在阅读不同教程的过程中，会慢慢理解的。
在开始之前，先对全局做个美化：每个行容器之间没有间隙，都是紧贴着得。这里给它们一个间隙：
加在五个行容器的css 里边(任一个分号后面):#header{}、#menu{}、#base{}、#advanced{}、#other{}、#footer{} 其中
∙
∙ #header{}只需要加margin-bottom:3px; （因为header 是最上面一行，不用加上边距） #footer{}只需要加margin-top:3px; （因为footer 是最下边一行，不用加下边距）
首先是#menu，这里使用论坛的菜单样式。 在ie 里打开
bbs.bianews.com
这个效果是怎么做出来的呢？经过分析，主要是以下部分的css 代码起作用：
挑个别解释下吧： #menu{}里边的
是背景，我们得把它下载下来（把鼠标停留在菜单的空白位置，【鼠标右键单击】－【背景另存为】），保存到桌面上的bianews/images/menu_bg.gif
我们可以挑选其中部分，放到index.css ，最终效果如下：
其次是六个文章列表、和两个图文信息。本来打算做两种效果的，发觉教程写太长了，时间又不多，还是只做一种了：
1、给.title 加个背景
（所有标题栏都是同一个“类”控制的，那就是.title ）
(另存为images/title_bg.gif)
解释下：.title 以该素材为背景，背景图左下角对齐，不重复。 这样，.title 长一点，背景图就往右显示多一点，.title 短一些，背景图就被遮盖，显示得少一些。这被称为“滑动门”
2、对标题进行准确定位，并且加粗
给每个title 外围嵌套一个
,如：
然后在css 里对h1进行准确定位和加粗
3、添加边框
页面中间一片光秃秃的，现在给.title 、
.list 、.piclist 分别加个边框。分别在.title{}、.list{}、.piclist{}
添加：
结果边框都挤在一起了。这个分几部来解决：
上下边框－在.title{}里添加以下代码：
左右边框－这个比较麻烦，需要对左中右分别控制
css 里新建三个类
xhtml 做以下修改
然后把左列的.title 、.list 和.piclist 改为
把中列的.title 、.list 改为
把右列的.title 、.list 和.piclist 改为
完工。F12预览效果
4、文章列表美化
1.
2.
3. 把文章列表左对齐，调整好距离。 li 去掉黑圆点，设置背景（下划虚线）。 设置文字的背景（左对齐的三角符号）。然后文字左边增加空白，跟背景图片错开。
(另存为images/word_bg.gif)
(另存为images/list.gif)
css 部分代码如下：
有一篇文章标题太长，我把它改成：“DW网页编辑常用表现的实现方法”了
5、图文信息美化
修改一下图片之间的距离就好了。css 增加一个类
6、最后是版权信息了
为了整个页面的统一，这里也给他一个边框，另外，它跟#other行容器太挤了点，给它点空隙：
7、调整
做完整个页面了。F12预览一下，感觉哪里还有些别扭。这里对#menu
做一些小小的调整
在xhtml 里， 菜单的最前面增加：
最后面增加
在css 里增加
(另存为images/index.gif)
8、行顺序
div+css最大的特点就是表现与内容相分离。我们上边所做的各个行容器之间是互不相干的。现在打开最终版本的页面，第一屏全是文字，往下拉才能看到图片。如果有需要，可以对行的顺序做一些调整。每个行容器都有一个开端和结尾，例如：
和
只要把从开始到结束的代码全选，然后剪切到其他行容器的开端或者末尾处即可对行容器的顺序进行调整。详情大家可以看看例子里的index1.html
例子：http://bbs.bianews.com/attachment.php?aid=7942
这第一期的教程，重心全放在基本操作和布局基础上了。请大家多多提出批评意见，我会根据大家的指点，调整主题策划和特殊版块应用等其他方面上的比重。
示范页面：http://blog.gzauto.edu.cn/topic/bianews/
新手专题教程第一期（答疑）
1、xhtml 校验
http://validator.w3.org
分别上传我们各个阶段做出来的index.html
可能会发现以下问题：
多余的链接——在论坛复制文章标题的时候，可能带有tag.php 的链接。删掉即可
图片标签没有alt 属性或者没有关闭符号——正确写法：
今天我校验的时候发现了以上两个问题，已经修复并重新上传附件。
现在的页面已经符合w3c 标准
2、css2校验
http://validator.w3.org/
直接通过验证。
现在我们的这个专题页已经是一个符合web 标准的页面
附录1-基本操作
新建站点
【站点】－【新建站点】
新建页面
【文件】－【新建】(或者Ctrl+N)－左边选【基本页】右边选【HTML 】右下角为【XHTML 1.0 Transitional】（即默认选项）－【创建】
新建css 文件
【文件】－【新建】(或者Ctrl+N)－左边选【基本页】，不过这次右边选【CSS 】－【创建】
修改页面编码
【修改】－【页面属性】－在跳出的属性界面左边，选择【标题/编码】，下拉改为【Unicode （UTF-8） 】 插入图片/直接拖放插入图片
【插入】－【图像】
或者，在右边的【文件】窗口，找到需要插入的图片，【鼠标左键拖选】到页面中适当的位置
在css 里加入图片背景
1.
2.
3.
4.
5.
6.
7. 把光标放在任一个" ；" 后面（紧跟在" ；" 后面不留空格），敲空格，dw 就会出现代码提示框； 继续输入b, 可以看到代码提示框里第一个b 开头的代码已经变成深色； 使用键盘上下方向键选择(background ) 、回车（或者鼠标双击），会出现新的代码提示框； 同样使用方向键选择、回车或者鼠标双击" url "; 在弹出来的窗口中选择images 文件夹下的logo.gif ； css 部分增加了一段代码：background:url(images/logo.gif)（注意没有分号） 紧接着再来一个空格，又出现了新的代码提示框，输入n ，选择no-repeat ，并在后面紧跟着补充输入一个";" 图
片添加成功。
ul 菜单增减项目
-
和
是整个菜单的开头结尾，
是每个菜单项的开头结尾。 要增加菜单项，可以通过代码方式或者所见即所得方式添加：
1.
2. 切换回【设计】窗口，光标停留在某个菜单项后，回车转行，输入新菜单项即可 在
-
和
之间，你需要添加新项目的位置，输入以下代码：
链接css
方法一：切换至index.html 代码界面，将光标停留在后面，然后【鼠标左键拖选】【文件】窗口里的index.css, 拖到后边即可
（如果看不到【文件】窗口可以按快捷键【F8】）
方法二：【文本】－【CSS 样式】－【附加样式表】－【浏览】－选择刚才新建的index.css －【确定】
方法三：在
之间单独起一行，然后输入
分析一个网页的效果
1.
2.
3. 在ie 里打开bbs.bianews.com 在浏览器里：【查看】－【源文件】，可以看到用记事本打开的网页源代码 挑选论坛菜单里的个别关键词，例如“短信息”、“会员”、“搜索”等，在源文件里搜索其中一个关键词(ctrl+f)，
找到菜单代码所在位置
4.
5. 一行一行往上分析该代码，看它被嵌套在哪个div 里，经分析，菜单代码所在的div 为：
找到css 链接(在head 部分) ：
6. 如果熟悉dz 论坛的话，马上就可以判断出应该是style_1.css了，另一个是空的。如果不确定就把两个css 都
打开
7.
8.
9. href 后面的就是该css 的相对地址。即完整地址是：http://bbs.bianews.com/forumdata/cache/style_1.css 在ie 地址栏输入以上网址，默认会用dw 打开 在dw 里ctrl+f,搜索#menu，即可分析css 中控制菜单的部分
附录2-css 逐行解释
这第一期教程起点不高，希望大家能够由浅入深的学习，大部分代码，先用上再说，以后慢慢就会明白他的含义。 大部分代码，只要求读者会直接复制粘贴使用。故只做代码含义上的介绍。
个别代码要求能够变通使用，文中会对其中的变量进行讲解，请大家注意触类旁通。
对所有元素进行控制，含义是自动断行
对body 进行控制，背景色为白色，对齐方式为水平居中
对body 、单元格、输入框... 等等进行控制，文字颜色为#535353，字体大小12px ，行高1.6em ，字体为Arial,Helvetica,sans-serif
对body 、ul 、dl.. 等等进行控制，盒子与盒子之间的距离为0（边距），盒子与内部填充物的距离为0（间隙）
标题1、标题2... 标题6的字体大小为1em
所有包含在a 标签内的文字颜色一律为#262626，没有下划线
鼠标停留在带链接的文字上时，出现下划线。这行定义覆盖了上一行定义中，鼠标停留在链接上的这种特殊情况。就像军训教官先说，全部人都不许吃饭。接着又补充一句：张三除外。由于只覆盖了下划线的定义，颜色不受影响。 a 标签和img 标签的边框为0
斜体、加粗、表格头的字体样式都显示为正常（不是斜体或倾斜），字体粗细：正常（不加粗）
单元格无内容时，是否显示边框：是。相邻单元格的边框是独立显示还是合并：合并
对整个body 的字体大小为12px 、字体、盒子与盒子间的距离为0（边距），盒子与内部填充物的距离为0（间隙）。这四个属性下面不再进行解释
img 标签的边框为0、不显示。高度随内容自动伸缩。
.clear 是一个类，同一个页面里可以反复被div 或者其他盒子调用。
4行代码含义一次是：清除浮动属性，高度为1，盒子与盒子间的距离（正上方向）（上边距）为-1。（这样浏览器的解释结果就是这个盒子高度为0，不可见）。超出盒子的内容（内容溢出）不显示。
#head是一个
id 。id 在一个页面里是唯一的，不能重复使用。宽度780px ，左右边距为自动（浏览器的解释结果是该盒子水平居中）。内容溢出时，出现滚动条（如果没有规定盒子高度，则自动伸长，不出现滚动条。以上代码属于后者）。下边距为3px 。相同的属性下面将不再重复介绍。
左浮动，宽度289px ，背景图为logo.gif ，背景图不重复，高度86px
右浮动
左右边距都是自动=水平居中。边框为1px ，实线，颜色是#CAD9EA（细线表格也可以这么做）。背景颜色白色、背景图片
menu_bg.gif，背景在x 轴方向重复（水平重复）
#menu ul表示在id 为menu 的盒子里的ul 。例如
，本定义在其他地方出现的ul 无效。可以覆盖之前出现过的ul 定义。
这里说说间隙。间隙后边可以有一个值、两个值、三个值、四个值，四种情况。分别表示一个值：四个方向的间隙相等。两个值：第一个值为上下间隙，第二个为左右。三个值：第一个为上间隙，第二个为左右间隙，第三个为下间隙。四个值：上、右、下、左。顺时针方向
背景图片为index.gif ，左边缘对齐，不重复
最大宽度1200px ，最小宽度600px 。其他情况下随窗口大小变化。要用的时候，修改黑体字部分就行了。
包含在.list 类的盒子里边的ul 中的li... （好拗口）的属性。其他地方出现的li 不受影响。列表项样式为无（不显示
黑圆点）
范围同上，li 里边的a 标签，背景图片左对齐，底部对齐
这个inline 比较难解释。大概的意思就是，display 属性采用了这个值后，变成行排列（横向排列）