0
点赞
收藏
分享

微信扫一扫

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

金穗_ec4b 2022-03-10 阅读 35

小米商城菜单效果:

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="_blank">家庭电视</a>
		<a href="http://www.baidu.com" target="_blank">笔记本 平板</a>
		<a href="http://www.baidu.com" target="_blank">家用电器</a>
		<a href="http://www.baidu.com" target="_blank">出行 穿戴</a>
		<a href="http://www.baidu.com" target="_blank">电源 配件</a>
		<a href="http://www.baidu.com" target="_blank">耳机 音箱</a>
		<a href="http://www.baidu.com" target="_blank">健康 儿童</a>
		<a href="http://www.baidu.com" target="_blank">生活 箱包</a>	
	</body>
</html>

 实现效果:

 

举报

相关推荐

0 条评论