作业7-仿京东左侧页面

最新推荐文章于 2024-07-23 17:22:52 发布

时刻的慌张

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量5.8k

点赞数 5

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

版权

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

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


<!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>
			</

最低0.47元/天解锁文章

时刻的慌张

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
作业7-仿京东左侧页面

&lt;!doctype html&gt;&lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;仿京东左侧菜单&lt;/title&gt; &lt;style&gt; *{padding:0;margin:0;}a{text-decor
复制链接

扫一扫