提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

Web前端：简易灯箱画廊案例设计

案例Web前端 设计 简易
2023-09-27 14:22:47 时间

题目要求

在这里插入图片描述
参考代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易灯箱画廊设计</title>
		<meta name="author" content="huyiwei">
		<meta name="generator" content="HBuilder X"></meta>
		<style>
			ul{
				list-style-type: none;
			}
			li{
				float: left;
			}
			img{
				width:200px;
				height:200px;
			}
		</style>
	</head>
	<body align = "center">
		<h3 style="color: red;" align = "center">
			简易灯箱画廊设计
		</h3>
		<hr color="red" />
		<marquee behavior = "alternate" direction = "left"
		height = "200px" loop = "100"
		onmouseout="this.start()" onmouseover="this.stop()">
			<ul>
				<li>
					<a  href="图片/微信图片_20221002110832.jpg" target="简易灯箱画廊设计">
						<img src="图片/微信图片_20221002110832.jpg"/>
					</a>
				</li>
				<li>
					<a  href="图片/微信图片_20221002110837.jpg" target="简易灯箱画廊设计">
						<img src="图片/微信图片_20221002110837.jpg"/>
					</a>
				</li>
				<li>
					<a  href="图片/微信图片_20221002110840.jpg" target="简易灯箱画廊设计">
						<img src="图片/微信图片_20221002110840.jpg"/>
					</a>
				</li>
				<li>
					<a  href="图片/微信图片_20221002110843.jpg" target="简易灯箱画廊设计">
						<img src="图片/微信图片_20221002110843.jpg">
					</a>
				</li>
			</ul>
		</marquee>
		<br>
		<iframe name="简易灯箱画廊设计" width="400px" height="400px"></iframe>
	</body>
</html>

案例效果展示

在这里插入图片描述

相关文章