2021-10-06

最新推荐文章于 2025-05-01 16:01:26 发布

好了你不要再说了

最新推荐文章于 2025-05-01 16:01:26 发布

阅读量130

点赞数

文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/finisherr/article/details/120630794

版权

设置块元素第一个字符的font-size和float属性之后，使得后面的文字顶部对齐放大后的首字母的中部。

刚开始的CSS文件-----unit9_2.css:
@charset “utf-8”;
/* CSS Document */

#container{

}
h1{
text-align: center;
color: #fff;
background-color: #678;
}
img.picture{
float: left;
border: 1px dashed gray;
margin: 10px 10px 10px 0px;
padding: 5px;
}
#header{

}

/*//line-height: 20px;  */
vertical-align:middle;

}
p:first-letter{
font-size: 3em;
float: left;
}

main_left{

}

main_right{

}

刚开始的html文件-----unit9_2.html:
<!doctype html>

unit9_2

Head Line

Mobile widget使用的便准的Web技术，如HTML，CSS，javascript等。这些经典的Web技术规范是由W3C的属下。

![刚开始时候的网页显示效果](https://img-blog.csdnimg.cn/e7e766fefa4a4d03afa7223c42f4dfd5.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aW95LqGIOS9oOS4jeimgeWGjeivtOS6hg==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) 经过查阅资料和一系列的实验之后发现，我们只需要将文本的行高line-height设置的更高一点就可以解决这个问题(将前面CSS文件中注释的行高属性增加上去之后即可解决）。解决之后显示效果: ![在这里插入图片描述](https://img-blog.csdnimg.cn/dc5b6b9c90ea4bf785f3d3ddc8549dca.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aW95LqGIOS9oOS4jeimgeWGjeivtOS6hg==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)