Question

我正在尝试创建一个水平滚动的网站，其中心位于中心，类似于http://www.rleonardi.com/interactive-resume/。

当尝试更改css以调整图像大小时，它不会影响网站，我不知道是否需要使用位置：固定以修复中心的角色。

1$ awk 'NR==1; 
        NR>1 {n=match($2,/[1-9]/); 
              print substr($1,1,n+1) "(" substr($2,n) ")" }' file

#measurements #error
1.23456(34)
2.34(34)

和css：

    <html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <title>Your title</title>
    <link   rel="stylesheet"    href="css/styles.css">
</head>

    <body>

       <background><img src="Photos/Backgroundclear%20.png" alt= "Background"/> </background> 


       <character><img src="Photos/Character.png" alt= "Background image"/> </character> 


       <div><floor><img src="Photos/floor.png" alt= "Background image"/> </floor> </div>


    </body>

Answer 1

对于像这样的复杂项目，你真的必须围绕元素的定位以及固定/相对和绝对定位的工作方式。 This应该让你走上正轨。在这种情况下，我使用chrome检查器来查看您尝试复制的示例，我可以看到该字符具有position: absolute。这里有一些css，字符调整大小。希望它有所帮助！

body{
    background-color: $primarycolour;
    max-width: 8000px;
    max-height: auto;

}

background{
    max-height: auto;
    max-width: 100%;

}

character{
    max-height: 20px;
    margin: auto; 

}
background img {
    width: 100%;
}
floor img {
    width: 100%;
    position: fixed;
    bottom: 0;
}
character img {
    position: absolute;
    width: 200px;
    bottom: 140px;
    left: calc(50% - 100px);
}

创建一个横向滚动的网站

1 个答案: