我这个就显示不出来那个小箭头

来源：4-2 导航菜单样式

Mr__Gao

2019-08-07 21:52:32

*{
	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"),
}
ul{
	list-style: none;

}
a:link,a:visited{
	text-decoration: none;
}
body{
	font-family:"宋体";
	color: #14191e;
}
.main{
	width: 1200px;
	height: 460px;
	margin:30px auto;
	overflow: hidden;
	position: relative;
}
.banner{
	width: 1200px;
	height: 460px;
	overflow: hidden;
	position: relative;
}
/*
三种图片的设置
*/
.banner-slide{
	width: 1200px;
	height: 460px;
	background-repeat: no-repeat;
	position: absolute;
	display: none;
}
/*
当前显示
*/
.slide-active{
	display: block;
}
/*
三张图片的导入
*/
.slide1{
	background-image:url(img/bg1.jpg); 
}
.slide2{
	background-image:url(img/bg2.jpg); 
}
.slide3{
	background-image:url(img/bg3.jpg); 
}
/*按钮的设置*/
.button{
	position: absolute;
	width: 40px;
	height: 80px;
	left: 244px;
	top: 50%;
	margin-top: -40px;
	background: url(img/arrow.png) no-repeat center center;

}
.button:hover{
	background-color: #333;
	opacity: 0.8;
	filter: alpha(opacity=80);
}
/*
旋转按钮
*/
.prev{
	transform: rotate(180deg);
}
.next{
	left: auto;
	right: 0px;
}
.dots{
	position: absolute;
	right: 20px;
	bottom: 24px;
	text-align: right;
}
.dots span{
	/*
    水平并排显示
	*/
	display:inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    line-height: 12px;
    background: 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{
	box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
	background-color: #fff;   
}
/*导航菜单*/
.menu-box{
   width: 244px;
   height: 460px;
   position: absolute;
   left: 0;
   top: 0;
   background: rgba(7,17,27,0.5);
   opacity: 0.5;
   z-index: 1;
}
.menu-content{
	width: 244px;
	height: 454px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	padding-top: 6px;	
}
.menu-item{
	height: 64px;
	line-height: 66px;
	font-size: 16px;
	padding:0 24px;
}
.menu-item a:link,.menu-item a:visited{
	color: #fff;
	
}
.menu-item a{
	display: block;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	padding:0 8px; 
	height: 63px;
}

.menu-item i{
	position: absolute;
	right: 32px;
	font-size: 24px;
	top: 0;
	font-family: "iconfont";
	font-style: normal;
	font-weight: normal;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播实例</title>
<link rel="stylesheet" type="text/css" href="test2.css">

<body>
<div class="main" id="main">
<div class="menu-box"></div>
<!--主菜单-->
<div class="menu-content">
<div class="menu-item">
<a href="#">
<span>手机、配件</span>
<i>&#xe665;</i>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>电脑</span>
<i>&#xe665;</i>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家用电器</span>
<i>&#xe665;</i>
</a>
</div>
<div class="menu-item">
<a href="#">
<span>家具</span>
<i>&#xe665;</i>
</a>
</div>
</div>
<!--图片轮播-->
<div class="banner" id="banner">
<a href="#">
<div class="banner-slide slide1 slide-active"></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>
<script type="text/javascript" src="test2.js"></script>
</head>
</body>
</html>

我用的google浏览器

写回答

1回答