最近在别的站点瞎逛,突然看到一个小亮点——首字放大!最近打狗,先做个版权声明哈!本文中的全部代码全部来自哼哼猪 !
这个效果可以叫文字下沉,最先使用在报纸上的,后来被大家来引用的!
1.定义好CSS样式标签,然后手动给第一个字添加标签
1a.延伸一点就是给编辑器增加一个快捷标签按钮
优点:此方法是最有效最彻底的,但比较麻烦2.通过Js 给文章第一个字添加样式标签
优点:现在很流行用js添加,确实js灰常强大,不过因为需要js加载匹配,所以首字放大效果会有延时3.通过Css 给文章第一个字添加样式标签
优点:代码简洁,实用性强,修改简单,经过修改优化后就是我现在使用的方法
在wordpress下,文章页面的结构为
<div id="context"> <p>我是一篇演示文档的首行开头</p> <p>我是正文第2段落</p> <p>我是正文第3段落</p> <p>我是正文第n段落</p> </div>
当然,你可以在编辑文章的时候就把第一个直接设置一下啦!但是,以前编辑的……
so,我们还是用css吧,不可能自己一个一个的改……
一般的主题差不多都可以支持,但是不排除其他的!
将一下代码直接添加到主题下style.css内即可
.context > p:first-child:first-letter { color: #8844BB; float: left; font-size: 2.1em; font-weight: bold; line-height: 1em; margin: -6px?3px; position: relative; }
需要单子下沉的可以修改一下margin的值,颜色大小什么的都是可以自己设置的哦!
331495 127991Thrilled you desire sensible business online guidelines keep wearing starting tools suitable for the particular web-based business. cash 822789
2018年8月19日 04:56我已使用这段CSS,是整行甚至2-3行都变大了!看来是不兼容 Begin 主题了!可惜!
2017年2月17日 23:32不错。。。
2016年3月4日 21:166666666666666
2015年8月20日 12:11好教程,赞一个
2015年2月8日 16:43技术宅
2015年2月7日 19:07来学习了!
2015年2月7日 18:23