2021-04-28 Web前端编程实验（四）

最新推荐文章于 2022-10-17 10:00:00 发布

原创最新推荐文章于 2022-10-17 10:00:00 发布 · 357 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

Web前端编程专栏收录该内容

10 篇文章

订阅专栏

本文是一篇关于HTML前端编程的实验报告，主要展示了如何使用HTML和CSS进行图像布局。实验中，通过CSS设置了图片的尺寸、边框和内边距，并利用相对定位实现了文字跟随图片的效果，创建了一个吸引人的视觉展示。

Web前端编程实验（四）

前言
本次实验所用编程语言为HTML，所用编辑文本工具为记事本。

注意事项
（1）前端编程注意HTML语言的灵活运用。
（2）相关HTML语言的学习链接https://how2j.cn/k/html/html-button/197.html。
（3）具体所有实验请参考博客 Web前端编程（一）~（八）。

实验四
1、实验题目。（注：题目如下）

2、代码实现。（注：代码如下）

<html>

<head>
<meta charset="utf-8">
<title>实验四</title>
<style type="text/css">
img{	
	height:100px;
	width:100px;
    margin-left:5px;
	border:1px solid #0cf;
	padding:5px;
}
</style>
</head>

<body>

<style type="text/css">
div{position:relative;}
div p{position:absolute; left:0px; top:-10px; color:red;}
</style>
   <img src="https://img-blog.csdnimg.cn/20210428151733897.png">
   <img src="https://img-blog.csdnimg.cn/20210428151733897.png">
   <img src="https://img-blog.csdnimg.cn/20210428151733897.png"></br>
   <img src="https://img-blog.csdnimg.cn/20210428151733897.png">
   <img src="https://img-blog.csdnimg.cn/20210428151733897.png">
   <img src="https://img-blog.csdnimg.cn/20210428151733897.png"></br>
<div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img-blog.csdnimg.cn/20210428151733897.png">
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一起来享受咖</br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;啡的温暖吧</p>
</div>

</body>
</html>

3、实验结果如图所示。