Question

我对编码非常陌生。每当我使窗户变小或变大时，它都不会影响物体，所以我想知道我是否可以解决这个问题。它似乎也固定在左边，但我不知道如何解决这个问题。我感谢任何帮助，并抱歉任何不连贯和草率。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Arthur Raps</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
<link rel="stylesheet" type="text/css" href="normalize.css" media="screen">
<link rel="stylesheet" type="text/css" href="grid.css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Bubbler+One' rel='stylesheet' type='text/css'>
<base target="_blank">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">

</head>


<body>
 <div class="container clearfix">
  <h1>Arthur Raps</h1>
  <ul class="nav">
   <li><a href="http://broflu.bandcamp.com/" class="bbtn">Bandcamp</a></li>
   <li><a href="https://soundcloud.com/broflu" class="sbtn">SoundCloud</a></li>
   <li><a href="https://www.facebook.com/arthur.banach.3" class="fbtn">Facebook</a></li>
   <li><a href="https://twitter.com/" class="tbtn">Twitter</a></li>
   <img src="backgro.png" alt="" class="bone">
   <img src="backgro1.png" alt="" class="btwo">
   <img src="backgro2.png" alt="" class="bthree">
   <img src="backgro3.png" alt="" class="bfour">
  </ul> 
 </div>

title {
    font-family: 'Bubbler One', sans-serif;
    font-size: 2em;
    position: absolute;
    left: 500px;
    top: 300px;
}

body {
    font-family: 'Bubbler One', sans-serif;
    font-size: 1.5em;
    color:  #FFFFFF;
    background: url(images/backgroundone.png) repeat;

}
a {
    text-decoration: none;
    color: #FFFFFF;
    background: url('NotCoffee/backgro1.png') no-repeat;

}
h1 {
    font-family: 'Bubbler One', sans-serif;
    font-size: 2em;
    color:  #142933;
    position: fixed;
    left: 525px;
    top: 200px;
}
ul.nav li {
    list-style: none;
}
.tbtn{

     padding: 15px 30px;
    border-radius: 25px;
     text-transform: uppercase;
    position: fixed; 
    left: 270px; 
    top: 360px; 
    z-index: 1;
}


.bone {
    position: fixed; 
    left: 220px; 
    top: 325px; 
    z-index: 0;
}

.fbtn {
    padding: 15px 30px;
    border-radius: 25px;
     text-transform: uppercase;
    position: fixed; 
    left: 450px; 
    top: 360px; 
    z-index: 1;
}

.btwo {
    position: fixed; 
    left: 410px; 
    top: 325px; 
    z-index: 0;
}

.bbtn {
    padding: 15px 30px;
    border-radius: 25px;
    text-transform: uppercase;
    position: fixed; 
    left: 640px; 
    top: 360px; 
    z-index: 1;
}

.bthree {
    position: fixed; 
    left: 600px; 
    top: 325px; 
    z-index: 0;
}

.sbtn {
    padding: 15px 30px;
    border-radius: 25px;
    text-transform: uppercase;
    position: fixed; 
    left: 830px; 
    top: 360px; 
    z-index: 1;
}

.bfour {
        position: fixed; 
    left: 795px; 
    top: 325px; 
    z-index: 0;
}

Answer 1

您的一些头寸设置为“固定”，这也可能导致问题。

有没有办法可以根据窗口大小调整所有项目的大小？

1 个答案: