5-2作业问题

首页课程实战体系课手记专栏慕课教程

5-2作业问题

来源：5-2 作业题

慕九州9265930

2018-05-07 11:28:47

<!doctype html>

<html>

<head>

</head>

<body>

<ul>

<li>

<a href="#" style="color:red;" class="loginlink" id="loginlink">亲，请登录</a>&nbsp &nbsp

</li>

<li>

<a href="">手机逛幕淘</a>

</li>

</ul>

</div>

<ul>

<li>

</div>

<a href="">已买到的宝贝</a>

</div>

</li>

<li>

</div>

<a href="">收藏的宝贝</a>

<a href="">收藏的店铺</a>

</div>

</li>

<li>

<div >

</div>

</li>

<li>

</div>

<a href="">已卖出的宝贝</a>

<a href="">已出售的宝贝</a>

</div>

</li>

<li>

</div>

<a href="">消费者客服</a>

</div>

</li>

</ul>

</div>

</div>

</div>

购物车中还没有商品，赶紧选购吧！

</div>

</ul>

</div>

<div>

</div>

<a href="">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="">网络机顶盒</a>

</div>

</div>

</div>

</div>

</div>

<a href="">滚筒式洗衣机</a>

<a href="">迷你洗衣机</a>

<a href="">洗烘一体机</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<ul>

</ul>

</div>

</a>

</a>

</a>

</a>

</a>

</div>

</div>

<div>

<ul>

</ul>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

</div>

</div>

<div>

</div>

</div>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

</div>

</div>

</div>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

</div>

</div>

</div>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

</div>

</div>

</div>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

</div>

</div>

</div>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

</div>

</div>

</div>

<input type="checkbox" name="autologin" value="autologin" checked="checked" "/> 下次自动登录&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

css文件中为

margin:0;

padding:0;

}

body{

font: 14px/1.5 "微软雅黑",Verdana,Tahoma,Arial,sans-serif,"宋体";

}

.itop{

width:100%;

height:40px;

background:#f3f5f7;

}

.itopinner{

width:1200px;

height:40px;

line-height:40px;

margin:0 auto;

font-size:12px;

}

a {

text-decoration: none;

color:#333;

}

li{

list-style: none;

}

.itop ul li{

display: block;

float:left;

}

.itopleft ul li{

margin-left:20px;

}

.itopright{

float:right;

position: relative;

z-index: 9999;

}

.itoprightmenu a{

display:block;

line-height: 28px;

}

.itopright ul li{

display: block;

margin-left:20px;

}

.itopright span{

position:absolute;

display:block;

margin-top:-37px;

margin-left:75px;

}

.itopright span img{

width:13px;

}

.itoprightcontent{

text-align:center;

}

/*登录框的样式*/

.layer-mask{

display: none;

width:100%;

height:100%;

left:0;

top:0;

position:fixed;

background:#000;

opacity: 0.5;

display: none;

z-index: 99999;

}

.layer-pop{

display: none;

width:400px;

height:400px;

background:#fff;

left:0;

top:0;

right:0;

bottom:0;

margin:auto;

position:fixed;

text-align:center;

z-index: 100000;

}

.layer-close{

float :right;

width:40px;

height: 40px;

text-align: center;

line-height: 40px;

border-radius: 50%;

}

.login{

margin-top:40px;

}

.login h4{

font-size:20px;

height:40px;

display: block;

margin-left:30px;

width:100px;

}

.login .input{

border:1px solid #ccc;

border-radius:3px;

padding:10px 5px;

width:300px;

}

.login .item{

margin:20px auto;

}

.login .submit{

background: #e40;

border:1px solid #e40;

padding:10px 5px;

width:300px;

color:#fff;

margin-left:-20px;

}

.login .error-msg{

color:#e40;

}

.item-autologin{

font-size:14px;

}

.loginimg img{

background:#333;

border-radius: 50%;

margin-left:15px;

}

.itoprightmenu{

display: none;

}

.itoprightcontent{

width:95px;

height:120px;

z-index: 9999;

}

.special{

display:block;

}

.logo{

width:100%;

height:100px;

background:pink;

}

.logocontent{

width:1200px;

height:100px;

margin:0 auto;

}

.logoimg, .logosearch,.shopping{

float:left;

margin-top:30px;

}

.shopping{

height:40px;

position:absolute;

margin-left:1050px;

width:150px;

background:red;

line-height:40px;

}

.shopping a{

color:#fff;

}

.logosearch{

position:absolute;

margin-left:280px;

}

.logosearch input{

width:650px;

height:35px;

}

.nav{

width:100%;

height:30px;

background:;

}

.logosearch span{

display:block;

background:black;

width:65px;

height:39px;

margin-left:652px;

margin-top:-39px;

color:#fff;

line-height:39px;

text-align:center;

}

.shop{

display: none;

}

.nav{

height:40px;

width:100%;

background:#07111b;

}

.nav a{

color:#fff;

}

.nav a:hover{

color:red;

}

.nav li{

float:left;

margin-left:50px;

}

.nav ul{

width:1200px;

margin-left:400px;

height:40px;

line-height:40px;

}

.bigbanner{

width:1200px;

height:550px;

margin:0 auto;

background:pink;

}

.shoplist, .banner, .life{

float:left;

}

/*商品分类区*/

.shoplist{

position:relative;

width:190px;

height:555px;

line-height:36px;

background-color:rgba(255,0,0 ,0.8) ;

text-indent: 1em;

color:#fff;

margin-top:-45px;

}

.shoplist ul span{

position:absolute;

margin-left:80px;

}

.shoplist ul{

position:absolute;

z-index: 99;

}

.shoplisttitle{

height:40px;

}

.shoplisttitle img{

margin-top:15px;

}

/*二级子菜单*/

.sub-menu {

border:1px solid #d9dde1;

background:#fff;

position: absolute;

left: 370px;

top: 180px;

width: 730px;

height:510px;

z-index: 581;

box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);

display: none;

}

.sub-inner-box{

width: 652px;

margin-left: 40px;

overflow: hidden;

z-index:999;

display: none;

}

.sub-row{

margin-top:25px;

}

.bold{

font-weight:700;

}

.ml10{

margin-left:10px;

}

.mr10{

margin-right:10px;

}

.menu-item{

color:#fff;

display: block;

width:50px

height:20px;

}

.sub-active{

display: block;

}

.hide{

display:block;

}

/*banner的图片轮播*/

.bannerbox{

width:700px;

height:510px;

overflow:hidden;

}

.banner{

width:700px;

height:510px;

position: relative;

margin:10px 10px 0px 10px ;

}

.banner-slide img{

width:700px;

height:500px;

}

.banner-slide{

width:700px;

height:510px;

background-repeat:no-repeat;

float:left;

display: none;

overflow: hidden;

}

.slide-active{

display:block;

}

.button{

position: absolute;

top: 50%;

overflow: hidden;

width: 40px;

height:30px;

}

.button img{

width:10px;

margin-left:10px;

margin-top:5px;

}

.prev{

margin-left:-680px;

}

.next{

margin-left:-50px;

}

.button:hover{

background-color:#333;

opacity: 0.8;

filter:alpha(opacity=80);

}

.dots {

position: absolute;

bottom: 0;

right: 0;

text-align: center;

padding-right: 24px;

line-height: 12px;

margin-right:270px;

margin-bottom:20px;

}

.dots span {

display: inline-block;

width: 12px;

height: 12px;

border-radius: 50%;

margin-left: 8px;

background-color: rgba(7, 17, 27, 0.4);

cursor: pointer;

box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;

}

.dots span .active{

box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;

background-color: #ffffff;

}

.life{

height: 500px;

position:absolute;

margin-left:900px;

margin-top:-500px;

width:300px;

background:#fff;

}

.mukuaibao{

width:292px;

text-indent:2em;

height:180px;

line-height:25px;

border: 1px solid #e0e0e0;

border-bottom:none;

}

.mukuaibaotitle{

height: 50px;

font-size:16px;

line-height: 50px;

color:red;

}

.mukuaibaotitle span{

display:block;

position: absolute;

margin-left:200px;

margin-top:-50px;

color:#333;

font-size:14px;

}

.iconimg{

height: 200px;

width:300px;

}

dl:nth-child(4n){

border-right:1px solid #e0e0e0;

}

.iconimg dl{

width:72px;

height:63px;

float:left;

border-top:1px solid #e0e0e0;

border-left:1px solid #e0e0e0;

text-align:center;

padding-top:15px;

}

.iconimg img{

width:20px;

height:20px;

}

.iconad img{

height: 80px;

width:292px;

}

/*1楼层*/

.onefloor{

width:1200px;

height: 40px;

margin:0 auto;

background:green;

}

.onefloorleft{

float: left;

height:40px;

}

.onefloorleft div{

float:left;

}

.onefloorleft div:first-child{

border:1px solid black;

border-radius: 50%;

color:#fff;

background:black;

font-size:10px;

padding:3px;

}

.onefloorleft div:nth-child(2){

font-size:20px;

font-weight: bolder;

margin-left:15px;

}

.onefloorright{

float:right;

margin-right:10px;

}

.hr{

width:1200px;

margin:0 auto;

border:1px solid red

}

.oneflooradbox{

width:1200px;

text-align: center;

position: relative;

}

.onefloorad{

width:1200px;

height:500px;

margin:0 auto;

margin-top:15px;

}

.onefloorad dl{

text-align:center;

float:left;

width:197px;

height:210px;

margin:0 auto;

}

js文件中为

$(document).ready(function(){

// 登录链接事件

// $("#loginlink").click(function(){

// // 显示弹出层遮罩

//$("#layer-mask").show();

// // 显示弹出层窗体

// $("#layer-pop").show();

// $(".login .title").css({'color':'red',

// 'border-bottom':'2px solid red'});

// // 弹出层关闭按钮绑定事件

// $("#layer-close").click(function(){

// // 弹出层关闭

// $("#layer-mask").hide();

// $("#layer-pop").hide();

// });

//});

//注册连接事件

//});

// 登录链接事件

$("#loginlink").click(function(){

// 获取登录窗体代码

var loginHtml = $("#loginHtml").html();

showLayer(loginHtml,400,400,closeCallback);

// 登录表单校验

$("#loginSubmitBtn").click(function(){

var username = $("input[name='username']").val();

var password = $("input[name='password']").val();

if(username === 'imooc' && password === 'imooc'){

alert("登录成功");

}else{

$(".error-msg").html("账号或密码输入错误");

}

});

// 注册链接事件

$("#regelink").click(function(){

// 获取注册窗体代码

var regeHtml = $("#regeHtml").html();

showLayer(regeHtml,400,400,closeCallback);

// 注册表单校验

$("#regeSubmitBtn").click(function(){

var username = $("input[name='username']").val();

var password = $("input[name='password']").val();

var repassword = $("input[name='repassword']").val();

if(username === 'imooc' && password === 'imooc' && repassword === password){

alert("注册成功");

}else{

$(".error-msg").html("账号或密码输入错误");

}

});

// 弹出层关闭回调函数

function closeCallback(){

$(".error-msg").html("");

}

// 显示弹出层

function showLayer(html,width,height,closeCallback){

// 显示弹出层遮罩

$("#layer-mask").show();

// 显示弹出层窗体

$("#layer-pop").show();

// 设置弹出层窗体样式

$("#layer-pop").css({

width : width,

height : height

});

// 填充弹出层窗体内容

$("#layer-content").html(html);

// 弹出层关闭按钮绑定事件

$("#layer-close").click(function(){

// 弹出层关闭

hideLayer();

// 关闭的回调函数

closeCallback();

});

}

// 隐藏弹出层

function hideLayer(){

// 弹出层关闭

$("#layer-mask").hide();

$("#layer-pop").hide();

}

//top右侧的导航项

var itoprighttitle=$('.itoprighttitle'),

itoprightmenu=$('.itoprightmenu'),

index=0,

itoprightcontent=$('.itoprightcontent');

for(var i=0,len=itoprightcontent.length;i<len;i++){

itoprighttitle.eq(i).attr('dataIndex',i);

itoprighttitle.eq(i).mouseover(function(){

itoprightmenu.css('display','block');

var idx=$(this).attr('dataIndex');

for(var i=0,len=itoprightcontent.length;i<len;i++){

itoprightmenu.eq(i).hide();

itoprightcontent.eq(i).css('background',"none");

}

itoprightmenu.eq(idx).show();

itoprightcontent.eq(idx).css('background',"#fff");

});

itoprighttitle.eq(i).mouseout(function(){

itoprightmenu.css('display','none');

itoprightcontent.css('background',"none");

})

}

//购物车

var interval1;

$("#shoptext").mouseenter(function(){

// clearTimeout(interval1);

// $(this).children().first().css({"color":"#ff6700","background":"#fff"});

// $(this).children().last().stop(true,true).slideDown();

$('.shop').css('display','block');

}).mouseleave(function(){

// var self = $(this);

// interval1 = setTimeout(function(){

// self.children().first().removeAttr("style");

// },700);

// $(this).children().last().delay(200).slideUp();

$('.shop').css('display','none');

});

var prev=$(".prev");//获取上一张按钮

var next=$(".next");//获取下一张按钮

var pics=$('.banner-slide');//获取一共有几张图片,图片的集合

var len=pics.length;//pics类数组的长度

var index = 0;//需要一个为图片索引的变量,因为图片是靠索引来切换的！

//1.绑定点击下一张的事件

next.click(function(){

//1.1 让index+1，还要做一个判断如果是最后一张图片就归0；

index++;

if(index >= len){

index=0;

}

//console.log(index);

changeImg();//调用切换图片函数；

});

//2.绑定点击上一张的事件

prev.click(function(){

//2.1 让index-1，还要做一个判断如果是第一张图片就换到最后一张；

index--;

if(index<0){

index=len-1;

}changeImg();

//console.log(index);

//调用切换图片函数；

});

//4.遍历所有圆点，然后给每个圆点绑定点击事件

$('.dots>span').each(function(suoyin){

$(this).click(function(){

index = suoyin;

changeImg(index);

console.log(this);

});

})

//5.自动轮播

var timeId = setInterval(function(){//把定时器装到timeId里方便等下清楚

next.click();//每隔两秒，调用下一张按钮事件

},2000);

//5.1鼠标经过轮播图的时候，清楚定时器

$('.banner').mouseenter(function(){

clearInterval(timeId);

});

//5.2鼠标离开轮播图的时候，重新开始定时器

$('.banner').mouseleave(function(){

timeId = setInterval(function(){

next.click();//每个两秒，调用下一张按钮事件

},2000);

});

//3.切换图片

function changeImg(){

$('.banner-slide').removeClass("slide-active");//把所有图片都隐藏

$('.dots>span').removeClass('active');//把所有当前小圆点隐藏

pics.eq(index).addClass('slide-active');//点击哪张得索引显示那张

$('.dots>span').eq(index).addClass('active');//点击那个那个显示

}

//banner上的子菜单的显示

var menuItems = $('.menu-item'),

subInnerBox = $('.inner-box');

for(var m=0; m<menuItems.length; m++){

menuItems.eq(m).attr('dataIndex',m);

menuItems.eq(m).mouseover(function(){

$('.sub-menu').css('display','block');

$('.sub-active').removeClass("sub-active");

var idx = $(this).attr('dataIndex');

$('.sub-menu').find('.sub-inner-box').eq(idx).addClass("sub-active")

});

}

$('.menus').mouseout(function(){

var isForcusSubMenus = $(".sub-menu").is(":focus");

if(!isForcusSubMenus){

}

$('.sub-menu').css('display','none');

});

/**

$('.sub-menu').mouseout(function(){

$('.sub-menu').css('display','none');

});

**/

});

划过购物车时，购物车显示不出来？还有banner区的二级菜单也不能完全实现，请帮我看下，谢谢！

写回答

1回答

好帮手慕糖

2018-05-07

你好，如下，1、购物车这里不能实现是由于上面部分.itoprightcontent设置的高度，把是遮盖了，可以把高度去掉，或者调整下层级。

2、banner区域这块，如下，宽度后面缺少分号，导致宽度与高度都没有生效。添加分号之后，要把位置再调整下哦。

祝学习愉快~

0 学习 · 36712 问题

查看课程

相似问题

关于5-2的作业题

回答 1

5-2作业题

回答 2

5-2作业问题

回答 1

5-2作业问题

回答 2

5-2作业求救

回答 4

打开慕课网App查看更多内容