在《【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,如需转载请自行联系原作者