帮我检查一下代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="main" id="main"> <!-- 主菜单遮罩盒子 --> <div class="menu-box"> </div> <!-- 主菜单盒子 --> <ul class="menu-content" id="menu-content"> <li class="menu-item"> <a href="#"> <span>手机、配件</span> <i class="icon"></i> </a> </li> <li class="menu-item"> <a href="#"> <span>电脑</span> <i class="icon"></i> </a> </li> <li class="menu-item"> <a href="#"> <span>家用电器</span> <i class="icon"></i> </a> </li> <li class="menu-item"> <a href="#"> <span>家具</span> <i class="icon"></i> </a> </li> </ul> <!-- 二级菜单 --> <div class="sub-menu hide" id="sub-menu"> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">手机、配件</div> <div class="sub-row"> <span class="bold mr10">手机通讯：</span> <a href="">手机</a> <span class="ml10 mr10">/</span> <a href="">手机维修</a> <span class="ml10 mr10">/</span> <a href="">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件：</span> <a href="">手机壳</a> <span class="ml10 mr10">/</span> <a href="">手机存储卡</a> <span class="ml10 mr10">/</span> <a href="">数据线</a> <span class="ml10 mr10">/</span> <a href="">充电器</a> <span class="ml10 mr10">/</span> <a href="">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商：</span> <a href="">中国联通</a> <span class="ml10 mr10">/</span> <a href="">中国移动</a> <span class="ml10 mr10">/</span> <a href="">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备：</span> <a href="">智能手环</a> <span class="ml10 mr10">/</span> <a href="">智能家居</a> <span class="ml10 mr10">/</span> <a href="">智能手表</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐：</span> <a href="">耳机</a> <span class="ml10 mr10">/</span> <a href="">音响</a> <span class="ml10 mr10">/</span> <a href="">收音机</a> <span class="ml10 mr10">/</span> <a href="">麦克风</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">电脑</div> <div class="sub-row"> <span class="bold mr10">电脑：</span> <a href="">笔记本</a> <span class="ml10 mr10">/</span> <a href="">平板</a> <span class="ml10 mr10">/</span> <a href="">一体机</a> </div> <div class="sub-row"> <span class="bold mr10">电脑配件：</span> <a href="">显示器</a> <span class="ml10 mr10">/</span> <a href="">CPU</a> <span class="ml10 mr10">/</span> <a href="">主板</a> <span class="ml10 mr10">/</span> <a href="">硬盘</a> <span class="ml10 mr10">/</span> <a href="">电源</a> <span class="ml10 mr10">/</span> <a href="">显卡</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">游戏设备：</span> <a href="">游戏机</a> <span class="ml10 mr10">/</span> <a href="">耳机</a> <span class="ml10 mr10">/</span> <a href="">游戏软件</a> </div> <div class="sub-row"> <span class="bold mr10">网络产品：</span> <a href="">路由器</a> <span class="ml10 mr10">/</span> <a href="">网络机顶盒</a> <span class="ml10 mr10">/</span> <a href="">交换机</a> <span class="ml10 mr10">/</span> <a href="">存储卡</a> <span class="ml10 mr10">/</span> <a href="">网卡</a> </div> <div class="sub-row"> <span class="bold mr10">外部产品：</span> <a href="">鼠标</a> <span class="ml10 mr10">/</span> <a href="">键盘</a> <span class="ml10 mr10">/</span> <a href="">U盘</a> <span class="ml10 mr10">/</span> <a href="">移动硬盘</a> <span class="ml10 mr10">/</span> <a href="">鼠标垫</a> <span class="ml10 mr10">/</span> <a href="">电脑清洁</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">家用电器</div> <div class="sub-row"> <span class="bold mr10">电视：</span> <a href="">国产品牌</a> <span class="ml10 mr10">/</span> <a href="">韩国品牌</a> <span class="ml10 mr10">/</span> <a href="">欧美品牌</a> </div> <div class="sub-row"> <span class="bold mr10">空调：</span> <a href="">显示器</a> <span class="ml10 mr10">/</span> <a href="">柜式</a> <span class="ml10 mr10">/</span> <a href="">中央</a> <span class="ml10 mr10">/</span> <a href="">壁挂式</a> </div> <div class="sub-row"> <span class="bold mr10">冰箱：</span> <a href="">多门</a> <span class="ml10 mr10">/</span> <a href="">对开门</a> <span class="ml10 mr10">/</span> <a href="">三门</a> <span class="ml10 mr10">/</span> <a href="">双门</a> </div> <div class="sub-row"> <span class="bold mr10">洗衣机：</span> <a href="">滚筒式洗衣机</a> <span class="ml10 mr10">/</span> <a href="">迷你洗衣机</a> <span class="ml10 mr10">/</span> <a href="">洗烘一体机</a> </div> <div class="sub-row"> <span class="bold mr10">厨房电器：</span> <a href="">油烟机</a> <span class="ml10 mr10">/</span> <a href="">洗碗机</a> <span class="ml10 mr10">/</span> <a href="">燃气灶</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">家具</div> <div class="sub-row"> <span class="bold mr10">家纺：</span> <a href="">被子</a> <span class="ml10 mr10">/</span> <a href="">枕头</a> <span class="ml10 mr10">/</span> <a href="">四件套</a> <span class="ml10 mr10">/</span> <a href="">床垫</a> </div> <div class="sub-row"> <span class="bold mr10">灯具：</span> <a href="">台灯</a> <span class="ml10 mr10">/</span> <a href="">顶灯</a> <span class="ml10 mr10">/</span> <a href="">节能灯</a> <span class="ml10 mr10">/</span> <a href="">应急灯</a> </div> <div class="sub-row"> <span class="bold mr10">厨具：</span> <a href="">烹饪锅具</a> <span class="ml10 mr10">/</span> <a href="">餐具</a> <span class="ml10 mr10">/</span> <a href="">菜板刀具</a> </div> <div class="sub-row"> <span class="bold mr10">家装：</span> <a href="">地毯</a> <span class="ml10 mr10">/</span> <a href="">沙发垫套</a> <span class="ml10 mr10">/</span> <a href="">装饰字画</a> <span class="ml10 mr10">/</span> <a href="">照片墙</a> <span class="ml10 mr10">/</span> <a href="">窗帘</a> </div> <div class="sub-row"> <span class="bold mr10">生活日用：</span> <a href="">收纳用品</a> <span class="ml10 mr10">/</span> <a href="">浴室用品</a> <span class="ml10 mr10">/</span> <a href="">雨伞雨衣</a> </div> </div> </div> </div> <!-- banner图 --> <div class="banner" id="banner"> <a href="#"> <div class="banner-slide slide1"></div> </a> <a href="#"> <div class="banner-slide slide2"></div> </a> <a href="#"> <div class="banner-slide slide3"></div> </a> </div> <!-- 上一张 --> <a href="javascript:void(0)" class="button prev" id="prev"></a> <!-- 下一张 --> <a href="javascript:void(0)" class="button next" id="next"></a> <!-- 圆点索引 --> <div class="dots" id="dots"> <span class="active"></span> <span></span> <span></span> </div> </div> </body> </html>
*{
margin: 0;
padding: 0;
}
@font-face {font-family: 'iconfont';
src: url('../img/font/iconfont.eot');
src: url('../img/font/iconfont.eot') format('embedded-opentype'),
url('../img/font/iconfont.woff') format('woff'),
url('../img/font/iconfont.ttf') format('truetype'),
url('../img/font/iconfont.svg#iconfont') format('svg');
}
a{
text-decoration: none;
}
body{
font-family: "微软雅黑";
color: #14191e;
}
/* 菜单 */
.main{
width:1200px;
height:460px;
margin: 20px auto;
position: relative;
overflow: hidden;
}
/* 主菜单遮罩盒子 */
.menu-box{
width:244px;
height:460px;
background-color: rgba(7, 17, 27, 0.5);
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
z-index: 1;
}
/* 主菜单内容 */
.menu-content{
width:244px;
height:454px;
position: absolute;
top: 0;
left: 0px;
margin-top: 6px;
z-index: 2;
}
.menu-item{
list-style: none;
height: 64px;
line-height: 66px;
font-size: 16px;
cursor: pointer;
padding: 0 24px;
position: relative;
}
.menu-item > a{
display: block;
color: #fff;
padding: 0 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
height: 63px;
}
.menu-item:last-child a{
border-bottom: none;
}
.menu-item i{
position: absolute;
height: 61px;
right: 32px;
top: 2px;
font-size: 24px;
color: rgba(255,255,255,0.5);
font-style: normal;
font-family:"iconfont";
}
/* 二级菜单 */
.sub-menu{
border:1px solid #d9dde1;
background:#fff;
position: absolute;
left: 244px;
top: 0px;
width: 730px;
height: 458px;
z-index: 5;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
/* overflow: hidden; 最好在最大的父级盒子设置 */
}
.hide{
display: none;
}
/* 为什么我的inner-box没有像视频中的那样，继承position属性堆叠在一起，而是向下排列？
position定位属性是不会继承的，所以是向下排列的效果，这是正常的。视频中效果是因为最外层大盒子设置了超出隐藏,*/
.inner-box{
width:100%;
height:100%;
background:url(../img/fe.png) no-repeat;
}
.sub-inner-box{
width: 652px;
margin-left: 40px;
overflow: hidden;
/* 不加这个图片为什么会有顶部为什么会有间距？ 这是避免盒子内容过多溢出用的。
浏览器有一个bug，在正常文档流，如果子元素设置了margin-top值，父元素会跟着一起下落*/
}
.title{
color: #f01414;
font-size: 16px;
line-height: 16px;
margin-top: 28px; /*子元素设置了margin-top值*/
font-weight: bold;
margin-bottom: 30px;
}
.sub-row{
margin-bottom:25px;
}
/* a标签的字体样式会被浏览器默认样式覆盖，所以要重新设置 */
.sub-inner-box > .sub-row > a{
color: #14191e;
}
.bold{
font-weight:700;
}
.mr10{
margin-right:10px;
}
.ml10{
margin-left:10px;
}
/* banner图 */
.banner{
width:1200px;
height:460px;
overflow: hidden;
}
/* 轮播图 */
.banner-slide{
width:100%;
height:100%;
float: left;
}
.slide1{
background-image: url("../img/bg1.jpg");
}
.slide2{
background-image: url("../img/bg2.jpg");
}
.slide3{
background-image: url("../img/bg3.jpg");
}
/* 点击图片按钮 */
.button{
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
position: absolute;
background: url("../img/arrow.png") center center no-repeat;
}
/* 上一张 */
.prev{
transform: rotate(180deg);
}
/* 下一张 */
.next{
left: auto;
right: 0;
}
.button:hover{
background-color:#333;
opacity: 0.8;
filter:alpha(opacity=80);
/* 兼容IE */
}
/* 圆点索引 */
.dots{
position: absolute;
right: 0;
bottom: 24px;
margin-right: 24px;
line-height: 12px;
}
.dots > span{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(7, 17, 27, 0.4);
margin-right: 8px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
/* 不是太能理解原理，inset是如何让圆点变小的？*/
cursor: pointer;
}
.dots > span.active{
background-color: #ffffff;
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
}// 全局变量
window.onload = function(){
var index = 0,
timer = null,
main = byId("main"),
next = byId("next"),
prev = byId("prev"),
pics = byId("banner").getElementsByTagName("div"),
len = pics.length,
dots = byId("dots").getElementsByTagName("span"),
menu = byId("menu-content"),
menuItems = menu.getElementsByTagName("li"),
mlen = menuItems.length,
subMenu = byId("sub-menu"),
subItems = subMenu.getElementsByClassName("inner-box");
//console.log(menu)
// DOM2级事件封装函数
function addHandler(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,true);
}else if(element.attachEvent){
element.attachEvent("on" + type,handler);
}else{
element["on" + type] = handler;
// 原本是element.type,但是IE浏览器要加前缀on，所以用[]的形式，JS中的"."符号都可以用[]代替
}
}
// 查找ID的函数封装,()里面别忘记传参数id进去
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
//消除定时器，停止自动轮播
function stopAutoPlay(){
if(timer){
clearInterval(timer);
}
}
//图片轮播
function startAutoPlay(){
timer = setInterval(function(){
index++;
if(index >= len) index = 0;
//console.log(index)
changeImg();
},3000)
}
//图片和圆点索引转变函数封装
function changeImg(){
for(var i = 0;i < len;i++){
pics[i].style.display = "none"; //display是样式，要加style
dots[i].className = "";
}
pics[index].style.display = "block";
dots[index].className = "active";
}
//点击下一张
addHandler(next,"click",function(){
index++;
if(index >= len) index = 0;
changeImg();
})
//点击下一张
addHandler(prev,"click",function(){
index--;
if(index < 0) index = 2;
changeImg();
})
//圆点索引设置
for(var j = 0;j < len;j++){
dots[j].setAttribute("data-index",j);
addHandler(dots[j],"click",function(){
//console.log(this.getAttribute("data-index"))
index = this.getAttribute("data-index");
changeImg();
});
}
//主菜单和子菜单转变函数封装
function changeMenu(){
for(var n = 0;n < mlen; n++){
menuItems[n].style.background = "none";
subItems[n].style.display = 'none';
}
menuItems[index].style.background = "rgba(0,0,0,0.1)";
subItems[index].style.display = "block";
}
//主菜单索引设置
for(var m = 0;m < mlen; m++){
menuItems[m].setAttribute("data-mindex",m);
addHandler(menuItems[m],"mouseover",function(){
subMenu.className = "sub-menu";
//Uncaught ReferenceError: subMenu is not defined at HTMLLIElement。引用错误：subMenu是一个未定义的HTML对象，说明subMenu未定义
index = this.getAttribute("data-mindex");
changeMenu();
})
}
//鼠标离开主菜单时，背景消失
for(var m = 0;m < mlen; m++){
menuItems[m].setAttribute("data-mindex",m);
addHandler(menuItems[m],"mouseout",function(){
index = this.getAttribute("data-mindex");
menuItems[index].style.background = "none";
})
}
/* for(var m=0,mlen=menuItems.length;m<mlen;m++){
menuItems[m].setAttribute("data-index",m);
addHandler(menuItems[m],"mouseover",function(){
subMenu.className = "sub-menu";
var idx = this.getAttribute("data-index");
for(var j=0,jlen=subItems.length;j<jlen;j++){
subItems[j].style.display = 'none';
menuItems[j].style.background = "none";
}
subItems[idx].style.display = "block";
menuItems[idx].style.background = "rgba(0,0,0,0.1)";
});
} */
//跟我上面的写法是一个原理，这里的逻辑是遍历主菜单，然后给它里面的每一项设置自定义属性，然后给每一项添加鼠标事件，去掉二级菜单隐藏的类名，给一个自定义变量接收每一项的自定义属性（值是本身的索引），然后遍历主菜单和二级菜单，分别设置他们的属性为"none",最后用主菜单和二级菜单每一项自定义属性的值来分别开启它们的转变（类似转变函数封装）
//鼠标离开主菜单和二级菜单时，二级菜单隐藏,
addHandler(menu,"mouseout",function(){
subMenu.className = "sub-menu hide";
})
addHandler(subMenu,"mouseout",function(){
subMenu.className = "sub-menu hide";
})
//鼠标划入二级菜单时，二级菜单打开
addHandler(subMenu,"mouseover",function(){
subMenu.className = "sub-menu";
})
startAutoPlay();
addHandler(main,"mouseover",stopAutoPlay);//事件句柄在DOM2级事件里不用括号
addHandler(main,"mouseout",startAutoPlay);
}1、HTML中主菜单盒子用ul标签好吗？工作中一般用div还是ul？
2、CSS中a标签的问题理解的对吗？还有我最后注释的一个圆点box-shadow问题
3、JS中我的代码哪里需要优化？还有我注释的地方对吗？最后再说一下我主菜单和子菜单那里的函数封装写法好吗，还是直接用下面的写法，工作中常用哪种？
2
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星