educoder头歌Web实训 web课——综合应用案例：商城下拉菜单的制作

玛卡巴卡

已于 2022-01-23 14:27:17 修改

阅读量1.4k

点赞数 7

分类专栏： web 文章标签：前端 css vue.js 太原理工大学 educoder

于 2022-01-07 23:37:39 首次发布

本文链接：https://blog.csdn.net/weixin_51538341/article/details/122367271

版权

JavaScript CSS HTML 下拉菜单事件处理

关键词由CSDN通过智能技术生成

web 专栏收录该内容

24 篇文章 28 订阅

订阅专栏

educoder实训太原理工大学web课程————JavaScript对象：字符串_玛卡巴卡的博客-CSDN博客

商城下拉菜单的制作

任务描述

本关任务：实现对a标签字体背景颜色的修改，要求颜色型号（#06F）。选择鼠标指针浮动在a标签上的颜色样式，要求颜色样式（#FF3）。

相关知识

为了完成本关任务，你需要掌握：a标签样式设置

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商城下拉菜单</title>
<!-- ********* Begin ********* -->
<style type="text/css">
*{margin:0; padding:0; list-style:none; border:none; color:#fff;}
a:link,a:visited{text-decoration:none;}
/* ********* Begin ********* */
/* ********* End ********* */
#bg{
	width:600px;
	margin:30px auto;
}
a:hover{color:#FF3;}
a{  background:#06F;
	width:150px;
	height:36px;
	display:inline-block;
	text-align:center;
	line-height:36px;
	/* ********* Begin ********* */
    /* ********* End ********* */

	}
li{float:left;}
#dis li{clear:left; margin-top:1px;}
</style>
<!-- ********* End ********* -->
</head>
<body>
<ul id="bg">
	<li><a href="#">服装鞋帽</a></li>
    <li id="btn">
        <a href="#">数码家电</a>
        <ul id="dis">
            <li><a href="#">手机/对讲机</a></li>
            <li><a href="#">电脑/路由器</a></li>
            <li><a href="#">音响/麦克风</a></li>
        </ul>
    </li>
    <li><a href="#">话费充值</a></li>
    <li><a href="#">母婴用品</a></li>
</ul>
</body>
</html>

第2关：商城下拉菜单鼠标事件的应用

任务描述

本关任务：补充函数完成鼠标事件实现下拉菜单功能

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商城下拉菜单</title>
<style type="text/css">
*{margin:0; padding:0; list-style:none; border:none; color:#fff;}
a:hover{color:#FF3;}
a:link,a:visited{text-decoration:none;}
#bg{
	width:600px;
	margin:30px auto;
}
a{
	width:150px;
	height:36px;
	display:inline-block;
	text-align:center;
	line-height:36px;
	background:#06F;
	}
li{float:left;}
#dis li{clear:left; margin-top:1px;}
</style>
</head>
<body>
<ul id="bg">
	<li><a href="#">服装鞋帽</a></li>
    <li id="btn">
        <a href="#">数码家电</a>
        <ul id="dis">
            <li><a href="#">手机/对讲机</a></li>
            <li><a href="#">电脑/路由器</a></li>
            <li><a href="#">音响/麦克风</a></li>
        </ul>
    </li>
    <li><a href="#">话费充值</a></li>
    <li><a href="#">母婴用品</a></li>
</ul>
<script type="text/javascript">
    /* ********* Begin ********* */
	var btn=document.getElementById('btn');
	var dis=document.getElementById('dis');
	/* ********* End ********* */
	btn.onmouseover=function(){dis.style.display='block';
		/* ********* Begin ********* */
		/* ********* End ********* */
	}
	btn.onmouseout=function(){dis.style.display='none';
		/* ********* Begin ********* */
		/* ********* End ********* */
	}
</script>
</body>
</html>

玛卡巴卡

关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
educoder头歌Web实训 web课——综合应用案例：商城下拉菜单的制作

商城下拉菜单的制作任务描述本关任务：实现对a标签字体背景颜色的修改，要求颜色型号（#06F）。选择鼠标指针浮动在a标签上的颜色样式，要求颜色样式（#FF3）。相关知识为了完成本关任务，你需要掌握：a标签样式设置 <!doctype html><html><head><meta charset="utf-8"><title>商城下拉菜单</title&g...
复制链接

扫一扫