Nearth---001/下拉菜单参考代码学习

最新推荐文章于 2021-02-17 18:04:19 发布

码字界陈冠希

最新推荐文章于 2021-02-17 18:04:19 发布

阅读量134

点赞数

分类专栏：简易模拟京东超市

本文链接：https://blog.csdn.net/ly1716/article/details/103063366

版权

简易模拟京东超市专栏收录该内容

2 篇文章 1 订阅

订阅专栏

模仿网址：https://chaoshi.jd.com/（点击即可到达，参考页面布局）

模仿的部分图片：

参考代码学习模仿：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nearth</title>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin:0px;
				padding: 0px;
				background-color: aquamarine;
			}
			ul{
				list-style: none;
			}
			.cls{
				width:330px;
				height:30px;
				margin:100px auto 0;
				padding-left:10px;
				
			}
			.cls ul li{
				float:10px;
				margin-right:10px;
				position: relative;
			}
			.cls a{
				display: block;
				height:30px;
				width:100px;
				text-decoration: none;
				color:#000;
				line-height:30px;
				text-align: center;
				float:left;
			}
			.cls li ul{
				position: absolute;
				top:30px;
				display: none;
			}
			img{
				height: 300px;
				width:300px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$(".cls>ul>li").mouseover(function(){
					$(this).children("ul").stop().show(500);
				});
				$(".cls>ul>li").mouseout(function(){
					$(this).children("ul").stop().hide(500);
				});
			})
		</script>
	</head>
	<body>
		<h1>下拉菜单栏案列</h1>
		<hr >
		<div class="cls">
			<ul>
				<li>
					<a href="javascript:void(0);">帅哥系列</a>
					<ul>
						<li><a href="javascript:void(0)"><img src="1.jpg" ></a></li>
					</ul>
				</li>
				<li>
					<a href="javascript:void(0);">美女系列</a>
					<ul>
						<li><a href="javascript:void(0)"><img src="2.jpg" ></a></li>
					</ul>
				</li>
				<li>
					<a href="javascript:void(0);">渣男腐女</a>
					<ul>
						<li><a href="javascript:void(0)"><img src="3.jpg" ></a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

把整体的每一个功能做出来，然后合并···············································

码字界陈冠希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Nearth---001/下拉菜单参考代码学习

模仿网址：https://chaoshi.jd.com/（点击即可到达，参考页面布局）模仿的部分图片：参考代码学习模仿：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Nearth</title> <script...
复制链接

扫一扫