首字放大下沉及特殊的双引号

首字下沉

效果如下：

实现方法

1. 可以使用first-letter为第一个字设置属性
2. 对第一个字设置为float: left
3. 效果中的图片之间插入到文字中，然后设置为右浮动
4. 段落的首行缩进两个字，使用text-indent: 2em;*

代码如下：

                    

                        前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端![](img/content-text-img.png)前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                    

                     

                         张杰端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端adf前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                     
                     

                        张杰端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                    
                

css

.content-section .content-left .content-text-img{
    width: 167px;
    height: 288px;
    float: right;
    margin: 15px;
}
.content-section .content-left .content-text{
    font: 12px/16px "宋体";
    color: #767777;
    text-align: justify;
}
.content-section .content-left .content-1:first-letter{
    font: 70px/1  "微软雅黑";
    color: #f5e327;
    float: left;
}
.content-section .content-left .content-text:nth-child(2),
.content-section .content-left .content-text:nth-child(3){
    text-indent: 2em;
}

特殊的双引号

效果如下：

Paste_Image.png

实现方法

1. 红色的双引号用两个span标签包裹，中间的文字用p包裹，它们被放到div父元素中，父元素设置position: relative;
2. 对双引号的span设置position:absolute;将其定位 到左上角和右下角
3. 因为span绝对定位后脱离了文档刘，因此p中的文字会覆盖在双引号上，这时可以对文字使用text-indent: 2em进行缩进，露出双引号。
   代码如下：

                                
ONE TWO
                                
THREE FORE FIVE
                                
hello word hello word hello word hello word
                            

CSS部分:

.content-right .down-part .right-hello{
    display: inline-block;
    position: relative;
    left: 8px;
    width: 162px;
}
.content-right .down-part .cont{
    font: italic 14px/16px "黑体";
    color: #5a5b5b;
    text-indent: 3em;
}
.content-right .down-part .yinhao:first-of-type{
    font: 72px "黑体";
    color: #d45d5c;
    position: absolute;
    top: -15px;
    left: -40px;
}
.content-right .down-part .yinhao:last-of-type{
    font: 72px "黑体";
    color: #d45d5c;
    position: absolute;
    right:-38px;
}