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>
<img src="https://img-blog.csdnimg.cn/20210428151733897.png">
<p> 一起来享受咖</br> 啡的温暖吧</p>
</div>
</body>
</html>
3、实验结果如图所示。