Fatal编程技术网
  • html/
  • Html 如何制作更改页面背景的单选按钮开关？

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

html css

Html 如何制作更改页面背景的单选按钮开关？,html,css,Html,Css,我的学校要求我只使用HTML和CSS制作一个页面，我不知道它是如何工作的。我已经试过了 你们当中有人知道如何解决这个问题吗？请帮帮我。我找不到任何解决办法 HTML <!DOCTYPE html> <html> <head> <title>Filebrowser | Periode</title> <link rel="stylesheet" href="browserstyle.css"> <meta

我的学校要求我只使用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>

<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>
是代码的简化版本
span[radiostyle=sint]~body
不正确，原因有二：span没有
radiostyle
属性，并且
body
不是
span
的兄弟姐妹

因此，您可能需要更改一个元素的背景，该元素不是
body
，而是单选按钮的同级元素。我的示例没有涵盖整个背景，但您可以更改它

#bg1:选中~。背景{
背景色：红色；
}
#bg2：选中。背景{
背景颜色：绿色；
}
#bg3：已选中。背景{
背景颜色：黄色；
}
.背景{
高度：200px；
宽度：200px；
背景色：黑色；
}

正常的
信
克斯特
在这里：

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>

<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>
小提琴

你能说得更具体些吗？你到底需要做什么？代码的哪一部分是您的问题？请提供一些代码或jsfiddle来显示您的问题并解释您的需求
span[radiostyle=sint]~body
这不会选择您的身体。CSS不能向后选择。Manoj是对的<代码>~将选择选择器的所有同级元素。在您的情况下，
body
不是
span
的兄弟，因此它不会被选择。不幸的是，我不能使用javascript