CSS-相关练习2-图片与文字的结合（文字开头大写）

最新推荐文章于 2024-08-20 09:26:37 发布

我想离开浪浪山去远方看看

最新推荐文章于 2024-08-20 09:26:37 发布

阅读量644

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_34216631/article/details/78633704

HTML 专栏收录该内容

37 篇文章

订阅专栏

本文通过一个具体的HTML5页面布局实例介绍了如何运用div和span元素实现特定的文字与图片布局效果。文章展示了如何设置字体大小、颜色及位置等样式属性，并讨论了div与span在实际应用中的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*   
*Copyright (c) 2017，烟台大学计算机学院   
All rights reserved.   
*文件名称：关于HTML的练习  
*作    者：张晴晴   
*完成日期：2017年11月25日   
*版 本 号：v1.0  *   
*问题描述：HTML5-JavaScript  
*输入描述： 无  
*程序输出： 无  
*/
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>第二道题目</title>
<style>
#t2{
 font-size:18px;
 font-family:"黑体";
 color:#FC0;
 width:1000px;
 height:500px;
 }
#t2 p{
  position:relative;
  }
#t2 span{
 font-size:80px;
 margin-top:20px;
 padding:10px;
 }
body {
 background-color: #BB0102;
 margin:0;
 padding:0;/*有时候为避免有断开间隙*/
}
</style>
</head>
<body>
<div id="t2">
  <img src="imgs2/chunjie.jpg">
  <p><span>春</span>节又称元旦潇洒垂涎三尺 吃哇撒是vc父亲的vc爱的vc地区重大vc饿啊离开V老大；v承担；flavor；打发V浪费v客分撒V你发的撒； V哦撒v客大发牢骚V开朗大vl;daV蓝色的V范德萨离开V吗【额去买菜'啊
  </p>
</div>
</body>
</html>

运行结果：