33.4　添加图片

博客的首页构图完成后，下面来设置博客的图片，其中的图片都是放在images文件夹下，本实例需要的图片有LOGO图和每个功能模块的小图标等。

对图片的添加，可以直接从IMG标记中引入，同时更多的小图片用CSS设置背景图像，如各功能模块中的图标等。为了使这些图标加入到功能模块的主题条上，而需要对原来的CSS文件进行设置。

因这些标记只在主页中使用，故可以用内联的方式设置样式，如左边的第一个区域是个人信息，而可以设置其他背景样式如下所示。

01 ＜div class="myblogtitle"＞

02 ＜img style="position：absolute；top：-7px；left：8px"alt=""src="images/myinfo.gif"/＞

03 ＜img alt=""src="images/blogright.gif"style="float：right"/＞

04 ＜img alt=""src="images/blogleft.gif"style="position：absolute；left：0px；top：0px"/＞

05 个人信息

06 ＜/div＞

【代码解析】在上述代码中，使用了层myblogtitle，并在其内部引入了标记＜img＞同时设置该标记的样式（代码第2～4行），使其出现在左上角，同时出现在其他的功能模块上，可以设置一个类选择符，相同的样式可以用该类选择符，如下所示。

01 ＜div class="mybox"＞

02 ＜div class="myblogtitle"＞

03 ＜img style="position：absolute；top：-7px；left：8px"alt=""src="images/myinfo.gif"/＞

04 ＜img alt=""src="images/blogright.gif"style="float：right"/＞

05 ＜img alt=""src="images/blogleft.gif"style="position：absolute；left：0px；top：0px"/＞

06 我的相册

07 ＜/div＞

08 ＜/div＞

【代码解析】该代码用mybox表示容器层，myblogtitle层表现的效果与“个人信息”一样，都在其内设置＜img＞标记（代码第3～5行），同时设置了内联样式，样式中用定位属性对图像绝对定位，根据不同的版块设置不同的图片，故每个模块的设置都不一样，全部的样式在书中没有列出，在本书附带的光盘中，包括完整代码。

当设置完这些图像后，所表现的效果是在每个功能模块上都有一个不同的图像，效果如图33.3所示。

图　33.3　添加图片效果