mouseout监听滑动门会失效

mouseout监听滑动门会失效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>work</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
</head>

<body>
    <header class="header header_ani_init">
        <a class="header_logo" href="javascript:;">H5实战页面</a>
        <nav class="header_nav">
            <a class="header_nav_item" href="javascript:;">实战课程</a>
            <a class="header_nav_item" href="javascript:;">商业案例</a>
            <a class="header_nav_item" href="javascript:;">课程体系</a>
            <a class="header_nav_item" href="javascript:;">集成环境</a>
            <a class="header_nav_item" href="javascript:;">云端学习</a>
            <a class="a_btn" href="javascript:;">即刻学习</a>
            <div class="header_nav_tip"></div>
        </nav>
    </header>
    <div class="screen_1">
        <div class="screen_1_wrap">
            <h1 class="screen_1_title screen_1_title_ani_init">实战课程重磅上线</h1>
            <h5 class="screen_1_subtitle screen_1_subtitle_ani_init">一键云学习，还在等待什么？</h5>
        </div>
    </div>
    <div class="screen_2">
        <div class="screen_2_wrap">
            <h1 class="screen_2_title">每门课都是真实商业案例</h1>
            <hr class="wordline">
            <h5 class="screen_2_subtitle">真实案例，真实场景，在实战中时间、操作、调试<br>大牛带你体验BAT真实开发流程，所有开发国过程一一为你呈现</h5>
            <div class="rocket"></div>
            <div class="man"></div>
        </div>
    </div>
    <div class="screen_3">
        <div class="screen_3_wrap">
            <div class="desc_img"></div>
            <div class="desc">
                <h1 class="screen_3_title">强大的语言课程体系支持</h1>
                <hr class="wordline wordline_3">
                <h5 class="screen_3_subtitle">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br>让你体验开发全流程</h5>
                <div class="courses">
                    <div class="courses_item courses_item1">HTML5</div>
                    <div class="courses_item courses_item2">PHP</div>
                    <div class="courses_item courses_item3">JAVA</div>
                    <div class="courses_item courses_item4">Python</div>
                    <div class="courses_item courses_item5">Node.js</div>
                </div>
            </div>
        </div>
    </div>
    <div class="screen_4">
        <div class="screen_4_wrap">
            <h1 class="screen_4_title">省去本地复杂的环境搭建</h1>
            <hr class="wordline wordline_4">
            <h5 class="screen_4_subtitle">你可以告别在虚拟机中调试开发了</h5>
            <div class="screen_4_items">
                <div class="screen_4_item screen_4_item1">实战课程继承开法环境</div>
                <div class="screen_4_item screen_4_item2">内置终端命令行</div>
                <div class="screen_4_item screen_4_item3">编译你的应用程序</div>
                <div class="screen_4_item screen_4_item4">通过云端服务输出效果</div>
            </div>
        </div>
    </div>
    <div class="screen_5">
        <div class="screen_5_wrap">
            <div class="screen_5_bg"></div>
            <h1 class="screen_5_title">云端学习可以这样简单</h1>
            <hr class="wordline wordline_5">
            <h5 class="screen_5_subtitle">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</h5>
        </div>
    </div>
    <div class="screen_other">
        <a class="other_btn" href="#">继续了解学习体验</a>
    </div>
    <footer class="footer">
        <div class="links">
            <a href="javascript:;">网站首页&nbsp;&nbsp;</a>
            <a href="javascript:;">人才招聘&nbsp;&nbsp;</a>
            <a href="javascript:;">联系我们&nbsp;&nbsp;</a>
            <a href="javascript:;">高校联盟&nbsp;&nbsp;</a>
            <a href="javascript:;">关于我们&nbsp;&nbsp;</a>
            <a href="javascript:;">讲师招募&nbsp;&nbsp;</a>
            <a href="javascript:;">意见反馈&nbsp;&nbsp;</a>
            <a href="javascript:;">友情链接&nbsp;&nbsp;</a>
        </div>
        <h5>Copyright&copy;2015 imooc.com All Rights Reserved | 京ICP备113046642号-2</h5>
    </footer>
    <div class="slidebar">
        <a class="slidebar_item" href="javascript:;">实</a>
        <a class="slidebar_item" href="javascript:;">真</a>
        <a class="slidebar_item" href="javascript:;">课</a>
        <a class="slidebar_item" href="javascript:;">环</a>
        <a class="slidebar_item" href="javascript:;">云</a>
    </div>
    <script type="text/javascript" src="js/script.js"></script>
</body>

</html>
* {
    margin: 0;
}

body {
    width: 100%;
}

a {
    text-decoration: none;
}

h5 {
    font-weight: normal;
}

/* 头部导航 */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background-image: linear-gradient(black, transparent);
    z-index: 1;
}

.header .header_logo {
    display: block;
    margin-left: 20px;
    width: 140px;
    height: 80px;
    background-size: 40px 40px;
    background: url('../images/logo.png') left center no-repeat;
    text-indent: 50px;
    color: white;
    cursor: pointer;
    line-height: 80px;
}

.header .header_logo:hover {
    color: red;
}

.header .header_nav {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -20px;
}

.header .header_nav .header_nav_item {
    float: left;
    display: block;
    height: 40px;
    padding: 0 15px 0;
    color: white;
    line-height: 40px;
    text-align: center;
}

.header .header_nav .header_nav_item:hover {
    color: red;
}

.header .header_nav .header_nav_item_active {
    color: red;
}

.header .header_nav .a_btn {
    width: 90px;
    background-color: red;
    border-radius: 3px;
    padding: 0;
    margin: 0 30px 0 15px;

    float: left;
    display: block;
    height: 40px;
    padding: 0 15px 0;
    color: white;
    line-height: 40px;
    text-align: center;
}

.header .header_nav .a_btn:hover {
    background-color: #a20000;
}

.header .header_nav .header_nav_tip {
    position: absolute;
    bottom: 0;
    left: 15px;
    width: 64px;
    height: 2px;
    background-color: red;
    transition: all .5s;
}

/* 第一屏 */
.screen_1 {
    width: 100%;
    height: 640px;
    background: url('../images/sc1.jpg') no-repeat;
    background-size: cover;
    color: white;
}

.screen_1_wrap,
.screen_2_wrap,
.screen_3_wrap,
.screen_4_wrap,
.screen_5_wrap {
    width: 1200px;
    height: 640px;
    margin: 0 auto;
    text-align: center;
}

.screen_1_wrap>h1 {
    padding-top: 200px;
}


/* 第二屏 */
.screen_2 {
    width: 100%;
    height: 640px;
    background: url('../images/sc2.png') center bottom no-repeat;
    background-color: #e4e4e4;
    overflow: hidden;
}

.screen_2_wrap {
    position: relative;
}

.screen_2_wrap>h1 {
    padding-top: 90px;
}

.wordline {
    width: 50px;
    margin: 30px auto 20px;
    border: 1px solid red;
}

.rocket {
    position: absolute;
    left: 45%;
    bottom: 15%;
    width: 266px;
    height: 205px;
    background: url('../images/sc2-2.png') center no-repeat;
}

.man {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -138px;
    width: 275px;
    height: 380px;
    background: url('../images/sc2-1.png') center no-repeat;
}


/* 第三屏 */
.screen_3 {
    width: 100%;
    height: 640px;
    background-color: #1d213a;
}

.screen_3_wrap {
    position: relative;
    text-align: initial;
}

.desc {
    position: relative;
    height: 450px;
    padding: 150px 0 0 550px;
    color: white;
}

.desc_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 520px;
    height: 640px;
    background: url('../images/sc3.png') center no-repeat;
    background-size: 460px 500px;
}

.wordline_3 {
    margin: 30px 0 20px;
}

.courses {
    position: absolute;
    bottom: 0;
}

.courses_item {
    float: left;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid;
    text-align: center;
    line-height: 70px;
    margin-right: 30px;
}

.courses_item1 {
    color: #5db4ff;
    border-color: #5db4ff;
}

.courses_item2 {
    color: #8500ff;
    border-color: #8500ff;
}

.courses_item3 {
    color: #ff6666;
    border-color: #ff6666;
}

.courses_item4 {
    color: #44a99f;
    border-color: #44a99f;
}

.courses_item5 {
    color: #499e54;
    border-color: #499e54;
}

/* 第四屏 */
.screen_4 {
    width: 100%;
    height: 640px;
    background-color: #e4e4e4;
}

.screen_4_wrap>h1 {
    padding-top: 90px;
}

.screen_4_items {
    width: 920px;
    height: 150px;
    margin: 20px auto 0;
}

.screen_4_item {
    float: left;
    width: 160px;
    height: 150px;
    line-height: 280px;
    margin-right: 70px;
}

.screen_4_item1 {
    background: url('../images/sc4-1.png') center no-repeat;
}

.screen_4_item2 {
    background: url('../images/sc4-2.png') center no-repeat;
}

.screen_4_item3 {
    background: url('../images/sc4-3.png') center no-repeat;
}

.screen_4_item4 {
    background: url('../images/sc4-4.png') center no-repeat;
}

/* 第五屏 */
.screen_5 {
    width: 100%;
    height: 640px;
    background: url('../images/sc5.jpg');
    background-size: cover;
    background-color: #ab2121;
    color: white;
}

.screen_5_bg {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    padding: 50px;
    background: url('../images/sc5-1.png') center no-repeat;

}

.wordline_5 {
    border-color: white;
}

/* 其他 */
.screen_other {
    width: 100%;
    height: 200px;
    background-color: #e4e4e4;
    position: relative;
}

.other_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -100px;
    display: block;
    width: 200px;
    height: 50px;
    padding: 0;
    background: transparent;
    border: 1px solid #545454;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    line-height: 50px;
    color: black;
}

.other_btn:hover {
    color: red;
}

/* 底部 */
.footer {
    width: 100%;
    height: 100px;
    background-color: black;
    color: white;
    text-align: center;
}

.links {
    padding: 20px;
}

.links>a {
    color: white;
}

.links>a:hover {
    color: red;
}

.slidebar {
    width: 50px;
    height: 210px;
    background-color: white;
    position: fixed;
    top: 50%;
    right: 0;
    margin-top: -50px;
}

.slidebar .slidebar_item {
    display: block;
    width: 30px;
    height: 30px;
    margin: 10px auto;
    text-align: center;
    line-height: 30px;
    color: black;
}

.slidebar .slidebar_item:hover {
    color: red;
}

.slidebar .slidebar_item_active {
    color: red;
}
/* header动画 */
.header{
    transition: all 1s;
}
.header_ani_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.header_ani_done{
    opacity: 1;
    transform: translate(0,0);
}

/* 第1屏动画 */
.screen_1_subtitle,
.screen_1_title{
    transition: all 1s;
}
.screen_1_title_ani_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen_1_title_ani_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen_1_subtitle_ani_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_1_subtitle_ani_done{
    opacity: 1;
    transform: translate(0,0);
    transition-delay: .8s;
}

/* 第2屏动画 */
.rocket,
.man,
.wordline,
.screen_2_subtitle,
.screen_2_title{
    transition: all 1s;
}
.rocket_ani_init,
.wordline_ani_init,
.screen_2_subtitle_ani_init,
.screen_2_title_ani_init{
    opacity: 0;
    transform: translate(0,100%);
}
.man_ani_init{
    opacity: 0;
    transform: translate(0,0);
}
.screen_2_subtitle_ani_done,
.screen_2_title_ani_done{
    opacity: 1;
    transform: translate(0,0);
}
.wordline_ani_done,
.man_ani_done{
    opacity: 1;
    transform: translate(0,0);
    transition-delay: .5s;
}
.rocket_ani_done{
    transition-delay: 1s;
    animation: screen_2_bounce 1s 1s;
}

/* 第3屏动画 */
.desc_img{
    transition: all;
}
.courses_item,
.courses,
.wordline_3,
.screen_3_subtitle,
.screen_3_title{
    transition: all 1s;
}
.desc_img_ani_init{
    transform: scale(.3);
}
.courses_item_ani_init,
.courses_ani_init,
.wordline_3_ani_init,
.screen_3_subtitle_ani_init,
.screen_3_title_ani_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_3_subtitle_ani_done,
.screen_3_title_ani_done{
    opacity: 1;
    transform: translate(0,0);
}
.desc_img_ani_done{
    transform: scale(1);
}
.wordline_3_ani_done{
    opacity: 1;
    transform: translate(0,0);
    transition-delay: .3s;
}
.courses_ani_done{
    opacity: 1;
    transform: translate(0,0);
    transition-delay: 1s;
    animation: screen_3_bounce 1s 1s;
    /* animation: screen_3_bounce_bre 1s infinite .5s; */
}
.courses_item5_ani_done,
.courses_item4_ani_done,
.courses_item3_ani_done,
.courses_item2_ani_done,
.courses_item1_ani_done{
    animation: screen_3_bounce_bre 1s infinite .5s;
}

/* 第4屏动画 */
.screen_4_items,
.wordline_4,
.screen_4_subtitle,
.screen_4_title{
    transition: all 1s;
}
.screen_4_items_ani_init{
    transform: scale(0);
}
.wordline_4_ani_init,
.screen_4_subtitle_ani_init,
.screen_4_title_ani_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_4_items_ani_done{
    transform: scale(1);
}
.screen_4_title_ani_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen_4_subtitle_ani_done,
.wordline_4_ani_done{
    opacity: 1;
    transform: translate(0,0);
    transition-delay: 1s;
}

/* 第5屏动画 */
.screen_5_bg{
    transition: all;
}
.wordline_5,
.screen_5_subtitle,
.screen_5_title{
    transition: all 1s;
}
.screen_5_bg_ani_init{
    transform: scale(.3);
}
.wordline_5_ani_init,
.screen_5_subtitle_ani_init,
.screen_5_title_ani_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_5_bg_ani_done{
    transform: scale(1);
}
.screen_5_subtitle_ani_done,
.wordline_5_ani_done{
    opacity: 1;
    transform: translate(0,0);
    transition-delay: .8s;
}
.screen_5_title_ani_done{
    opacity: 1;
    transform: translate(0,0);
}


/* 帧动画 */
/* 第二屏小火箭 */
@keyframes screen_2_bounce{
    0%{
        opacity: 0;
        transform: translate(0,100%);
    }
    50%{
        opacity: 1;
        transform: translate(0,-10%);
    }
    70%{
        transform: translate(0,10%);
    }
    90%{
        transform: translate(0,-10%);
    }
    100%{
        transform: translate(0,0);
    }
}

/* 第三屏呼吸灯 */
@keyframes screen_3_bounce{
    0%{
        opacity: 0;
        transform: translate(0,100%);
    }
    50%{
        opacity: 1;
        transform: translate(0,-10%);
    }
    70%{
        transform: translate(0,10%);
    }
    90%{
        transform: translate(0,-10%);
    }
    100%{
        transform: translate(0,0);
    }
}
@keyframes screen_3_bounce_bre{
    0%,100%{
        opacity: .6;
        transform: scale3d(1,1,1);
    }
    50% {
        opacity: .3;
        transform: scale3d(1.05,1.05,1.05);
    }
}
// 获取元素
var getEle = function (element) {
    return document.querySelector(element);
}
var getAllElem = function (element) {
    return document.querySelectorAll(element);
}

//获取元素样式
var getClass = function (element) {
    return element.getAttribute('class');
}

//设置元素样式
var setClass = function (element, classval) {
    return element.setAttribute('class', classval);
}

//添加元素样式
var addClass = function (element, classval) {
    var baseclass = getClass(element);
    if (baseclass.indexOf(classval) === -1) {
        setClass(element, baseclass + ' ' + classval);
    }
    return;
}

//删除元素样式
var delClass = function (element, classval) {
    var baseclass = getClass(element);
    if (baseclass.indexOf(classval) != -1) {
        setClass(element, baseclass.split(classval).join(' ').replace(/\s+/g, ' '));
    }
    return;
}


//设置需要用到动画的元素
var screenAniEle = {
    '.header': [
        '.header',
    ],
    '.screen_1': [
        '.screen_1_title',
        '.screen_1_subtitle',
    ],
    '.screen_2': [
        '.screen_2_title',
        '.screen_2_subtitle',
        '.wordline',
        '.man',
        '.rocket',
    ],
    '.screen_3': [
        '.screen_3_title',
        '.screen_3_subtitle',
        '.wordline_3',
        '.desc_img',
        '.courses',
        '.courses_item1',
        '.courses_item2',
        '.courses_item3',
        '.courses_item4',
        '.courses_item5',
    ],
    '.screen_4': [
        '.screen_4_title',
        '.screen_4_subtitle',
        '.wordline_4',
        '.screen_4_items',
    ],
    '.screen_5': [
        '.screen_5_title',
        '.screen_5_subtitle',
        '.wordline_5',
        '.screen_5_bg',
    ],
}

//初始化样式，添加_animate_init样式
function playInit(ele) {
    var aniEle = screenAniEle[ele];
    for (var i = 0; i < aniEle.length; i++) {
        var tempele = document.querySelector(aniEle[i]);
        var baseclass = tempele.getAttribute('class');
        tempele.setAttribute('class', baseclass + ' ' + aniEle[i].substr(1) + '_ani_init');
    }
}

// 动画开始->结束
function playDone(ele) {
    var aniEle = screenAniEle[ele];
    for (var i = 0; i < aniEle.length; i++) {
        var tempele = document.querySelector(aniEle[i]);
        var baseclass = tempele.getAttribute('class');
        tempele.setAttribute('class', baseclass.replace('_ani_init', '_ani_done'));
    }
}
// 开始调用初始化init样式
window.onload = function () {
    for (x in screenAniEle) {
        if (x == '.header' || x == '.screen_1') {
            continue;
        }
        playInit(x);
    }
}

setTimeout(function () {
    playDone('.header');
    playDone('.screen_1');
}, 100);

var navItems = getAllElem('.header_nav_item');
var slideItems = getAllElem('.slidebar_item');
//点哪导航项激活
function switchNavItemActive(index) {
    for (let i = 0; i < navItems.length; i++) {
        delClass(navItems[i], 'header_nav_item_active');
    }
    addClass(navItems[index], 'header_nav_item_active');


    for (let i = 0; i < slideItems.length; i++) {
        delClass(slideItems[i], 'slidebar_item_active');
    }
    addClass(slideItems[index], 'slidebar_item_active');
}
switchNavItemActive(0);

window.onscroll = function () {
    var top = document.documentElement.scrollTop;
    if (top >= 0) {
        playDone('.header');
        playDone('.screen_1');
        switchNavItemActive(0);
    }
    if (top > 540 * 1) {
        playDone('.screen_2');
        switchNavItemActive(1);
    }
    if (top > 540 * 2) {
        playDone('.screen_3');
        switchNavItemActive(2);
    }
    if (top > 540 * 3) {
        playDone('.screen_4');
        switchNavItemActive(3);
    }
    if (top > 540 * 4) {
        playDone('.screen_5');
        switchNavItemActive(4);
    }
}

// 点哪屏幕跳哪
function setNavJump(i, val) {
    var item = val[i];
    item.onclick = function () {
        document.documentElement.scrollTop = i * 640;
    }
}
// header导航绑定屏幕滚动
for (let i = 0; i < navItems.length; i++) {
    setNavJump(i, navItems);
}
// slidebar侧边栏绑定屏幕滚动
for (let i = 0; i < slideItems.length; i++) {
    setNavJump(i, slideItems);
}


//导航栏滑动门
var navTip = getEle('.header_nav_tip');

function setTip(index, ele) {
    ele[index].onmouseover = function () {
        navTip.style.left = index * 94 + 15 + 'px';
    }
    var activeIndex = 0;
    ele[index].onmouseout = function () {
        for (let i = 0; i < ele.length; i++) {
            if (getClass(ele[i]).indexOf('header_nav_item_active') > -1) {
                activeIndex = i;
                break;
            }
        }
        navTip.style.left = activeIndex * 94 + 15 + 'px';
    }
}
for (let i = 0; i < navItems.length; i++) {
    setTip(i, navItems);
}

http://img1.sycdn.imooc.com//climg/5dd3dcd50876e17b13140738.jpg

发现了一个问题，页面载入完成后，鼠标不进入导航栏，用滚轮划到页面底部，此时导航栏文字会变色，但是下划线不会变位置，需要鼠标滑入导航栏一下才会变位置，下划线的变动是js里用onmouseout控制的，我试过window.onscroll监听页面滚动来变换下划线位置，但是没用，而且加上这个监听后，页面动画就没用了，该怎么解决呢？
猫有一只猫 2019-11-19
源自：宣传页项目   5-5 JS实现滑动门效果
5
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕言 回答被采纳获得+3积分 2019-11-20 10:58:42

同学你好，在switchNavItemActive函数里面修改一下下划线的位置就可以了，如下

http://img1.sycdn.imooc.com//climg/5dd4abaf0991fd6607780466.jpg

同学可以测试下。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0
收起回答
  • 猫有一只猫 提问者 #1
    1.navTip.style.left = 0 + 'px';和navTip.style.left = index * 94 + 15 + 'px';我都试过了，发现只需要下面的就可以达到效果，导航项设置的是两边都有padding，所以滑动门初始位置距左15px，就是不要上面的navTip.style.left = 0 + 'px';也是可以的。 2.另外还有个问题，页面滑到底部，刷新页面，页面都是初始化状态，设置的是window.onscroll判断top距离触发某屏动画，如何能够监听top不用滚动来触发，直接判断top高度来触发动画？ 3.滑动门可不可以用a:hover做出来？如果用这个的话，鼠标放在导航项上会直接出现下划线，但是不会有从一个导航项滑到另一个导航项的动画，这样的话有没有可能做出这个动画呢？
    2019-11-20 13:53:44
好帮手慕言 2019-11-20 15:13:22

同学你好，关于同学的问题，解答如下：

1、如果不影响效果的话，可以去掉。

2、用户打开页面肯定是从上往下开始浏览，就算中途刷新之后也会滚动页面，所以这个不用担心。

3、滑动门不能使用hover实现，因为hover时我们不知道移入的是哪个导航项。

如果还有其他疑问，建议在问答区重新提问，便于同学后期查找总结

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

滑动门特效如果文字宽度不一样 如何自适应宽度？
17 0 2
上下滑动与左右滑动
0 0 2
关于监听器范围
16 1 3
Spring的监听器
10 1 5
滑动效果完全没有再次提问
19 0 5

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师