taobao的导航栏demo

原创 2019-01-04 17:19:59 342
摘要:<!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="">中国大陆&nbsp;></a></li>

<li ><a href="" style="color:#FF5000">亲,请登录&nbsp;</a></li>

<li><a href="">免费注册&nbsp;</a></li>

<li><a href="https://mpage.taobao.com/hd/download class=">手机逛淘宝&nbsp;</a></li>

</ul>

</div>

<div>

<ul>

<li><a href="#" onclick="on()">我的淘宝>>&nbsp;</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="">购物车>&nbsp;</a></li>

<li><a href="">收藏夹>&nbsp;</a></li>

<li><a href="">商品分类>&nbsp;</a></li>

<li><a href="">卖家中心>&nbsp;</a></li>

<li><a href="">联系客服>&nbsp;</a></li>

<li><a href="">网站导航>&nbsp;</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基本上不要用

发布手记

热门词条