本周主要学习js并练习制作小米官网
<body>
<div class="w" >
<div class="nav ">
<ul>
<li ><a href="#">小米商城</a></li>
<li><a href="#">MIUI</a></li>
<li><a href="#">loT</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></li>
<li><a href="#">资质证照</a></li>
<li><a href="#">协议规则</a></li>
<li id = dw><a href="#">下载app</a>
<div class="download">
<a href="#"> <img src="images/78c30d4f259ed43ab20e810a522a6249.png" width="90px"></a>
<br>小米商城
</div>
<script>//下载下拉菜单
var download = document.getElementById('dw');
var lis2 = document.querySelector('.download');
download.onmouseover = function () {
lis2.style.display = 'block';
}
download.onmouseout = function () {
lis2.style.display = ' none';
}
</script>
</li>
<li><a href="#">Select location</a></li>
<div class="shop">
<ul>
<li class="shoppingcart">购物车(0)
<ul>
<div style="color:black">
暂无商品
</div>
</ul>
</li>
</ul>
<script>//购物车下拉菜单
var shoppingcart = document.querySelector('.shoppingcart');
var lis = document.querySelector('.shoppingcart').querySelector('ul').querySelector('div');
shoppingcart.onmouseover = function () {
lis.style.display = 'block';
}
shoppingcart.onmouseout = function () {
lis.style.display = ' none';
}
</script>
</div>
<div class="login">
<ul>
<li>登录</li>
<li>注册</li>
<li>消息通知</li>
</ul>
</div>
</ul>
<br>
</div>
<div class="nav2 ">
<div class="logo"><img src="images/小米官网.png" width="55px"></div>
<ul>
<li class="">Xiaomi手机</li>
<li class="">Redmi红米</li>
<li class="">电视</li>
<li class="">笔记本</li>
<li class="">平板</li>
<li class="">家电</li>
<li class="">路由器</li>
<li class="">服务</li>
<li class="">社区</li>
</ul>
<script>//nav2的变色效果
var nav2 = document.querySelector('.nav2');
var lis3 = nav2.querySelectorAll('li');
for(var i = 0;i<lis3.length;i++){
lis3[i].οnmοuseοver=function(){
for(var i = 0 ;i<lis3.length;i++){
lis3[i].className = '';
}
this.className = "current";
}
}
</script>
<div class="search">
<input type="text">
</div>
</div>
<div class="tab-con">
<div class="item" style ="display:block" >
<br>
<ul>
<li> 小米12pro</li>
<li> 小米12</li>
<li> 小米12x</li>
<li>小米11青春活力版</li>
<li> 小米civi</li>
<li> 小米mix4</li>
</ul>
</div>
</div>
3887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
