京东左侧导航栏

最新推荐文章于 2022-07-09 15:22:20 发布

章若楠不打代码

最新推荐文章于 2022-07-09 15:22:20 发布

阅读量208

点赞数 3

文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/weixin_54373729/article/details/121484806

版权

<!DOCTYPE>
<html>
	<head>
		<title>test2</title>
		<meta charset="utf-8">
		<style>
		*{
			margin=0;
			padding=0;
		}/* 初始化格式 */
		.XY{
			width:190px;
			height:450px;
			background-color: whitesmoke;
			padding:10px 0;
			margin:50px auto;/* 样品居中 */
		}
		.XY .LDD{
			height:25px;/* 小块div区高度 */
			line-height:25px;/* 与height相同，可使文字在小块div区垂直方向居中 */
			padding-left:18px;
			font-size:14px;
		}
		.XY a{
			text-decoration:none ;/* 去除链接下划线 */
			color:#333;
		}
		span{/* span标签块内间距 */
			padding:2px;
			font-size: 12px;
		}
		.XY .LDD:hover{/* 每小块div区悬停颜色 */
			background-color:#d9d9d9;
		}
		.XY a:hover{/* 链接悬停颜色 */
			color: red;
		}
		</style>
	</head>
	<body>
		<nav class="XY"><!-- 设置包装 -->
			<div class="LDD"><a href="#">家用电器</a></div>
			<div class="LDD"><a href="#">手机</a><span>/</span><a href="#">运营商</a><span>/</span><a href="#">数码</a></div>
			<div class="LDD"><a href="#">电脑</a><span>/</span><a href="#">办公</a></div>
			<div class="LDD"><a href="#">家居</a><span>/</span><a href="#">家具</a><span>/</span><a href="#">家装</a><span>/</span><a href="#">厨具</a></div>
			<div class="LDD"><a href="#">男装</a><span>/</span><a href="#">女装</a><span>/</span><a href="#">童装</a><span>/</span><a href="#">内衣</a></div>
			<div class="LDD"><a href="#">美妆</a><span>/</span><a href="#">个护清洁</a><span>/</span><a href="#">宠物</a></div>
			<div class="LDD"><a href="#">女鞋</a><span>/</span><a href="#">箱包</a><span>/</span><a href="#">钟表</a><a href="#">珠宝</a></div>
			<div class="LDD"><a href="#">男鞋</a><span>/</span><a href="#">运动</a><span>/</span><a href="#">户外</a></div>
			<div class="LDD"><a href="#">房产</a><span>/</span><a href="#">汽车</a><span>/</span><a href="#">汽车用品</a></div>
			<div class="LDD"><a href="#">母婴</a><span>/</span><a href="#">玩具乐器</a></div>
			<div class="LDD"><a href="#">食品</a><span>/</span><a href="#">酒类</a><span>/</span><a href="#">生鲜</a><span>/</span><a href="#">特产</a></div>
			<div class="LDD"><a href="#">艺术</a><span>/</span><a href="#">礼品鲜花</a><span>/</span><a href="#">农资绿植</a></div>
			<div class="LDD"><a href="#">医药保健</a><span>/</span><a href="#">计生情趣</a></div>
			<div class="LDD"><a href="#">图书</a><span>/</span><a href="#">文娱</a><span>/</span><a href="#">电子书</a></div>
			<div class="LDD"><a href="#">机票</a><span>/</span><a href="#">酒店</a><span>/</span><a href="#">旅游</a><span>/</span><a href="#">生活</a></div>
			<div class="LDD"><a href="#">理财</a><span>/</span><a href="#">众筹</a><span>/</span><a href="#">白条</a><span>/</span><a href="#">保险</a></div>
			<div class="LDD"><a href="#">安装</a><span>/</span><a href="#">维修</a><span>/</span><a href="#">清洗</a><span>/</span><a href="#">二手</a></div>
			<div class="LDD"><a href="#">工业品</a></div>
</html>