课程3-4,你好,请问我的效果占页面很大一部分,是屏幕分辨率原因吗

来源：3-4 行为层

weibo_执著的弧线_0

2019-03-28 21:13:08

结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏的旅游相册</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</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>
        <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;
}

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

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

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

nav:before{
    display: block;
    position: absolute;
    top: 20px;
    width: 100%;
    height: 10px;
    background: #fff;
    content: '';
}
nav > a{
    position: relative;
    font-size: 20px;
    padding: 10px;
    border: 2px solid #5395b4;
    color: #255d7e;
    text-decoration: none;
    background: #fff;
}

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

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

写回答

1回答