CSS制作首字下沉效果
2017-03-30 本文已影响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
