老师，效果怎么没显示？
来源：3-4 行为层
广东靓仔
2019-06-29 10:35:50
<!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>全屏的云南旅游相册</title> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery.js"></script> <script src="js/script.js"></script> </head> <body> <span></span> <nav> <a href="#">泸沽湖</a> <a href="#">丽江古城</a> <a href="#">茶马古道</a> <a href="#">就这家·云逸客栈</a> <a href="#">西双版纳</a> <a href="#">云南红酒庄</a> <a href="#">桥子雪山</a> <a href="#">普者黑</a> <a href="#">海硬大道</a> <a href="#">玉龙湾</a> <a href="#">昆明郊野公园</a> <a href="#">欧洲风琴小镇</a> </nav> <div> <!--div>img*12--> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> <img src="images/4.jpg"> <img src="images/5.jpg"> <img src="images/6.jpg"> <img src="images/7.jpg"> <img src="images/8.jpg"> <img src="images/9.jpg"> <img src="images/10.jpg"> <img src="images/11.jpg"> <img src="images/12.jpg"> </div> </body> </html>
*{
margin:0;
padding:0;
border:none;
}
:root,
body{
background-color:#93b3c6;
overflow:hidden;
}
span{
display:block;
width:16px;
height:16px;
margin:30px auto 40px;
border-radius:50%;
background-color:#fff;
}
nav{
position:relative;
display:flex; /*display和justify-content两个属性结合使用可以让元素在容器中左右均匀分布*/
justify-content:space-between;
width:78.125vw; /*1vw等于可视窗口的1%*/
margin: 0 auto 45px;
}
nav:before{
position:absolute;
top:20px;
width:100%;
height:10px;
background-color:#fff;
display:block;
content:'';
}
nav a{
position:relative;
font-size:20px;
padding:10px;
border:2px solid #5395b4;
color:#255d7e;
background-color:#fff;
text-decoration:none;
}
div{
position:relative;
width:78.125vw;
height:75vh;
margin:0 auto;
background-color:#fff;
box-shadow:0 0 30px 0 rgba(8, 1, 3, 0.3);
overflow:hidden;
}
div img{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:98%;
height:96%;
}$(document).ready(function(){
$('a').click(function(){
$('img').eq($(this).index()).css({ 'opacity':'1' }).siblings().css({ 'opacity':'0' });
});
});写回答
1回答
-
好帮手慕慕子
2019-06-29
同学你好， 老师这里测试同学的代码是可以实现效果的， 建议： 同学可以检查一下文件引入的路径是够正确， 然后清除浏览器缓存再测试一下哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题