如何在同一个地方的所有div上制作图像

时间:2015-10-18 20:03:52

标签: html css

<!DOCTYPE html>
<html>
    <head>
        <title>Add gospel Přerov</title>
        
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <div class="wrapper">
          <div id="second">     
          </div> 
           
          <div id="third">      
          </div> 
              
          <div id="fourth">
          </div>
              
          <div id="fift">
          </div>  
        </div>
    </body>
</html>
100vh

我正在为我的客户制作一个网站,我需要帮助。我想制作4个高度为100%的div,宽度等于import java.util.Scanner; public class XXX { public static void main(String[] args) { String playerName1; final int MIN_SCORE = 19; final int MAX_SCORE = 51; int score; Scanner keyboard = new Scanner(System.in); System.out.println(); System.out.print("Enter you name: "); playerName1 = keyboard.next(); System.out.print("Welcome" + playerName1 + "to the game of guts! "); System.out.println(); System.out.print("Enter winning Score(between 20 - 50): "); score = keyboard.Int(); } } ProgrammingProject3.java:36: error: cannot find symbol score = keyboard.Int(); ^ symbol: method Int() location: variable keyboard of type Scanner 。这就是我所拥有的。现在,我需要将箭头朝向所有这些div,位于底部中心的某个位置。怎么做?

1 个答案:

答案 0 :(得分:2)

我不确定这是否是您想要的,但根据您的问题,这可能是您想要实现的目标。刚创建了一个div里面有一个图片(你也可以使用background属性来获取箭头图片)

&#13;
&#13;
html * {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
.full {
  position: relative;
  height: 100vh;
  width: 100%;
}
.full:nth-child(1) {
  background: cyan;
}
.full:nth-child(2) {
  background: magenta;
}
.full:nth-child(3) {
  background: yellow;
}
.full:nth-child(4) {
  background: lightgray;
}
.arrow-down {
  position: absolute;
  bottom: 10px;
  width: 32px;
  height: 32px;
  left: calc(50% - 16px);
}
.arrow-down > img {
  width: 100%;
}
&#13;
<div class="full">
  <div class="arrow-down">
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
  </div>
</div>
<div class="full">
  <div class="arrow-down">
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
  </div>
</div>
<div class="full">
  <div class="arrow-down">
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
  </div>
</div>
<div class="full">
  <div class="arrow-down">
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
  </div>
</div>
&#13;
&#13;
&#13;