效果图
效果为 鼠标悬停时, 文字增加背景色同时更改文字颜色
html页面
在hbuilder中任意创建一个文件,例如 demo.html
本效果需要使用到 css 中的 float 及 伪类样式
在 CSS 中,float 属性用于指定元素相对于父元素的左右浮动方向。当元素设为 float 后,元素将会脱离文档标准流(normal flow),并根据指定的浮动方向,尽可能地靠左或靠右排列。
常见的 float 属性取值有 left、right 和 none。left 表示元素浮动到左侧,right 表示元素浮动到右侧, none 表示取消浮动或恢复浮动之前的默认设置。
在进行 float 设计时,需要特别注意以下几点:
1.浮动元素会对后面几个元素的布局产生影响,因此需要注意设置好清除浮动。
2.不建议将浮动元素用于布局,因为浮动元素不能撑开父容器,会产生一些布局问题,建议使用 flexbox、grid 等布局方式。
3.在设置浮动属性时,需要结合其他属性一起使用,如清除浮动等。
代码如下:
<body>
<div>
<ul>
<li>新闻</li>
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
<li>新闻5</li>
<li>新闻6</li>
</ul>
</div>
</body>
此页面直接运行效果如下:
但 此页面距离效果图 还有一定的差距, 因此需要使用css 来进行美化
css代码
在当前demo.html 中 增加 <style></style>标签
<style>
ul{
overflow: hidden;
}
li{
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 属性可能会隐藏超出元素所在框的部分内容,因此需要根据实际需求合理使用该属性,并避免出现元素内容被截断的情况。