当前位置:首页 > WordPress教程 > 正文

WordPress使用CSS 实现首字放大

最近在别的站点瞎逛,突然看到一个小亮点——首字放大!最近打狗,先做个版权声明哈!本文中的全部代码全部来自哼哼猪

这个效果可以叫文字下沉,最先使用在报纸上的,后来被大家来引用的!

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的值,颜色大小什么的都是可以自己设置的哦!

效果预览:2015-02-07T08-59-14.410Z额,其实已经放上了,可以直接看效果的!但是怕以后会改掉,就先留着吧!

标签:
上一篇: 下一篇:

5 条评论

评论加载中...
  1. 不错。。。

    2016年3月4日 21:16 评论
  2. 4楼
    来自天朝的朋友 QQ浏览器 Windows 10
    Zou's Blog  

    6666666666666

    2015年8月20日 12:11 评论
  3. 地板
    来自天朝的朋友 未知浏览器 Unknow Os
    Never记忆、  

    好教程,赞一个

    2015年2月8日 16:43 评论
  4. 技术宅

    2015年2月7日 19:07 评论
  5. 沙发
    来自天朝的朋友 未知浏览器 Unknow Os
    zevla  

    来学习了!

    2015年2月7日 18:23 评论

发表评论

不理你。不要啊!吃饭。吃惊。吃西瓜。飞吻!恭喜!Hi纠结!膜拜!OK抛媚眼。泡泡糖。抛钱。忍!生闷气!调皮。偷看。委屈。献花。疑问?抓狂!

小提示:Ctrl+Enter快速提交助您一臂之力~
加载中……