css仿word首字下沉实际效果示例

日期:2021-03-07 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

css首个文本下沉实际效果

用过word的绝大多数人都了解,word里有1个首字下沉作用,在文章内容的排版时用,有时能给文章内容增色很多。

用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;
}

上一篇:纯CSS3完成翻转的齿轮动漫实际效果 返回下一篇:没有了