是分辨率的问题吗为什么我的浏览器显示这样

我叫壹陆伍 2021-08-01

源自：jQuery入门 3-3 表示层--图片区域

收起

1回答

卡布琦诺 2021-08-02 09:49:38

同学你好，从截图显示来看，是电脑分辨率导致的，并且老师这边测试源码显示是正常的，同学也可以将代码贴上来，老师帮你检测一下代码。

祝学习愉快！

收起回答

提问者我叫壹陆伍 #1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏的云南旅游相册</title>
    <link rel="stylesheet" type="text/css" href="css/list.css">
    <script type="text/javascript" src="query.js/query.js"></script>
    <script type="text/javascript" src="query.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 class="div">
    <img src="img/1.jpg">
    <img src="img/2.jpg">
    <img src="img/3.jpg">
    <img src="img/4.jpg">
    <img src="img/5.jpg">
    <img src="img/6.jpg">
    <img src="img/7.jpg">
    <img src="img/8.jpg">
    <img src="img/9.jpg">
    <img src="img/10.jpg">
    <img src="img/11.jpg">
    <img src="img/12.jpg">
</div>
<script>
$(document).ready(function() {
    $('a').click(function () {
        $('img').eq($(this).index()).css({'opacity': '1'}).siblings().css({'opacity': '0'});
    });
});
</script>
</body>
</html>

2021-08-07 16:46:37

好帮手慕久久回复提问者我叫壹陆伍 #2

同学你好，要把样式代码粘贴出来，这样老师才能知道是你的样式写的有问题，还是电脑分辨率太小了。
祝学习愉快！

2021-08-07 17:16:51

提问者我叫壹陆伍回复好帮手慕久久 #3

* {
    margin: 0;
    padding: 0;
    border: none;
}

html,
body {
    height: 100%;
    background: #93b3c6;
    overflow: hidden;
}

span {
    display: block;
    width: 16px;
    height: 16px;
    margin: 30px auto 40px;
    border-radius: 50%;
    background: #fff;
}

nav {
    position: relative;
    display: flex;
    width: 78.125vw;
    margin: 0 auto 45px;
    justify-content: space-between;
}

nav:before {
    position: absolute;
    top: 20px;
    width: 100%;
    height: 10px;
    background: #fff;
    display: block;
    content: '';
}

nav > a {
    position: relative;
    font-size: 20px;
    padding: 10px;
    border: 2px solid #5395b4;
    color: #255d7e;
    text-decoration: none;
    background: #fff;
}

.div {
    position: relative;
    overflow: hidden;
    width: 78.125vw;
    height: 75vh;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 30px 0 rgba(8, 1, 3, .3);
}

div > img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 98%;
    height: 96%;
}