Question

我正在制作此网页，我几乎完成了有关背景的问题，因为第二个是它的外观，第一个是我的。我只想摆脱两者之间的空白，并像外部填充一样。香港专业教育学院试图玩弄填充，但由于某些原因没有起作用，这里的链接（https://imgur.com/a/FlVN538）也这里我的代码：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Cycling Tours</title>
        <style>
            body {
                font-family: Verdana, sans-serif;
            }
            form {

                width: 700px;
                margin: 0 auto;
            }
            h1 {
                text-align: center;
            }
            fieldset {
                background-color: #4681A4;
                min-width: 700px;
                max-width: 700px;
                border: solid white 2px;
            }
            legend {
                color: white;
                text-indent: 2em;

            }
            label {
                font-size: 0.9em;
            }


            textarea {
                display: block;
                width: 80%;
                height: 100px;
                min-width: 50%;
                max-width: 90%;
            }

            .buttonstyle {
                text-transform: uppercase;
                font-weight: bold;
                background-color:#FFFFE6;
            }

            input[type=text], input[type=email], input[type=phonenumber] {
                background-color:#ffffe6;
            }

        </style>
    </head>
    <body>
        <h1>Fall 2018 Reviews</h1>

        <form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">

            <!--<input type="hidden" name="formname" value="Donation Form">
            <input type="hidden" name="windowname" value="Donation">-->

            <fieldset id="aboutyou">
                <legend>About you(optional)</legend>
                <label for="aboutyou">I usually prefer to trips around this time of year(select all that apply)</label>
                <br>
                <select name="seasons" id="seasons" size="4" multiple>
                    <option>Winter</option>
                    <option>Spring</option>
                    <option>Summer</option>
                    <option>Fall</option>
                </select>
                <br>
                <label for="firstname">First Name</label>
                <input type="text" name="firstname" id="firstname" >
                <br>
                <label for="lastname">Last Name</label>
                <input type="text" name="lastname" id="lastname">
                <br>
                <label for="phonenumber">Phone Number</label>
                <input type="phonenumber" name="phonenumber" id="phonenumber" placeholder="123-456-7890" size="12">
                <br>
                <label for="email">Email Address</label>
                <input type="email" name="email" id="email" placeholder="name@example.com" size="40">
            </fieldset>

            <fieldset>
                <legend>Trip Reviews</legend>
                <div id="trails">
                    <label for="trailchoice"></label>
                    <select name="trailchoice" id="trailchoice">
                        <option value="Alberta Rural">Alberta Rural</option>
                        <option value="B.C. Coast">B.C. Coast</option>
                        <option value="Ontario Lake Superior">Ontario Lake Superior</option>
                        <option value="PEI">PEI</option>
                        <option value="Nova Scotia Cabot Trail">Nova Scotia Cabot Trail</option>
                    </select>
                    <div id="daylength">
                    <label for="days"></label>
                    <select name="days" id="days">
                        <option value="5 days">5 days</option>
                        <option value="7 days">7 days</option>
                        <option value="10 days">10 days</option>
                        <option value="14 days">14 days</option>
                    </select>
                <div id="credit">
                    <input type="radio"  id="fourstars" value="4" checked>
                    <label for="fourstars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
                    <br>
                    <input type="radio" name="threestars" id="threestars" value="3">
                    <label for="threestarts"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
                    <br>
                    <input type="radio" name="twostars" id="twostars" value="2">
                    <label for="twostars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
                    <br>
                    <input type="radio" name="onestar" id="onestar" value="1">
                    <label for="onestar"><img src="l5mg/wheel_sm.jpg"></label>
                    <br>
                    <label for="feedback">comments</label>
                    <textarea name="feedback" id="feedback" rows="6" cols="45" placeholder="Place feedback here..."></textarea>
                </div>

                    </select>

                </div>
            </fieldset>

            <fieldset id="fsfeedback">
                <legend>I would be interested in these trips:(check all that apply)</legend>
                <input type="checkbox" name="Sea or Lake Coast" id="SLC" value="Sea or Lake coast">
                <label for="SLC">Sea or lake coast</label>
                <br>
                <input type="checkbox" name="Rural" id="Rural" value="Rural">
                <label for="Rural">Rural</label>
                <br>
                <input type="checkbox" name="Mountain" id="Mountain" value="Mountains">
                <label for="Mountain">Mountains</label>
                <br>
                <input type="checkbox" name="other" id="other" value="other">
                <label for="other" >Other (Please Specify)</label><label for="other"></label>
                <input type="text" name="specified" id="specified">
            </fieldset>


            <input type="submit" value="Send Review" class="buttonstyle">
            <input type="reset" value="Cancel" class="buttonstyle">

        </form>
    </body>
</html>

Answer 1

body {
  font-family: Verdana, sans-serif;
}

form {
  background: #4681A4;
  width: 700px;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

h1 {
  text-align: center;
}

fieldset {
  border: solid white 2px;
  margin: 5px;
  margin-bottom: 20px;
}

legend {
  color: white;
  text-indent: 2em;
}

label {
  font-size: 0.9em;
}

textarea {
  display: block;
  width: 80%;
  height: 100px;
  min-width: 50%;
  max-width: 90%;
}

.buttonstyle {
  text-transform: uppercase;
  font-weight: bold;
  background-color: #FFFFE6;
}

input[type=text],
input[type=email],
input[type=phonenumber] {
  background-color: #ffffe6;
}

.buttons {
  margin-left: 19px;
}

<h1>Fall 2018 Reviews</h1>

<form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">

  <!--<input type="hidden" name="formname" value="Donation Form">
          <input type="hidden" name="windowname" value="Donation">-->

  <fieldset id="aboutyou">
    <legend>About you(optional)</legend>
    <label for="aboutyou">I usually prefer to trips around this time of year(select all that apply)</label>
    <br>
    <select name="seasons" id="seasons" size="4" multiple>
      <option>Winter</option>
      <option>Spring</option>
      <option>Summer</option>
      <option>Fall</option>
    </select>
    <br>
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname">
    <br>
    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname">
    <br>
    <label for="phonenumber">Phone Number</label>
    <input type="phonenumber" name="phonenumber" id="phonenumber" placeholder="123-456-7890" size="12">
    <br>
    <label for="email">Email Address</label>
    <input type="email" name="email" id="email" placeholder="name@example.com" size="40">
  </fieldset>

  <fieldset>
    <legend>Trip Reviews</legend>
    <div id="trails">
      <label for="trailchoice"></label>
      <select name="trailchoice" id="trailchoice">
        <option value="Alberta Rural">Alberta Rural</option>
        <option value="B.C. Coast">B.C. Coast</option>
        <option value="Ontario Lake Superior">Ontario Lake Superior</option>
        <option value="PEI">PEI</option>
        <option value="Nova Scotia Cabot Trail">Nova Scotia Cabot Trail</option>
      </select>
      <div id="daylength">
        <label for="days"></label>
        <select name="days" id="days">
          <option value="5 days">5 days</option>
          <option value="7 days">7 days</option>
          <option value="10 days">10 days</option>
          <option value="14 days">14 days</option>
        </select>
        <div id="credit">
          <input type="radio" id="fourstars" value="4" checked>
          <label for="fourstars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img
              src="l5mg/wheel_sm.jpg"></label>
          <br>
          <input type="radio" name="threestars" id="threestars" value="3">
          <label for="threestarts"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
          <br>
          <input type="radio" name="twostars" id="twostars" value="2">
          <label for="twostars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
          <br>
          <input type="radio" name="onestar" id="onestar" value="1">
          <label for="onestar"><img src="l5mg/wheel_sm.jpg"></label>
          <br>
          <label for="feedback">comments</label>
          <textarea name="feedback" id="feedback" rows="6" cols="45" placeholder="Place feedback here..."></textarea>
        </div>

        </select>

      </div>
  </fieldset>

  <fieldset id="fsfeedback">
    <legend>I would be interested in these trips:(check all that apply)</legend>
    <input type="checkbox" name="Sea or Lake Coast" id="SLC" value="Sea or Lake coast">
    <label for="SLC">Sea or lake coast</label>
    <br>
    <input type="checkbox" name="Rural" id="Rural" value="Rural">
    <label for="Rural">Rural</label>
    <br>
    <input type="checkbox" name="Mountain" id="Mountain" value="Mountains">
    <label for="Mountain">Mountains</label>
    <br>
    <input type="checkbox" name="other" id="other" value="other">
    <label for="other">Other (Please Specify)</label><label for="other"></label>
    <input type="text" name="specified" id="specified">
  </fieldset>


  <div class="buttons">
    <input type="submit" value="Send Review" class="buttonstyle">
    <input type="reset" value="Cancel" class="buttonstyle">
  </div>

</form>

HTML CSS表单更改背景

1 个答案: