2019-3-30 网页设计教学表单制作快速Demo

上节课完善了草稿代码的设计,本节课对上节课内容继续完善:完成CSS具体布局和美化。

技术要点包括:

表单元素的水平对齐问题。
表单元素的垂直调整问题。
表单元素的默认界面个性化定制问题。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
#title, #subtitle, #main, #copyright {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#title {
  height: 100px;
  background-color: blue;
}
#subtitle {
  height: 100px;
  background-color: grey;
}
#main {
  text-align: left;
  padding:50px 0px 70px 0px;
}
#copyright {
  height: 50px;
  background-color: red;
}
ul {
  list-style: none;
}

label {
  display: inline-block;
  width: 140px;
}
li {
  height: 40px;
}

input {
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-bottom-style: solid;
  border-left-style: solid;
  border-bottom-color: #999;
  border-left-color: #999;
  border-top-style: none;
  border-right-style: none;
}

.tip1,.tip2 {
  display: none;
  position:relative;  
  bottom:40px;
}

textarea{
 resize:none;
}
#subbtn {
  position:relative;
  top:50px;
  height: 42px;
  width: 100px;
  background-image: url(btn.gif);
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
}
.tip1,.tip2{
  background-color:#F0F;
  width:168px;
  text-align:center;
}
li:hover .tip1,li:hover .tip2
{
  display:block;
}
</style>
</head>
<body>
<div id="title">Htzd.org Site</div>
<div id="subtitle">Register</div>
<div id="main">
<form action="" method="get">
    <ul>
      <li>
        <label for="username">Name:</label>
        <input id="username" type="text" name="username"/>
      <div class="tip1">Input Your Name:</div>
      </li>
      <li>
        <label for="password">Password:</label>
        <input id="password" type="password" name="password"/>
          <div class="tip2">Input Your Password:</div>
      </li>
      <li>
        <label for="repassword">Confirm Password:</label>
        <input type="repassword" name="repassword"/>
      </li>
      <li>
        <label for="sex">Sex:</label>
        <input type="radio" name="sex" value="m"/>
        Male
        <input type="radio" name="sex" value="f" />
        Female </li>
      <li>
        <label for="hobby">Hobby:</label>
        <input type="checkbox" name="hobby" value="gym">
        Gym
        <input type="checkbox" name="hobby" value="reading">
        Reading
        <input type="checkbox" name="hobby" value="game"/>
        Game</li>
      <li>
        <label for="degree">Degree: </label>
        <select  id="degree" name="degree">
          <option value="0">Primary School</option>
          <option value="1">Middle School</option>
          <option value="2">College School</option>
        </select>
      </li>
      <li>
        <label>Read Agreement:</label>
      </li>
      <li>       
        <textarea name="textarea" cols="84" rows="4" readonly>Please read.......If you don't agree....., 
        </textarea>
      </li>
      <li><input id="subbtn"  name="" type="submit" value=""></li>   
    </ul>
  </form>
</div>
<div id="copyright">Copy Right Htzd.org</div>
</body>
</html>

技术关键词:

居中,form,表单元素,Input,ui,li,label,textarea,select,option,radio,check,dropdown,list,button,get,post

2019-3-30 网页设计教学 表单制作 快速Demo

猜你喜欢

2019-3-30 网页设计教学表单制作快速Demo