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

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

HTML：桂林山水风景Web界面设计

WebHTML 界面设计
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 type="text/css">
			h3{
				color: red;
			}
			img{
				width: 200px;
				height: 200px;
			}
			li{
				/* display: inline; */
				float: left;
			}
			ul{
				list-style-type: none;
			}
		</style>
	</head>
	<body align = "center">
		<h3>桂林山水风景图片</h3>
		<ul>
			<li>
				<a href="图片/image51.jpg">
					<img src="图片/image51.jpg"><br>桂林山水1
				</a>
			</li>
			<li>
				<a href="图片/image52.jpg">
					<img src="图片/image52.jpg"><br>桂林山水2
				</a>
			</li>
			<li>
				<a href="图片/image53.jpg">
					<img src="图片/image53.jpg"><br>桂林山水3
				</a>
			</li>
			<li>
				<a href="图片/image54.jpg">
					<img src="图片/image54.jpg"><br>桂林山水4
				</a>
			</li>
		</ul>
	</body>
</html>

样式效果：

在这里插入图片描述

相关文章