css中第一行首字变大,怎么让顶部对齐?
本文介绍了css中第一行首字变大,怎么让顶部对齐?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如题
<div class="content-bottomhalf">
<div class="content-bh-l" style="padding-top: 50px;">
<h1><span class="title-first-words">THE</span> TECHNOLOGE OF FRONT<span class="title-chinese">前端技术领域</span></h1>
<div class="article-content">
<p>
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端
</p>
<p>
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端
</p>
<p>
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端
</p>
<img src="images/keyboard.jpg"/>
</div>
</div>
<div class="content-bh-r">
</div>
</div>
CSS
.content-bottomhalf{width: 100%;height:610px;overflow: hidden;}
.content-bh-l{width: 415px;float: left;}
.content-bh-l h1{border-bottom:2px solid #11456b;font-family:simhei,"黑体";font-weight: bolder;font-size:34px;line-height: 50px;color:#11456b;}
.title-first-words{font-size: 72px;font-style: italic;color: #f5e327;}
.title-chinese{display: block;font-size:33px;}
.article-content{position: absolute;width: 415px;height: 610px;}
.article-content p{font-size: 12px;line-height: 16px;font-family: simsun,"宋体";}
.article-content p:first-child:first-line{}
.article-content p:first-child:first-letter{font-size: 70px;color: #f5e327;font-family: "Microsoft YaHei","微软雅黑";}
.article-content img{position: absolute;right: 0;}
出来的效果应该这样才是对的
请教!感谢!
解决方案
加个span标签或者使用:first-letter伪元素
p:first-letter{
float: left;
line-height: 60px;
font-size: 60px;
};
这篇关于css中第一行首字变大,怎么让顶部对齐?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文