在hbuilder中任意创建一个文件，例如 demo.html

本效果需要使用到 css 中的 float 及 伪类样式

在 CSS 中，float 属性用于指定元素相对于父元素的左右浮动方向。当元素设为 float 后，元素将会脱离文档标准流（normal flow），并根据指定的浮动方向，尽可能地靠左或靠右排列。

常见的 float 属性取值有 left、right 和 none。left 表示元素浮动到左侧，right 表示元素浮动到右侧， none 表示取消浮动或恢复浮动之前的默认设置。

在进行 float 设计时，需要特别注意以下几点：

1.浮动元素会对后面几个元素的布局产生影响，因此需要注意设置好清除浮动。

2.不建议将浮动元素用于布局，因为浮动元素不能撑开父容器，会产生一些布局问题，建议使用 flexbox、grid 等布局方式。

3.在设置浮动属性时，需要结合其他属性一起使用，如清除浮动等。

代码如下:

此页面直接运行效果如下:

但 此页面距离效果图 还有一定的差距, 因此需要使用css 来进行美化

css代码

在当前demo.html 中 增加 <style></style>标签

<style>
			 overflow: hidden;
			 float: left;
			 list-style: none;
			 line-height: 35px; /* 设置行高 ,*/
			 width: 60px; /* 增加宽度*/
			 text-align: center;/* 文本水平居中对齐 */
		li:hover{
			color: #00FF00;
			background-color: #696969;
		</style>

这里需要强调下:

当li进行浮动时, 他的父容器即ul 必须设置 overflow:hidden, 撑开盒子的高度

在 CSS 中，overflow:hidden 属性用于控制元素的溢出部分如何处理，将其设为 hidden 时，超出元素所在框的部分将被隐藏，从而保证不会影响页面布局。

常见的应用场景有以下几个：

1.清除浮动：将父元素使用 overflow:hidden 属性包裹住所有浮动的子元素，可以清除浮动所导致的高度塌陷问题。

2.隐藏溢出文本：当一个元素设定了固定的宽度，但文本内容过多时导致溢出，此时设置 overflow:hidden 属性，可以实现隐藏溢出文本的效果。

3.图片裁剪：当图片显示过大时，也可以使用 overflow:hidden 属性来实现图片的裁剪效果。

需要注意的是，使用 overflow:hidden 属性可能会隐藏超出元素所在框的部分内容，因此需要根据实际需求合理使用该属性，并避免出现元素内容被截断的情况。