老师鼠标滑过导航栏不能点击，也没有鼠标经过的小鼠标效果设置了也没用怎么回事
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS实战</title> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <link rel="stylesheet" type="text/css" href="./css/base.css" /> <script src="./JS/index.js"></script> </head> <body> <!-- 屏幕1 --> <div class="screan1"> <header> <div class="header__logo">H5实战页面</div> <div class="header__nava"> <a href="javascript:;" class="header__nava-item">实战课程</a> <a href="javascript:;" class="header__nava-item">商业案例</a> <a href="javascript:;" class="header__nava-item">课程体系</a> <a href="javascript:;" class="header__nava-item">集成环境</a> <a href="javascript:;" class="header__nava-item">云端学习</a> <a href="javascript:;" class="header__nava-item header__nava-item_custom_buttom">即可学习</a> </div> </header> <h2 class="screan1__heading">实战课程重磅上线</h2> <h4 class="screan1__subheading">一键云学习，还在等什么？</h4> </div> <!-- 屏幕2 --> <div class="screan2"> <div class="screap1__wrap"> </div> </div> <!-- 屏幕3 --> <div class="screan3"> </div> <!-- 屏幕四 --> <div class="screan4"> </div> <!-- 屏幕5 --> <div class="screan5"> </div> <!-- 屏幕6 --> <div class="screan6"> </div> </body> </html>
body{
margin:0;
padding:0;
font-size:12px;
font-family: "Microsoft Yahei";
}
a{
text-decoration: none;
}
.header{
padding-left: 10px;
padding-top: 10px;
height:60px;
width: 100%;
}
.header__logo{
height: 40px;
background-color:rgba(128,128,128, 0.1);
font-size: 18px;
background: url(../img/logo.png)no-repeat;
font-weight: bold;
color: white;
z-index: 99;
text-indent: 60px;
line-height: 40px;
float: left;
margin-left:10px;
margin-top: 10px;
}
.screan1{
height: 640px;
width: 100%;
background:url(../img/sc1.jpg)no-repeat;
background-size: cover;
display: block;
position: relative;
}
.header__nava{
float: right;
display: block;
line-height: 60px;
height: 40px;
}
.header__nava-item{
color: #efefff;
margin-right: 40px;
cursor:pointer;
}
.header__nava-item_custom_buttom{
border-radius: 5px;
height:40px;
width: 96px;
background-color: #f01400;
color: #efefff;
display: block;
float:right;
margin-top: 10px;
line-height: 40px;
margin-right: 30px;
text-align: center;
}
.screan1__heading{
position: absolute;
font-size:40px;
font-weight: bold;
color:#ffff;
display: block;
padding-top:240px;
text-align: center;
float: left;
width: 100%;
}
.screan1__subheading{
position: absolute;
color:#ffff;
display: block;
padding-top:315px;
text-align: center;
float: left;
width: 100%;
}19
收起
正在回答 回答被采纳积分+1
5回答
陈立天
2020-02-15 13:58:32
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS实战</title> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <link rel="stylesheet" type="text/css" href="./css/base.css" /> <script src="./JS/index.js"></script> </head> <body> <header> <div class="header__logo">H5实战页面</div> <div class="header__nava"> <a href="javascript:;" class="header__nava-item">实战课程</a> <a href="javascript:;" class="header__nava-item">商业案例</a> <a href="javascript:;" class="header__nava-item">课程体系</a> <a href="javascript:;" class="header__nava-item">集成环境</a> <a href="javascript:;" class="header__nava-item">云端学习</a> <a href="javascript:;" class="header__nava-item header__nava-item_custom_buttom">即刻学习</a> </div> </header> <!-- 屏幕1 --> <div class="screan1"> <h2 class="screan1__heading">实战课程重磅上线</h2> <h4 class="screan1__subheading">一键云学习，还在等什么？</h4> </div> <!-- 屏幕2 --> <div class="screan2"> <div class="screap2__wrap"> <h2 class="screap2__wrap__heading">每门课都是真实商业案例</h2> <h5 class="screap2__wrap__subheading">真实案例，真实场景,在实战中实践、操作调试<br>大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现</h5> <div class="screap2__warp-item"> <div class="screap2__wrap-item__bg1"></div> <div class="screap2__wrap-item__bg2"></div> <div class="screap2__wrap-item__bg3"></div> </div> </div> </div> <!-- 屏幕3 --> <div class="screan3"> </div> <!-- 屏幕四 --> <div class="screan4"> </div> <!-- 屏幕5 --> <div class="screan5"> </div> <!-- 屏幕6 --> <div class="screan6"> </div> </body> </html>
header{
height:60px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.header__logo{
height: 40px;
background-color:rgba(128,128,128, 0.1);
font-size: 18px;
background: url(../img/logo.png)no-repeat;
font-weight: bold;
color: white;
z-index: 99;
text-indent: 60px;
line-height: 40px;
float: left;
margin-left:10px;
margin-top: 10px;
}
.screap__wrap{
width: 1200px;
height: 640px;
margin: 0 auto;
}
/* 屏幕1 */
.screan1{
height: 640px;
width: 100%;
background:url(../img/sc1.jpg)no-repeat;
background-size: cover;
display: block;
position: relative;
}
.header__nava{
float: right;
display: block;
line-height: 60px;
height: 40px;
}
.header__nava-item{
color: #efefff;
margin-right: 40px;
cursor:pointer;
}
.header__nava-item_custom_buttom{
border-radius: 5px;
height:40px;
width: 96px;
background-color: #f01400;
color: #efefff;
display: block;
float:right;
margin-top: 10px;
line-height: 40px;
margin-right: 30px;
text-align: center;
}
.screan1__heading{
position: absolute;
font-size:40px;
font-weight: bold;
color:#ffff;
display: block;
padding-top:240px;
text-align: center;
float: left;
width: 100%;
}
.screan1__subheading{
position: absolute;
color:#ffff;
display: block;
padding-top:315px;
text-align: center;
float: left;
width: 100%;
}
/* 屏幕2 */
.screan2{
width: 100%;
height:640px;
height: 640px;
width: 100%;
background-size: cover;
display: block;
position: relative;
overflow: hidden;
}
.screap2__wrap__heading{
color:#07111b;
font-size: 40px;
text-align: center;
margin: 0;
line-height: 40px;
padding-top: 90px;
}
.screap2__wrap__subheading{
line-height: 16px;
color:#07111b;
font-size: 16px;
text-align: center;
margin: 0;
line-height: 28px;
padding-top: 63px;
}
.screap2__warp-item{
width: 100%;
height:391px;
display: block;
float: left;
overflow: hidden;
}
.screap2__wrap__item__bg1{
display: block;
position: absolute;
float: left;
background: url(../img/sc2.png)no-repeat;
height: 361px;
width: 750px;
z-index: 99;
color:red;
}
.screap2__wrap__item__bg2{
display: block;
position: absolute;
float: left;
background: url(../img/sc2-1.png)no-repeat;
height: 380px;
width: 275px;
z-index: 3;
}
.screap2__wrap__item__bg3{
display: block;
position: absolute;
float: left;
background: url(../img/sc2-2.png)no-repeat;
height: 305px;
width: 266px;
z-index: 3;
}
/* 屏幕3 */
.screan3{
position: absolute;
float: left;
width: 100%;
height:640px;
height: 640px;
width: 100%;
background-size: cover;
display: block;
position: relative;
background-color:#2b333b;
}body{
margin:0;
padding:0;
font-size:12px;
font-family: "Microsoft Yahei";
}
a{
text-decoration: none;
}
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星