摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>taobao</title><!-- <link rel="stylesheet" type="text/css" href=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>taobao</title>
<!-- <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css"> -->
<!-- 这个font-awesome.min.css 作业没办法linK本地的资源-->
<style>
*{
margin:0px;
padding: 0px;
font-size: 13px;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
a:hover{
color:#FF5000;
}
.nav{ /*设置总导航栏*/
width: 1280px;
background: #F5F5F5;
margin:0 auto;
}
.left{ /*导航栏左边部分*/
float: left;
}
.left ul li{
float: left;
height: 40px;
width: 90px;
/* background: pink;*/
margin-left: 5px;
line-height: 40px;
text-align: center;
}
.right{ /*导航栏右边部分*/
float: right;
}
.right ul li{
float: left;
height: 40px;
width: 90px;
/* background: pink;*/
/*margin-left: 10px;*/
margin-right:5px;
line-height: 40px;
text-align: center;
}
.r_div{ /*点击下拉部分*/
width: 300px;
height: 300px;
background: #ccc;
display: none;
}
.r_div div{ /*点击下来的内容*/
width: 100px;
height: 100px;
background: pink;
float: left;
margin-left: 33px;
margin-top: 33px;
}
.r_div div a{
}
.hov{ /*鼠标悬浮下拉部分*/
margin-right:30px;
display: none;
}
.hh:hover .hov{
display: block;
}
.hov li{
float: left;
height: 90px;
}
.hov li:hover{ /*下拉部分的li hover的背景*/
background-color:#ccc;
}
.hov a{
text-align: left;
}
</style>
</head>
<body>
<div>
<div>
<ul>
<li><a href="">中国大陆 ></a></li>
<li ><a href="" style="color:#FF5000">亲,请登录 </a></li>
<li><a href="">免费注册 </a></li>
<li><a href="https://mpage.taobao.com/hd/download class=">手机逛淘宝 </a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#" onclick="on()">我的淘宝>> </a> <!-- 创建点击下拉事件,本来想点一下展开,再点一下收起,不懂怎么写 囧rz 老师看到可以帮我解答一下-->
<div id="di">
<a href="http://www.php.cn"><div>已买到的商品</div></a>
<a href=""><div>我的足迹</div></a> <!-- 此处四个div应该是放图片做点击的 -->
<a href=""><div>我的上新</div></a>
<a href=""><div>逛街</div></a>
</div>
</li>
<li><a href="">购物车> </a></li>
<li><a href="">收藏夹> </a></li>
<li><a href="">商品分类> </a></li>
<li><a href="">卖家中心> </a></li>
<li><a href="">联系客服> </a></li>
<li><a href="">网站导航> </a>
<ul>
<li><a href="#">wode</a></li>
<li><a href="#">wode</a></li>
<li><a href="#">wode</a></li>
<li><a href="#">wode</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
var onc;
window.onload=function (){
onc=document.getElementById("di")
}
function on(){
onc.style.display="block";
}
</script>
</body>
</html>
批改老师:天蓬老师批改时间:2019-01-04 17:57:35
老师总结:在样式表中, 标签选择器,尽量少用或不用, id基本上不要用