DIV+CSS基础DIV+CSS十日教程10:段落设置,居中技巧和图片精灵

DIV+CSS十日教程10:段落设置,居中技巧和图片精灵

对于初次接触DIV+CSS布局的朋友来说,仔细研究好我们前几节的内容后,自己试着进行网页布局应该没什么问题了,本节我们来介绍一些在布局中实用的一些技巧。

1. 文本段落的样式设置

一般的,我们在定义网页整体样式的时候,都会定义网页内容的行距,定义行距用到的属性是line-height,行距可以设置为具体的数值(如25px),也可以设置为一个小数(如1.6),也可以设置为百分比(如150%),大家可以根据自己的需要安排合理的行距。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
<style type="text/css">
ul {line-height:2.2;}
</style>
</head>
<body>
<ul>
<li>真正的失败不是你没有做成事,而是你甘心于失败。</li>
<li>也许你只是一株稚嫩的幼苗,然而只要坚忍不拔,终会成为参天大树。</li>
<li>倾听可以让我们得到许多哲理,倾听可以使我们得到快乐。</li>
<li>你用阳光般的微笑轻点我的心湖,用片片柔情暖一场相逢。</li>
</ul>
</body>
</html>

例如上面这个网页,合理的设置行距可以让文本读起来很轻松,整个网页显得很清新。

有时候我们需要像写作文给每个段落的开头空两格,很多人通过在内容里打空格实现,实际上CSS就有文本缩进的属性可使用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
<style type="text/css">
p {text-indent:2em;}
</style>
</head>
<body>
<p>人生的路途漫长又曲折,在前行的路上我们也许会迷失了方向,也许会沉迷于路景,很多的迷雾和错误的路标会误导我们,让我们无法前行甚至使我们朝相反的方向前进,此时,我们只有找到自己的位置,才能一步步地接近目标,接近成功。<p>
<p>人生,本该,看的透,拿的起,放的下,潇潇洒洒走一回。</p>
<p>曾经这样以为,许下的诺言,我们真的可以如书上所言,不离、不弃、现在扔下所有娇情的句子,美好的时光,婉如过眼云烟,转瞬即逝……</p>
</body>
</html>

浏览这个网页发现每段文字前面都会空两格,这是因为设置了text-indent:2em这个定义,2em表示两个字符的宽度。

2. 水平居中和垂直居中

通常我们要设置内容水平居中是采用text-align:center来实现,将以上代码中的center改为left或right,则会居左或居右显示。

如果想要一行文本内容垂直居中,较简单的做法是将区块高度和行距设置为相等,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
<style type="text/css">
p {text-align:center;height:120px;line-height:120px;background:#eee;}
</style>
</head>
<body>
<p>勿以恶小而为之 勿以善小而不为</p>
</body>
</html>

这样的话,文本就实现了水平和垂直方向都能居中显示。

单行文本居中.png

对于多行文本的垂直居中不能这样设置,我们可以采用下面的方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
<style type="text/css">
div {
 width:300px;height:300px;
 margin:20px auto;padding:20px;
 border:1px solid #ccc;
 display:table-cell;vertical-align:middle;
}
</style>
</head>
<body>
<div class="c">
一壶漂泊浪迹天涯难入喉 你走之后酒暖回忆思念瘦
水向东流时间怎么偷 花开就一次成熟我却错过
谁在用琵琶弹奏一曲东风破 岁月在墙上剥落看见小时候
犹记得那年我们都还很年幼 而如今琴声幽幽我的等候你没听过
</div>
</body>
</html>

以上的方法是将块元素模拟成表格单元格的形式呈现,从而实现垂直居中,display:table-cellvertical-align:middle这两个定义起了作用。

多行垂直居中.png

对于一个块元素,想让它水平居中显示的话,我们前面的课程里曾经提到过,用margin来实现,将元素的左右外边据设置为auto即可,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
<style type="text/css">
div{
 width:60%;height:100px;
 margin:20px auto;
 border:1px solid #ccc;
}
</style>
</head>
<body>
<div>ABC</div>
</body>
</html>

对于这个div,设置了左右外边据为自动后,整个块在水平方向是居中显示的。

关于块元素的垂直居中,有很多实现方法,先来尝试一个简单的方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
<style type="text/css">
.div1 {
 margin:auto;
 position:absolute;
 top:0;left:0;bottom:0;right:0;
 height:100px;line-height:100px;
 background:#FBE3B9;
}
</style>
</head>
<body>
<div class="all">
  <div class="div1">礼义仁智信</div>
</div>
</body>
</html>

浏览这个网页,我们发现div块在垂直方向是居中显示的。

块元素垂直居中.png

有时候我们想让文章中的文字正常显示(居左),文中的插图居中显示,这样看起来比较自然,例如下面的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
<style type="text/css">
p img {text-align:center;margin: auto;}
</style>
</head>
<body>
<p>高跟鞋使女人步幅减小,因为重心后移,腿部就相应挺直,并造成臀部收缩、胸部前挺,使女人的站姿、走姿都富有风韵,袅娜与韵致应运而生。</p>
<p><img alt="高跟鞋" src="gaogen.jpg" /></p>
<p>高跟鞋作为一女人的外在穿着的选择体现着她的内涵,她的品位,她的追求,她对生活的理解。</p>
<p>穿上高跟鞋可以使人的视角大大提高,具有居高临下感或者至少有着高度上的震撼力。</p>
</body>
</html>

我们给图片标签设置居中属性,但浏览网页后发现图片并没有居中显示,如果给p标签添加居中,那么文字也一起居中了,这个该怎么解决呢?

当然我们给img外层的p标签设置一个class类,然后针对这个class设置居中肯定是可以的,不过更好的方法是给img标签加上display:table属性,配合margin:auto的作用,图片就居中显示了,或者配合定位属性和margin:auto也可以实现居中:

img {display:table;margin:auto;}
img {display:block;position:relative;margin:auto;} /*这两种写法都可以*/

图片居中.png

有时候,一个元素块的宽度是不确定的,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
<style type="text/css">
li {list-style-type:none;float:left;padding:10px;}
</style>
</head>
<body>
<div>
<ul>
<li>新浪</li>
<li>阿里巴巴</li>
<li>京东</li>
<li>肯德基</li>
</ul>
</div>
</body>
</html>

这样一个列表,我将li设置了向左浮动,让列表水平显示,而li的数量是不确定的,所以无法给整个列表定义宽度,但是我们又想让它居中显示怎么办?我们借助定位的属性就能轻松实现:

div {float:left;position: relative;left: 50%;}
ul {position: relative;left: -50%;}

这个实现方式是给父元素浮动属性,利用浮动的包裹性使它的总宽度等于子元素ul的宽度,通过定位让父元素div的最左边处于网页中线,然后再给子元素设置定位,向左偏移一半即实现了整体居中。

3. CSS图片精灵

我们之前介绍过背景属性background,该属性可通过坐标定位加载背景图片的某个部分,例如下面这幅图片,由上下两部分组成:

sprites.png

我们现试试给div块定义背景图片为上图的上半部分:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
<style type="text/css">
div {
 width:200px;height:150px;
 background:url(sprites.png) no-repeat left top;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

我们给div定义的宽度和高度,给背景属性定义了left和top,表示截取该图片的左上部分。

CSS图片精灵1.png

当把这里的top改为bottom,则背景会截取图片的左下部分。

CSS图片精灵2.png

这里的left和top定位可以使用具体的数值来表示截取图片的坐标,CSS图片精灵的优点是:可以将一些背景小图片放到一个图片文件中,利用定位分别显示,这样节省了服务器的资源。

如果我们将CSS图片精灵用在伪类hover中,则可实现鼠标指向元素时变换背景图片的效果,这个方法经常用于制作按钮。

学习到这里,我们的十日课程便正式结束了,对于新手来说,希望您看完这些文章会有较大的收获,关于DIV+CSS网页布局,我们要学习的东西远不止这些,这10篇课程介绍的仅仅是很浅显的内容,欢迎继续阅读本网站的其他文章,温故而知新,学而时习之!

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cjjcqxm.cn/div_css/11.html