要设计一个水果选择盘，你可以使用HTML5来构建结构，CSS来添加样式，以及可能的JavaScript来增强交互性。下面是一个简单的示例，展示如何创建一个基本的水果选择盘：

html


水果选择盘

苹果



香蕉



樱桃



葡萄



橙子

在这个示例中，.fruit-selector 是一个包含多个 .fruit 元素的容器。每个 .fruit 元素代表一个水果，并有一个 data-fruit 属性来存储水果的名称。CSS样式定义了水果选择盘的布局和外观，包括悬停效果和被选中时的样式。

JavaScript代码为每个 .fruit 元素添加了一个点击事件监听器。当点击一个水果时，它会取消选择之前选择的水果（如果有的话），然后选择当前点击的水果，并将其名称输出到控制台。在实际应用中，你可能希望将选择的水果名称用于其他目的，比如添加到购物车或显示在一个列表中。

  • line-height 属性设置行间的距离（行高）。
  • 注释：不允许使用负值。
  • 该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
  • line-height 与 font-size 的计算值之差（在 CSS
    中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
  • 原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>水果选择盘</title>
<style type="text/css">
#disk {
	width:340px;
	padding:10px;
	resize:both;
	overflow:auto;
	border:1px solid #f90;
	line-height:22px;
}
#disk a {
	display:block;
	float:left;
	width:60px;
	text-align:center;
	text-decoration:none;
	font-size:12px;
	line-height:20px;
	margin:3px;
	border:1px solid #ccc;
	background-color:#e4e4e4;
	counter-increment:mycounter;    /* 定义计数器 */
}
#disk a:focus {
	outline:2px solid #fc6;         /* 设置外轮廓 */
	outline-offset:2px;
}
#disk a:hover {
	-webkit-appearance:button;
	-moz-appearance:button;
	appearance:button;
}
#disk a:before {
	content:counter(mycounter)".";  /* 生成项目符号 */
}
</style>
</head>
<body>
<div id="disk"> <a href="#">香蕉</a> <a href="#">苹果</a> <a href="#">葡萄</a> <a href="#">橘子</a> <a href="#">西瓜</a> <a href="#">枇杷</a> <a href="#">草莓</a> <a href="#">沙果</a> <a href="#">海棠</a> <a href="#">樱桃</a> <a href="#">香梨</a> <a href="#">雪梨</a> <a href="#">温柏</a> <a href="#">水蜜桃</a> <a href="#">油桃</a> <a href="#">蟠桃</a> <a href="#">哈密瓜</a> <a href="#">木瓜</a> <a href="#">山竹</a> <a href="#">雪莲果</a> <a href="#">番石榴</a> <a href="#">山楂</a> <a href="#">人心果</a> <a href="#">火龙果</a> <a href="#">香瓜</a> <a href="#">青瓜</a> <a href="#">蓝莓</a> <a href="#">荔枝</a> <a href="#">芒果</a><a href="#">龙眼</a> <a href="#">蔷薇果</a> </div>
</body>
</html>