美文网首页🐋成员文章
CSS制作首字下沉效果

CSS制作首字下沉效果

作者: 爱喝茶的小姐姐 | 来源:发表于2017-03-30 14:48 被阅读52次
  • W3Cplus
  • MDN介绍
  • first-children-MDN:父元素的第一个子元素
    <body>
    <div class="main">
    <div class="main_items"></div>
    <div class="main_items"></div>
    </div>
    </body>
    css部分:
    .main_items:first-child{
    top:-50px;
    left:-50px;
    }
    .main_items:last-child{
    bottom:-50px;
    right:-50px;
    }

两种种方法:

  • 利用伪元素::first-letter然后float
    1)所有段落首字下沉
    p::first-letter {
    color: #c69c6d;
    float: left;
    font-size: 5em;
    margin: 0 .2em 0 0;
    }
    p {clear:both;} /清除首字的浮动,避免影响p标签的高度与其相叠加/

    2)首段首字下沉
    p:first-children::first-letter{
          color: #c69c6d; 
          float: left; 
          font-size: 5em; 
          margin: 0 .2em 0 0; 
        }
    
  • 利用initial-letter属性:需要配合first-letter一起使用
    p::first-letter {
    color: #c69c6d;
    initial-letter:3 1;/第一个表示行高,第二个表示沉度/
    }

sunken-raised-drop-caps.jpg

相关文章

网友评论

  • 前端GoGoGo7:建议把参考文章放最后,代码格式化下。
    爱喝茶的小姐姐:@九彩拼盘是的、这些代码格式、每一个都要手动调、这个一直困扰、耗费时间、好像这上面没有自动优化的功能
    前端GoGoGo7: @姐百纳 就是让代码的显示格式优化下。主要是代码要对齐~
    爱喝茶的小姐姐:@九彩拼盘 代码格式化是啥意思

本文标题:CSS制作首字下沉效果

本文链接:https://www.haomeiwen.com/subject/lvxpottx.html