当前位置：首页 > CMS教程 > WordPress > 列表

wordpress中实现首字下沉效果

发布:smiling　来源: PHP粉丝网 　添加日期：2014-03-22 11:31:14　浏览: 评论：0　

首字下沉效果我们在css 2.1以版本就支持一个:first-letter并且它可以与可以与任何元素关联,下面我们来看个实例,直接使用first-letter实例的一些实例,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>css首字下沉效果</title> 
  5. <style type="text/css"> 
  6. p:first-letter { font-size:36px; float:left; color:#f60; padding:5px; font-family:"黑体"} 
  7.  </style> 
  8. </head> 
  9. <body> 
  10. <p>这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。某些语言有一些要处理为单个字符的字母组合，如果是这样，用户****可能会把首字母同时应用到这个字母组合。<br/> 
  11. 在 CSS2.1 之前，:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围，可以与任何元素关联。可以应用到首字母的属性是有限的。<br /></p> 
  12. </body> 
  13. </html> 

还有一些其它办法我也整理了下,第一个字变大(首字变大、首字下沉)手动加上样式语法,使用 span 其实做法与 code 语法类似,请进到「范本」>>「修改html」,并将底下的css语法复?贴上到 </b:skin> 之前,代码如下:

  1. .fb { 
  2. font-size:280%; 
  3. font-weight:bold; 
  4. float:left; 
  5. margin-right:3px; 
  6. } 

接著,在HTML编辑模式,手动用<span>语法将文章第一个字包起来即可,如下所示:

<p><span class="fb">测</span>试第一个字变大的效果，第一个字变大</p>

那么如何应用到wordpress博客中呢,百度了一下方法,找到如下代码:

<?php the_content(''); ?>

改为如下代码:

<div class="aaa"><?php the_content(''); ?> </div>

在CSS里加 aaa是随便的,代码如下:

  1. .aaa p:first-child:first-letter{text-transform:uppercase;font:24px Impact,”黑体”;color:#000;float:left;margin-right:2px;} 

就可以了.

Tags: wordpress 首字 效果

分享到：

相关文章

推荐文章

热门文章

最新评论文章