注册/登录,欢迎光临!
加入收藏设为首页网站地图
您当前的位置:辛勤IT网 >> 网页设计 >> DIV+CSS >> css实现首字下沉实例代码
热门:word | excel | powerpoint

css实现首字下沉实例代码

2021/4/2 21:42:09 所属分类:网页设计 - DIV+CSS
内容提要:css实现首字下沉实例代码,在css中要实现首字下沉其实很简单我们只要结合float与font-size的大小即可实现首字下沉了,下面我来举几个有意思的实例。

  在css中要实现首字下沉其实很简单我们只要结合float与font-size的大小即可实现首字下沉了,下面我来举几个有意思的实例。

  先看个实例上代码。应用到你要沉的那个字就ok了。

  例1

  代码如下:

.first {
 font-size:320%;   /*字体百分比增大*/
 float:left;  /*左浮动*/
}

  分析:

  1.字体增大。

  2.左浮动,然后下一行的就提上来了

  例2

  代码如下:

.menglong,.menglong2,.menglong3 {
    width:300px;
    border:1px solid #ddd;
    padding:5px;
    font-size:12px;
    margin:5px 0;
}
.menglong:first-line {
    color:red;
}
.menglong:first-letter {
    font-size:350%;
    font-weight:bold;
    color:#000;
    float:left;
}
.menglong2:first-line {
    letter-spacing:-2px;
}
.menglong3{
    text-indent:2em;
}

  html代码:

  代码如下:

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CSS首字下沉</title>
</head>
<body>
<div class="menglong">2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration</div>
<div class="menglong">首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色</div>
<div class="menglong2">首行缩进,距离更紧密的.首行缩进,距离更紧密的首行缩进,距离更紧密的首行缩进,距离更紧密的首行缩进,距离更紧密的首行缩进,距离更紧密的</div>
<div class="menglong3">段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。</div>
</body>
</html>

网页设计 | DIV+CSS
最近更新
推荐信息
关于我们 | 联系方式 | 对话本站 | 版权声明 | 所有信息