时间:2021-05-08
css首个文字下沉效果
用过word的大部分人都知道,word里有一个首字下沉功能,在文章的排版时用,有时能给文章增色不少。
用css仿word的首字下沉功能,不用修改代码,只用到css的伪元素:first-letter,即可实现首字下沉效果。
复制代码代码如下:
<p><span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.</p>
.firstcharacter {
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.</p>
p:first-child:first-letter {
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
以word为例,计算机首字下沉的设置方法: 1、首先打开文档,点住首字; 2、然后找到页面上的首字下沉; 3、接着点击下沉,选择下沉行数; 4、首字下沉
以Word2007版本为例,word设置首字下沉的方法如下: 1、打开word文档,选中首字下沉的数字,然后点击菜单栏上的插入。 2、然后再点击首字下沉选
以Word2007版本为例,word设置首字下沉的方法如下: 1、打开word文档,选中首字下沉的数字,然后点击菜单栏上的插入。 2、然后再点击首字下沉选
word首字下沉点不了的原因是: 1、因为“首字”设置了文字效果。解决办法:将“首字”的文字效果去掉即可。 2、要把光标放在段落的“首字”前(即:光标的后面
word使用的越来越广泛,也给办公带来了很大的便利,在word中经常会用到首字下沉的效果,那么该如何实现首字下沉呢?下面就为大家详细介绍一下,来看看吧!