京东左侧导航条练习

sunhuachao123

已于 2022-06-17 10:01:01 修改

阅读量71

点赞数

分类专栏： HTML5 CSS3 文章标签： css css3 html

于 2022-06-17 09:55:47 首次发布

本文链接：https://blog.csdn.net/sunhuachao123/article/details/125327992

版权

京东左侧导航条练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东左侧导航条</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<style type="text/css">
		body{
     
			background-color:#f4f4f4 ;
		}
		.jd_navigiton{
     
			width: 190px;
			height: 470px;
			overflow: hidden;
			padding-top: 10px;
			margin: 100px auto;
			background-color: white;
		}
		a{
     
			color: #333;
			font-size: 14px;
				/* 去除下划线 */
			text-decoration: none;
		}
		a:hover{
     
			color: #ce5b64;

		}
		li{
     
			height:  25px;+
			/* 让文字垂直居中只需要将父元素line-height设置为和父元素height一样高度即可 */
			line-height: 25px;
			padding: 0px 18px;
		}	
		li:hover{
     
			background-color:#dcdcdc ;
			
		}
		span{
     
			padding-left:2px;
		}
		</style>
	</head>
	<body>
		<ul class="jd_navigiton">
			<li><a href="#">家用电器</a></li>
			<li><a href="#">手机</a><span>/</span>