【CSS】【15】图像的排版和背景

在《【CSS】【13】文字的排版》中，把《桃姐》这部电影排版成如下样式：

若大家经常浏览电影网页时会发现，一般的会贴一个海报出来，本例我们就把左上部分的“主演、导演”换成图片。

一、HTML部分代码：

<h1>《桃姐》简介</h1>    
<div class="actors">
<img src="tao.png" />
    <p>主演：刘德华 叶德娴 秦海璐 秦沛</p>
    <p>导演：许鞍华</p>
    <p>年代：2012</p>
</div>

与《【CSS】【13】文字的排版》相比，HTML部分只是多增加了<img src="tao.png" />一行，其它的均没有变化。

二、CSS部分代码：

使用后代选择器，把图像大小设置为100*150，同时把<p>标记隐藏掉，代码如下：

div.actors img
{
   width:100px;
   height:150px;
}

div.actors p
{
   display:none;
}

三、查看效果：

这里为何不把<p>标记的主演、导演内容删除呢？而是使用display属性把其隐藏，这是为了像Google、baidu这样的搜索引擎便于搜索，从而提升网站的排名。

四、进一步美化：

为了使页面进一步美化，我们使用粉红色的背景图片，这个背景图片与海报的背景色系相近，同时把<h1>标题也使用背景替换。

/*

* H1的背景颜色重设为黑色，并居中对齐，设置背景图片是带花纹的。

*/

h1
{
   background-image:url(h1bg.gif);

   color:#000000;
   text-align:center;
}

body
{
   background-image:url(bg.gif);
}

其效果为：

其中bg.gif和h1bg.gif分别为：

   这里再度复习了一下背景图片的使用，若不显示设置ground-repeat，则默认水平和竖直方向扩展。细心的可能会发现<h1>标题背景图片没有指定ground-repeat，也意味着它将向水平和竖直两个方向无限地扩展，但为何没有扩展为整个页面呢？

     本文转自qingkechina 51CTO博客，原文链接：http://blog.51cto.com/qingkechina/1261765，如需转载请自行联系原作者