有关首行首字下沉的实现原理及代码
有关首行首字下沉的实现原理及代码
发布时间:2016-12-27 来源:查字典编辑
摘要:下面是两个个小技巧,一个是很多报刊中的首字下沉,其实很简单,原理就是在样式中添加后缀即可。还有一个是对第一行文字进行单独样式。给这段标签添加...

下面是两个个小技巧,一个是很多报刊中的首字下沉,其实很简单,原理就是在样式中添加后缀即可。还有一个是对第一行文字进行单独样式。给这段标签添加后缀即可。这两个小技巧分别都兼容低版本。非常实用的小技巧哟。下面是一段小例子。

css代码:

.dyfirst,.dyfirst2,.dyfirst3 {

    width:300px;

    border:1px solid #ddd;

    padding:5px;

    font-size:12px;

    margin:5px 0;

}

.dyfirst:first-line {

    color:red;

}

.dyfirst:first-letter {

    font-size:350%;

    font-weight:bold;

    color:#000;

    float:left;

}

.dyfirst2:first-line {

    letter-spacing:-2px;

}

.dyfirst3{

    text-indent:2em;

}

html代码:

<!doctype html>

<html dir="ltr" lang="zh-CN">

<head>

<meta charset="utf-8">

<title>CSS首字下沉</title>

</head>

<body>

<div>2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration</div>

<div>首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色</div>

<div>首行缩进,距离更紧密的.首行缩进,距离更紧密的首行缩进,距离更紧密的首行缩进,距离更紧密的首行缩进,距离更紧密的首行缩进,距离更紧密的</div>

<div>段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类