老师，请检查一下我的自定义字体样式为什么没有显示出来
<!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>Document</title>
<link rel="stylesheet" href="../JS实现图片轮播练习/lx.css">
</head>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:"微软雅黑";
color:#14191e;
}
a{
text-decoration: none;
}
a:link, a:visited{
color:#5e5e;
}
@font-face{
font-family:"iconfont";
src:url("../JS实现图片轮播练习/img/font/iconfont.eot");
src:url("../JS实现图片轮播练习/img/font/iconfont.eot") format("embedded-opentype"),
url("../JS实现图片轮播练习/img/font/iconfont.woff") format("woff"),
url("../JS实现图片轮播练习/img/font/iconfont.ttf") format("truetype"),
url("../JS实现图片轮播练习/img/font/iconfont.svg#iconfont") format("svg"),
}
.main{
width:1200px;
height:460px;
margin:30px auto;
overflow: hidden;
position: relative;
}
/* 焦点图 */
.banner{
width:1200px;
height:460px;
overflow: hidden;
}
.banner-slide{
width:1200px;
height:460px;
float:left;
background-repeat: no-repeat;
}
.slide1{
background-image:url(../JS实现图片轮播练习/img/bg1.jpg)
}
.slide2{
background-image:url(../JS实现图片轮播练习/img/bg2.jpg)
}
.slide3{
background-image:url(../JS实现图片轮播练习/img/bg3.jpg)
}
.button{
position: absolute;
width:40px;
height:80px;
left:244px;
background:url(../JS实现图片轮播练习/img/arrow.png) center center no-repeat;
top:50%;
margin-top:-40px;
transform: rotate(180deg);
}
.next{
left:auto;
right:0;
transform: rotate(0deg);
}
.dots{
position: absolute;
right:24px;
bottom: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-left:8px;
box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;
cursor:pointer;
}
.dots span.active{
background-color:#fff;
box-shadow:0 0 0 2px rgba(7,17, 27, 0.4) inset;
}
/* 菜单 */
.menu-box{
position: absolute;
left:0;
top:0;
width:244px;
height:460px;
background:rgba(7, 17, 27, 0.5);
z-index: 1;
}
/* 主菜单 */
.menu-content{
position: absolute;
left:0;
top:0;
width:244px;
height:460px;
z-index: 2;
}
.menu-item{
height:64px;
line-height:66px;
font-size:12px;
cursor: pointer;
padding:0 24px;
}
.menu-item a{
display:block;
color:#fff;
font-size:16px;
border-bottom:1px solid rgba(255,255,255,0.2) ;
height:63px;
padding:0 8px;
position: relative;
}
.menu-item:last-child a{
border-bottom:none;
}
.menu-item i{
position: absolute;
right:32px;
top: 2px;
color:rgba(255,255,255,0.5);
font-style:normal;
font-weight:normal;
font-family:"iconfont";
}
</style>
<body>
<div class="main">
<div class="menu-box"></div>
<!-- 主菜单 -->
<div class="menu-content" id="menu-content">
<div class="menu-item">
<a href="">
<span>手机、配件</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>电脑</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家用电器</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家具</span>
<i class="icon"></i>
</a>
</div>
</div>
<!-- 焦点图 -->
<div class="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:viod(0)" class="button next" id="next"></a>
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
正在回答
同学你好，如下所示，语法格式不对，建议：修改为分号即可。
修改后就可以正常显示了。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星