Question

我的学校要求我只使用HTML和CSS创建一个页面，我不知道它是如何工作的。到目前为止我试过这个。

你们其中一个人是否知道如何解决这个问题？请帮我。我找不到任何解决方案。

HTML

<!DOCTYPE html>
<html>

<head>
  <title>Filebrowser | Periode</title>
  <link rel="stylesheet" href="browserstyle.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body id="id1">

  <h1 style="padding-left:32px;">Filebrowser | NAME | Nr.  XXXXX</h1>
  <br>
  <br>
  <div id="wrapper">

    <div class="ptd"><a class="button" id="p1" href="periode1.html">Periode&nbsp;1</a>
    </div>
    <div class="ptd"><a href="#" class="nng">Periode&nbsp;2</a>
    </div>
    <div class="ptd"><a href="#" class="nng">Periode&nbsp;3</a>
    </div>
    <div class="ptd"><a href="#" class="nng">Periode&nbsp;4</a>
    </div>
    <div class="ptd hide">
      <p>
        <a id="button2" href="http://validator.w3.org/check?uri=referer">
          <img src="theo.jpg" alt="Validator" width="20" />
        </a>
      </p>
    </div>
    <footer class="rfsize">
      <div class="kruimelpad">
        <p id="paars">Bewijzenmap</p>
        <p>Copyright&nbsp;&copy;&nbsp;2015&nbsp;NAME&nbsp;All&nbsp;Rights&nbsp;Reserved.</p>
      </div>

      <input type="radio" name="1" value="100" id="bg1" checked>
      <span>
<label for="bg1" class="radiostyle">Normaal</label>
<input type="radio" name="1" value="sint" id="bg2">
<label for="bg2" class="radiostyle">Sint</label>
<input type="radio" name="1" value="kerst" id="bg3">
<label for="bg3" class="radiostyle">Kerst</label></span>
    </footer>
  </div>
</body>

</html>

CSS （它的一部分，因为这是单选按钮的部分）

* {
  font-family: sans-serif;
}
#id1 {
  background: url(stardust.png);
}
.radiostyle {} input[type=radio]:checked {
  background-color: red;
}
body {
  overflow-x: hidden;
}
h1 {
  font-family: Montserrat;
  text-align: center;
  color: white;
}
span[radiostyle=sint] ~ body {
  background: url(theo.jpg);
}

Answer 1

Here是您代码的简化版本。 span[radiostyle=sint] ~ body不正确有两个原因：span没有radiostyle属性，body不是span的兄弟。

因此，您可能需要更改不是body的元素的背景，这是单选按钮的兄弟。我的例子并不涵盖整个背景，但你可以改变它。

＆＃13;

#bg1:checked ~ .background {
    background-color: red;
}
#bg2:checked ~ .background {
    background-color: green;
}
#bg3:checked ~ .background {
    background-color: yellow;
}
.background {
    height: 200px;
    width: 200px;
    background-color: black;
}

＆＃13;

<div id="wrapper">    
  <footer class="rfsize">
    <span>
      <input type="radio" name="1" value="100" id="bg1" checked /> 
      <label for="bg1" class="radiostyle">Normaal</label>
      <input type="radio" name="1" value="sint" id="bg2" />
      <label for="bg2" class="radiostyle">Sint</label>
      <input type="radio" name="1" value="kerst" id="bg3" />
      <label for="bg3" class="radiostyle">Kerst</label>
      <div class="background"><div>
    </span>
  </footer>
</div>

＆＃13;

Answer 2

这是：

<强> HTML

<body id="id1">
     <h1 style="padding-left:32px;">Filebrowser | NAME | Nr.  XXXXX</h1>

    <br>
    <br>
    <div id="wrapper">
        <div class="ptd"><a class="button" id="p1" href="periode1.html">Periode&nbsp;1</a>

        </div>
        <div class="ptd"><a href="#" class="nng">Periode&nbsp;2</a>

        </div>
        <div class="ptd"><a href="#" class="nng">Periode&nbsp;3</a>

        </div>
        <div class="ptd"><a href="#" class="nng">Periode&nbsp;4</a>

        </div>
        <div class="ptd hide">
            <p> <a id="button2" href="http://validator.w3.org/check?uri=referer">
          <img src="theo.jpg" alt="Validator" width="20" />
        </a>

            </p>
        </div>
        <footer class="rfsize">
            <div class="kruimelpad">
                <p id="paars">Bewijzenmap</p>
                <p>Copyright&nbsp;&copy;&nbsp;2015&nbsp;NAME&nbsp;All&nbsp;Rights&nbsp;Reserved.</p>
            </div>
            <input type="radio" name="Normal" value="radio" onClick="changeColour('bg1')">Normal
<input type="radio" name="sint" value="radio" onClick="changeColour('bg2')">Sint
<input type="radio" name="kerst" value="radio" onClick="changeColour('bg3')">Kerst
    </footer>
  </div>
          </body>

<强>的JavaScript

window.changeColour = function(value)
{
    var color = document.body.style.backgroundColor;
    switch(value)
    {
        case 'bg1':
            color = "grey";
        break;
        case 'bg2':
            color = "yellow";
        break;
        case 'bg3':
            color = "green";
        break;
    }
    document.body.style.backgroundColor = color;
}

小提琴here

如何制作改变页面背景的单选按钮开关？

2 个答案: