在开放网站上的位置

时间:2017-10-27 06:03:02

标签: html css html5

我对开设网站的立场有些疑问。我联系表格:



#contactform {
  padding: 20px;
}

#contactform:after {
  content: '';
  display: block;
  clear: both;
}

.contactbox h1 {
  color: #000;
  font-size: 30px;
  margin-bottom: 30px;
}

.contactbox p {
  text-align: left;
  font-size: 16px;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Raleway", sans-serif;
}

#contact {
  padding: 25px;
  margin: 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #fff;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  border-radius: 15px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #fff;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #fff;
}

 ::-webkit-input-placeholder {
  color: #888;
}

 :-moz-placeholder {
  color: #888;
}

 ::-moz-placeholder {
  color: #888;
}

 :-ms-input-placeholder {
  color: #888;
}

<section id="contactform">

  <div class="contactbox">

    <h1>Gauk komercinį pasiūlymą</h1>
    <ul class="unstyled-list">
      <form id="contact" action="" method="post">
        <fieldset>
          <input placeholder="Vardas" type="text" tabindex="1" required autofocus>
        </fieldset>
        <fieldset>
          <input placeholder="Elektroninis paštas" type="email" tabindex="2" required>
        </fieldset>
        <fieldset>
          <input placeholder="Telefono numeris" type="tel" tabindex="3" required>
        </fieldset>
        <fieldset>
          <input placeholder="Internetinė svetainė (nebūtina)" type="url" tabindex="4" required>
        </fieldset>
        <fieldset>
          <textarea placeholder="Žinutė..." tabindex="5" required></textarea>
        </fieldset>
        <fieldset>
          <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
        </fieldset>
      </form>
    </ul>
    <ul class="unstyled-list">
      <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed molestie ex, nec convallis ligula. Pellentesque orci nunc, commodo vel felis sed, maximus tincidunt augue. Aliquam eu consequat leo, et faucibus ligula. Aenean convallis
          risus quis lacinia auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed molestie ex, nec convallis ligula.</p>
      </li>
    </ul>
  </div>

</section>
&#13;
&#13;
&#13;

此表单位于网站底部。然后我打开我的index.html它向下滚动所有网页并在此部分打开,并且键入光标在第一个占位符处闪烁(就像您准备输入一样),那么我该如何解决这个问题呢?如何打开索引并位于顶部,而不是位于该表单的底部...

0 个答案:

没有答案