0
点赞
收藏
分享

微信扫一扫

web前端开发技术实验与实践(第三版)储久良编著 项目10 简易灯箱画廊

香小蕉 2022-04-01 阅读 70
htmlcssweb

实训三 项目10 简易灯箱画廊

一、页面文字素材:

二、代码:

<!--prj_3_1.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易灯箱画廊</title>
		<style>
			body{
				text-align: center;
			}
			.div1{
				width: 1800px;
				height: 1350px;
				margin: 0px auto;
				text-align: center;
				background-color: orange;
			}
			ul{
				margin: 0 auto;
				width: 800px;
				list-style-type: none;
				height: 120px;
			}
			li{
				float: left;
				width: 110px;
				height: 90px;
				margin: 10px;
			}
			img{
				border: 0;
				width: 110px;
				height: 80px;
			}
			h3{
				font-size: 24px;
				color: coral;
				padding: 10px auto;
			}
			a{color: #ffffff;text-decoration: none;}
			a:link,a:visited,a:active{color: #0033cc;}
			a:hover{border-bottom: 4px solid #FF0000;}
		</style>
	</head>
	<body>
		<embed src="img/爱我的话.mp3" loop="true" autostart="true" width="0" height="0"></embed>
		<h3>爱我的话给我回答</h3>
		<hr color="#CCFF99"/>
		<br>
		<div class="div1" id="">
			<ul>
				<li><a href="../img/图片/t11.jpg" target="iframe">TizzyT1<br><img src="../img/图片/t11.jpg" ></a></li>
				<li><a href="../img/图片/t21.jpg" target="iframe">TizzyT2<br><img src="../img/图片/t21.jpg" ></a></li>
				<li><a href="../img/图片/t41.jpg" target="iframe">TizzyT3<br><img src="../img/图片/t41.jpg" ></a></li>
				<li><a href="../img/图片/t51.jpg" target="iframe">TizzyT4<br><img src="../img/图片/t51.jpg" ></a></li>
				<li><a href="../img/图片/t71.jpg" target="iframe">TizzyT5<br><img src="../img/图片/t71.jpg" ></a></li>
			</ul>
			<br>
			<iframe name="iframe" src="../img/图片/t41.jpg" width="90%" height="80%"></iframe>
		</div>
	</body>
</html>

三、页面效果截图:

 

举报

相关推荐

0 条评论