css实现文章首字下沉显示

要向实现下图文章首字下沉的效果，

需要使用css3中的：first-letter属性

代码如下：

css代码：

 .first::first-letter {font-size: 50px;float: left;color: #333;text-indent: 0;padding: 2px;line-height: 1em;}

html代码：


<p class="first">JavaScript 诞生于 1995 年。当时，它的主要目的是处理以前由服务器端语言（如Perl）负责的一 些输入验证操作。在 JavaScript问世之前，必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域，是否输入了无效的值。Netscape Navigator 希望通过JavaScript 来解决这个问题。在人们普遍使用电话拔号上网的年代，能够在客户端完成一些基本的验证任务绝对是令人兴奋的。毕竟，拨号上网的速度之慢，导致了与服务器的每一次数据交换事实上都成了对人们耐心的一次考验。</p>

css实现文章首字下沉显示相关推荐

html首行下沉效果,CSS样式 | 段落首字下沉
HTML+CSS 实现段落首字下沉 HTML5学堂:在项目中,时常能看到了一种文字展示的特殊效果--首字下沉(如图).于是花了几分钟考虑了一下使用方法,脑测之后,又敲了敲代码实现了一下,写出来与大家分 ...
css中设置首字下沉效果,CSS如何实现首字下沉效果？
我们在开发 web 页面时,如果是涉及到文字段落的开发,需要对文字设置一些特殊样式以增强 web 页面美观,提升用户体验度.那么今天 w3cschool 小编来教大家 CSS 如何实现首字下沉效果. ...
HTML首字下沉的编码,css如何实现首字下沉效果？伪元素+浮动实现效果（代码实例）...
在word文档中有一个首字下沉功能,可以在文章的排版时使用,有时能给文章增色不少.那么css可以实现这样的效果吗?本篇文章就给大家介绍css是如何实现首字下沉效果的,让大家可以了解如何用css的伪元素 ...
html首行下沉效果,css仿word首字下沉效果示例
css首个文字下沉效果用过word的大部分人都知道,word里有一个首字下沉功能,在文章的排版时用,有时能给文章增色不少. 用css仿word的首字下沉功能,不用修改代码,只用到css的伪元素:fi ...
简单CSS，实现“首字下沉”效果！
来自经典论坛 <html> <head> <title>首字下沉</title> <style> body{ font-si ...
CSS float实现首字下沉
方法: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
css 文字设置首字下沉,css里我设置的首字下沉被段落文字覆盖到了怎么办？
代码如下: 无标题文档 p { width:350px; padding:20px; border:1px dashed #ccc; word-wrap: break-word; line-heigh ...
css入门教程网页首字下沉,CSS制作首字下沉_CSS Inline Layout Module, initial-letter, CSS3 教程_w3cplus...
在杂志排版中,常常能看到首字下沉的效果. 在Web的排版中,也常常能看到上图这样的效果.并且常常看到的是首段首字下沉.那么今天这篇文章咱们来聊聊如何使用CSS实现首字下沉效果. ::first-let ...
用CSS实现首字下沉效果，仿word的首字下沉
用过word的大部分人都知道,word里有一个首字下沉功能,在文章的排版时用,有时能给文章增色不少. 今天我们用css仿word的首字下沉功能,不用修改代码,只用到css的伪元素:first-lett ...

css实现文章首字下沉显示

css实现文章首字下沉显示相关推荐

最新文章

热门文章