educoder头歌Web实训 太原理工web课——综合应用案例：商城下拉菜单的制作[全网更新最快]
Posted 玛卡巴卡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了educoder头歌Web实训 太原理工web课——综合应用案例：商城下拉菜单的制作[全网更新最快]相关的知识，希望对你有一定的参考价值。
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:visitedtext-decoration:none;
/* ********* Begin ********* */
/* ********* End ********* */
#bg
width:600px;
margin:30px auto;
a:hovercolor:#FF3;
a background:#06F;
width:150px;
height:36px;
display:inline-block;
text-align:center;
line-height:36px;
/* ********* Begin ********* */
/* ********* End ********* */
lifloat:left;
#dis liclear: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:hovercolor:#FF3;
a:link,a:visitedtext-decoration:none;
#bg
width:600px;
margin:30px auto;
a
width:150px;
height:36px;
display:inline-block;
text-align:center;
line-height:36px;
background:#06F;
lifloat:left;
#dis liclear: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>
以上是关于educoder头歌Web实训 太原理工web课——综合应用案例：商城下拉菜单的制作[全网更新最快]的主要内容，如果未能解决你的问题，请参考以下文章
educoder头歌Web实训 太原理工web课——综合应用案例：商城下拉菜单的制作[全网更新最快]
educoder头歌实训 太原理工大学web课程————JavaScript对象：数组
educoder头歌实训 太原理工大学web课程————JavaScript对象：Math日期