作业7-仿京东左侧页面

最新推荐文章于 2024-06-04 12:45:46 发布

时刻的慌张

最新推荐文章于 2024-06-04 12:45:46 发布

阅读量6k

点赞数 5

本文链接：https://blog.csdn.net/hcl430422hcl/article/details/87177435

版权

本文档详细介绍了如何仿照京东网站设计并实现左侧的导航菜单。内容包括菜单的布局、样式设置以及交互效果，旨在帮助开发者提升前端页面制作能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!doctype html>
<html>
 <head lang="en">
  <meta charset="UTF-8">
  <title>仿京东左侧菜单</title>
 <style>
 	*{padding:0;margin:0;}
a{text-decoration:none;}
.nav-box{
	width:210px;
	margin:5px 0 0 5px;
}
.nav-top a{
	display:block;
	height:45px;
	font-size:16px;
	line-height:45px;
	padding:0 10px;
	background:#B1191A;
	color:#fff;
}
ul{background:#c81623;list-style:none;padding-bottom:1px;}
ul li{
	height:30px;

	line-height:30px;
	font-size:14px;
	color:#fff;
	position:relative;
	padding-left: 5px;
}
ul li a{color:#fff;}
ul li div{display:none; position: absolute; left: 211px; top:0px;}
 </style>
 </head>
 <body>
	<div class="nav-box">
		<div class="nav-top"><a href="">全部商品分类</a></div>
		<ul>
			<li>
				<a href="">家用电器</a><div><img src="img/erji.jpg"/></div>
			</