格式的问题

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

格式的问题

来源：1-1 课程介绍

LLLL_

2020-01-12 16:33:29

我轮播用的是老师源码，这个商品管理页面也是源码，我想了2天才提问的，真的是不知道为什么为什么没有办法插入进来？得到一个好的页面。

1是原页面上边会被破坏，2是这个也不完整，我问过一次老是说我代码没问题，不知道老师是把我说的两个代码结合试了吗 ?

为什么会出现图片的情况，是css的问题吗？

图片里下边红圈三个是什么呢？在学这堂课的时候没有遇到过

写回答

3回答

好帮手慕酷酷

2020-01-13

同学你好，不要着急，解决问题的过程也是学习的过程，

这里建议同学按照如下方式进行排查：

1、麻烦同学再次核对一下，轮播图的前端内容是否使用的是源码，包括图片，js，css等。看到图片不是使用的源码图片，建议同学都先修改为源码的内容，

2、这里同学的图片样式没有生效，建议同学再次确认一下css中图片引入路径问题，可以按住ctrl键+右键，查看是否会到达目标图片中。

如果同学的图片都是放在images下，则需要更改lunbo.css中图片以及字体的引入路径。

例如：

lunbo.css

*{
    margin: 0px;
    padding: 0px;
}

@font-face{
    font-family: "iconfont";
    src:url("/images/font/iconfont.eot");
    src:url("/images/font/iconfont.eot") format("embedded-opentype"),
    url("/images/font/iconfont.woff") format("woff"),
    url("/images/font/iconfont.ttf") format("truetype"),
    url("/images/font/iconfont.svg#iconfog") format("svg");
}


ul{
    list-style: none;
}

/*去掉a超链接的下划线*/
a:link,a:visited{
    text-decoration: none;
    color: #333;
}



body{
    font-family: "微软雅黑";
    color: #14191e;
}

.main{
    width: 1200px;
    height: 460px;
    margin: 30px auto 30px auto;
    /*overflow: hidden;*/
    background-color: pink;
    position: relative;

}

.banner{
    width: 1200px;
    height: 460px;
    overflow: hidden;
    position: relative;
}

.banner-slide{
    width: 1200px;
    height: 460px;
    position: absolute;  /*定位    然后在父位加相对定位*/
    background-repeat: no-repeat;
    display: none;  /*隐藏*/
}

.slide-active{
    display: block;
}

.slide1{
    background-image: url("/images/bg1.jpg");
}

.slide2{
    background-image: url("/images/bg2.jpg");
}

.slide3{
    background-image: url("/images/bg3.jpg");
}

.button{
    position: absolute;    /*他是针对main的相对定位 所以main相对定位*/
    width:40px;
    height: 80px;
    left: 244px;
    top: 50%;
    margin-top: -40px;
    background-color: #0f0;
    background: url(../images/arrow.png) no-repeat center center; /*水平垂直居中*/
    opacity: 0.22;
}

.button:hover{
    background-color: #333; /*background#333时上边有bg属性了，所以-color*/
    opacity: 0.8;

}

.prev{
    transform: rotate(180deg);
}

.next{
    left: auto;  /*让上个类中定义的left不起作用*/
    right:0;
}

.dots{
    position: absolute;
    right: 9px;
    bottom: 24px;
    text-align: right;  /*靠右对齐   不起作用*/

}

.dots span{
    display:inline-block;  /*在水平方向上排列*/
    width:18px;
    height: 18px;
    line-height: 12px;
    border-radius:50%;   /*变成圆*/

    margin-right:13px;
    margin-bottom: 6px;

    background:rgba(7,17,27,0.09);
    /*描边  水平方向 垂直方向 阴影距离 模糊程度 阴影颜色 内置阴影*/
    box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;
    cursor: pointer;  /*改变光标形状为手型*/
}

.dots .active{
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
    background:#fff;
}

/****************************************导航菜单***************************
*/

.menu-box {
    width: 244px;
    height: 460px;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(147,147,147,0.5);
    opacity: 0.5;
    z-index: 1;  /*设置优先级*/
}

.menu-content{
    width: 244px;
    height: 454px;
    position: absolute;   /*因为不是子元素，所以需要定位*/
    left: 0;
    top: 0;
    z-index: 2;
    margin-top:6px;
}

.menu-item{
    height: 64px;
    line-height: 66px;
    font-size: 16px;
    padding:0 24px;
    position: relative;
}

.menu-item a:link,.menu-item a:visited{
    color: #fff;
}

.menu-item a{
    display: block;/*转成块元素*/
    border-bottom: 1px solid rgba(255,255,255,0.6);
    padding:0 8px;  /*因为突出了一部分，下边代码要减*/
    height: 63px;
}
.menu-item i{
    position: absolute;
    right: 32px;
    font-size: 24px;
    top:2px;
    font-family:"iconfont" ;
    /*因为自动倾斜*/
    font-style: normal;
    font-weight: normal;
    color: rgba(255,255,255,0.5);
}

.sub-menu{
    width:730px;
    height: 458px;
    border:1px solid #d9dde1;
    background: #fff;
    position: absolute;
    left:244px ;
    top: 0px;
    z-index: 999;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
}

.inner-box{
    width:100%;
    height: 100%;
    background: url("../images/fe.png") no-repeat;
    display: none;  /*初始状态就要被隐藏*/

}

.sub-inner-box{
    width: 652px;
    margin-left: 40px;
    overflow: hidden;
}

.title{
    color: #f01414;
    font-size: 16px;
    line-height: 16px;
    margin:28px 0 30px 0;
    font-weight: bold;
}

.sub-row{
    margin-bottom:25px;
}

.bold{
    font-weight: bold;
}

.mr10{
    margin-right: 10px;
}

.ml10{
    margin-left: 10px;
}

.hide{
    display: none;
}

3、然后清除浏览器缓存，再试一下。