Question

我目前无法弄清楚为什么我的网页没有调整窗口大小。如果我缩小窗口，按钮会移到底部，与主标题相同，并且它们都在白色空间中。我已经尝试了很多建议，例如在字体和宽度等方面只使用百分比，但这样的事情似乎没有用。在代码中它似乎没有实现bootstrap，但我通过codepen实现它。这是我的代码：

HTML

<a name = "home"></a>
<div id = "wrapper">
  <!--linker to allow us to jump to 
top of page -->
  <ul>
    <!--setting up linker for home
-->
    <li><a style = "color:white" href = "#contact">Contact</a></li>
    <li><a style = "color:white" href = "#about">About</a></li>
    <li><a style = "color:white" href = "#home">Home</a></li>

  </ul>
  <div>
  <img class ="make-ImageSmaller"src = "https://images.unsplash.com/photo-1469521669194-babb45599def?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=e32c5d5b5ea606e27bf29c40b4b3bb4f">
    <h2 class = "threeDLettering backGroundEditor">Front-End Developer</h2>
    <button id = "twitterButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Twitter</a></button>
    <button id = "instagramButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Instagram</a></button>
    <button id = "facebookButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Facebook</a></button>
  </div>
</div>

CSS

.home-Background-Image{
  position:relative;
}
.backGroundEditor{ 
   position: absolute;
   text-align:center;
   top: 30%; 
   font-size:50px;
   left: 0; 
   width: 100%; 
   font-family: Monospace;
}
#twitterButton{
  top:70%;
  right:59%;
}
#instagramButton{
  top:70%;
  right:43%;
}
#facebookButton{
  top:70%;
  right:27%;
}
.clearButton {
    position:absolute;
    background-color: transparent;
    font-size: 25px;
    width: 15%;
    box-shadow: none;  

}

.threeDLettering{
 color:#FFFFFF;
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}


.make-ImageSmaller{
  width:100%;

}

ul {
  /*makes it so text can't go through nav bar*/
    z-index:500;
  /*Takes away the bullet points*/
    list-style-type: none;
    margin: 0;
  /*separation between the group, outside border*/
    padding: 0;
  /*Matte Black*/
    background-color: #333;
  /*Keeps bar in same place when scrolling*/
    position:fixed;
  /*What allows the bar to be able to stay stretch on the screen*/
    width: 100%;
}

li {
    float: right;
}
body{
  margin: 0;
}
#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:100%;
}

li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 /* WebKit and Opera browsers */
  @-webkit-keyframes spinner {
    from { -webkit-transform: rotateY(0deg);    }
    to   { -webkit-transform: rotateY(-360deg); }
  }

  /* all other browsers */
  @keyframes spinner {
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
  }
.spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;

    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }

阅读其他帖子，有人说要将包装类添加到div，我添加了，但是甚至没有能够让它工作。您可能会看到任何建议或设计缺陷，我愿意改变。谢谢。

Answer 1

我在codepen中这样做了。首先，我将整个HTML代码嵌套在“body”标记容器中，并删除了“img”标记

HTML

<body>
<a name = "home"></a>
<div id = "wrapper">
  <!--linker to allow us to jump to 
top of page -->
  <ul>
    <!--setting up linker for home
-->
    <li><a style = "color:white" href = "#contact">Contact</a></li>
    <li><a style = "color:white" href = "#about">About</a></li>
    <li><a style = "color:white" href = "#home">Home</a></li>

  </ul>
  <div>
    <h2 class = "threeDLettering backGroundEditor">Front-End Developer</h2>
    <button id = "twitterButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Twitter</a></button>
    <button id = "instagramButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Instagram</a></button>
    <button id = "facebookButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Facebook</a></button>
  </div>
</div>
</body>

然后我将此添加到您的CSS中，而不是在此处实现您的图像。

body
{
     background: url("https://images.unsplash.com/photo-1469521669194-babb45599def?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=e32c5d5b5ea606e27bf29c40b4b3bb4f") no-repeat center fixed;
     background-size:cover;
}

不确定这是不是应该实施的正确方法，但这通常对我有用。

Answer 2

在CSS中添加.make-ImageSmaller的高度即

.make-ImageSmaller{
    width:100%;
    height: 100%;
}

窗口调整大小时，网页不会调整大小

2 个答案: