HTML的练习题,求解

html-css029

HTML的练习题,求解,第1张

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>表单</title>

</head>

<style>

* {

margin: 0 auto

padding: 0

}

body {

background-color: #8acff0

}

.zongjian {

width: 300px

margin: 0 auto

margin-top: 10%

}

.zongjian p {

width: 100%

float: left

line-height: 30px

}

.zongjian p span {

line-height: 30px

margin-right: 10px

}

.zongjian p input {

line-height: 20px

}

.zongjian p font {

color: red

font-size: 18px

line-height: 30px

margin-left: 5px

}

.zuce {

background-color: #7df9dd

float: right

font-size: 14px

padding: 2px 5px

box-shadow: 1px 0px 0px 2px rgba(79, 180, 190, 0.9686274509803922), 0px 0px 0px 2px rgba(79, 180, 190, 0.9686274509803922)

}

.tishi {

width: 100%

float: left

color: red

height: 16px

}

</style>

<body>

<div class="zongjian">

  <p><span>会员账号:</span>

    <input id="name" onblur="onname()">

    <font>*</font></p>

  <div class="tishi" id="namets"></div>

  <p><span>邮箱地址:</span>

    <input id="email" onblur="onemail()">

    <font>*</font></p>

  <div class="tishi" id="emailts"></div>

  <p><span>登录密码:</span>

    <input id="password" onblur="onpassword()">

    <font>*</font></p>

  <div class="tishi" id="passwordts"></div>

  <p><span>确认密码:</span>

    <input id="qrpassword" onblur="onqrpassword()" type="password">

    <font>*</font></p>

  <div class="tishi" id="qrpasswordts"></div>

  <div class="zuce" onClick="tijiao()">注册</div>

</div>

<script>

function onname()

{

   var name = document.getElementById('name').value

   if(name=="")

   {

  document.getElementById('namets').innerText = "会员账号不能为空"

  return false

}

else if(name.length < 9)

{

document.getElementById('namets').innerText = "账号不能少于9位!"

return false

}

else

{

 document.getElementById('namets').innerText = ""

 return true

}

}

function onemail()

{

    var email = document.getElementById('email').value

if(email=="")

    {

  document.getElementById('emailts').innerText = "邮箱不能为空"

  return false

}

else if(email.indexOf('@')<0)

{

document.getElementById('emailts').innerText = "邮箱必须存在@"

return false

}

else

{

 document.getElementById('emailts').innerText = ""

 return true

}

}

function onpassword()

{

     var password = document.getElementById('password').value

 if(password=="")

    {

  document.getElementById('passwordts').innerText = "密码不能为空"

  return false

}

else if(password.length < 6)

{

      document.getElementById('passwordts').innerText = "密码必须大于6位"

  return false

}

else

{

 document.getElementById('passwordts').innerText = ""

return true

}

}

function onqrpassword()

{     

    var password = document.getElementById('password').value

    var qrpassword = document.getElementById('qrpassword').value

if(qrpassword=="")

    {

  document.getElementById('qrpasswordts').innerText = "确认密码不能为空"

  return false

}

else if(password!=qrpassword)

{

document.getElementById('qrpasswordts').innerText = "两次输入不一致"

return false

}

else

{

 document.getElementById('qrpasswordts').innerText = ""

 return true

}

     

}

function tijiao()

{

if(onname()&&onemail()&&onpassword()&&onqrpassword())

{

alert("提交成功")

}

else

{

alert("提交失败!")

}

}

</script>

</body>

</html>

<table border="1" bordercolor="black" table align ="center" cellpadding="0" cellspacing="0" width="300">

<tr>

<td>1</td>

<td rowspan="2">2</td>

<td>

<table border="1" width="80%" align="center" bgcolor="blue">

<tr>

<td>a</td>

<td rowspan="2">b</td>

<td>c</td>

</tr>

<tr>

<td>d</td>

<td>f</td>

</tr>

<tr>

<td>g</td>

<td>h</td>

<td>i</td>

</tr>

</table></td>

</tr>

<tr>

<td>

<table border="1" width="80%" align="center" bgcolor="green">

<tr>

<td>a</td>

<td colspan="2">b</td>

</tr>

<tr>

<td>d</td>

<td>e</td>

<td>f</td>

</tr>

<tr>

<td>g</td>

<td>h</td>

<td>i</td>

</tr>

</table>

</td>

<td>6</td>

</tr>

<tr>

<td>7</td>

<td>8</td>

<td>9</td>

</tr>

</table>

宽度是150 可是太小了跟图示不一样 我改了300 因为手打的 具体多少颜色我也不知道 我用green跟blue