CSS之段落缩进、Logo方法------text-indent

最新推荐文章于 2023-10-25 21:55:23 发布

山上农夫

最新推荐文章于 2023-10-25 21:55:23 发布

阅读量917

点赞数

分类专栏： CSS 文章标签： CSS text-indent

本文链接：https://blog.csdn.net/qq_41803637/article/details/80068701

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

text-indent

一、段落缩进

首行缩进两格

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		p{
			text-indent: 2em;
		}
	</style>
</head>


<body>
	<p>豫章故郡，洪都新府。星分翼轸(zhěn)，地接衡庐。襟三江而带五湖，
		控蛮荆而引瓯（ōu）越。物华天宝，龙光射牛斗之墟；人杰地灵，
		徐孺下陈蕃(fān)之榻。雄州雾列，俊采星驰，台隍(huáng)枕夷夏之交
		，宾主尽东南之美。都督阎公之雅望，棨(qǐ )戟遥临；宇文新州之懿(yì)范……
	</p>
</body>
</html>

二、Logo

由于搜索引擎只能识别文字，无法识别图形，所以要实现Logo的效果，需要将Logo图片放置到h1标题中作为背景，将h1的长宽设置为Logo图片的长宽，然后隐藏h1的内容

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		h1{
			width: 250px;
			height: 250px;
			text-indent: -9999px;
			background-image: url(images/solar/ba3.jpg);
		}
	</style>
</head>

<body>
	<h1>百度</h1>
</body>
</html>

疑问两点：

（1）为什么隐藏不用“display:none”，因为使用“display:none”会导致h1的权重消失

（2）为什么text-indent的值为：”-9999px“,因为我们的电脑屏幕宽度有1086px，1032px使用这个值可以保证值在屏幕宽度以外。

山上农夫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS之段落缩进、Logo方法------text-indent

text-indent一、段落缩进首行缩进两格&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;无标题文档&lt;/title&gt; &lt;style type="text/css"&gt; p{ text-indent: 2em; } &lt;/style&
复制链接

扫一扫