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



相关文章
|
7月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
102 0
|
6月前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
5月前
|
前端开发 C++
css排版—— 一篇优雅的文章(中英文) vs 聊天框的特别排版
css排版—— 一篇优雅的文章(中英文) vs 聊天框的特别排版
36 0
|
7月前
|
Web App开发 存储 数据可视化
编程笔记 html5&css&js 029 HTML图像
编程笔记 html5&css&js 029 HTML图像
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
86 0
|
前端开发 JavaScript
使用 JavaScript 和 CSS 的简单图像放大镜
使用 JavaScript 和 CSS 的简单图像放大镜
134 0
|
Web App开发 前端开发 测试技术
CSS文本平衡排版 text-wrap:balance
CSS文本平衡排版 text-wrap:balance
106 0
|
前端开发 数据可视化
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1):旋转动画
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1):旋转动画
227 0
|
移动开发 前端开发 API
中文网页重设与排版:Typo.css(下)
中文网页重设与排版:Typo.css(下)
103 0
|
Web App开发 移动开发 前端开发
中文网页重设与排版:Typo.css(上)
中文网页重设与排版:Typo.css
122 0