HTML+Css模仿小米商城左侧菜单

最新推荐文章于 2023-10-17 17:30:11 发布

异想实验室

最新推荐文章于 2023-10-17 17:30:11 发布

阅读量1k

点赞数 1

分类专栏： HTML 文章标签： html css 前端

异想实验室

本文链接：https://blog.csdn.net/weixin_43775400/article/details/123194122

版权

本文展示了如何利用HTML和CSS技术模仿小米商城的左侧菜单效果，提供了相关代码及实现后的展示。

摘要由CSDN通过智能技术生成

小米商城菜单效果：

HTML+css代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模仿小米商城-左侧菜单栏</title>		
		<style>		
		a{
			/* 转换成块元素 */
			display: block;
			color: #ffffff;
			/* 取消链接的下划线 */
			text-decoration: none;
			width: 230px;
			height: 40px;
			font-size: 14px;
			/* 将行高设置为元素的高度，这样文字就可以垂直居中 */
			line-height: 40px;
			background-color:#757575 ;
			/* 设置行内缩进2em，也就是两个文字的宽度，防止文字靠左贴边 */
			text-indent: 2em;			
		}		
		a:hover{
			/* 鼠标经过后背景颜色 */
			background-color:  #ff6700;
		}		
		</style>

	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank">移动手机</a>
		<a href="http://www.baidu.com" target&#