蹭课蹭来了个作业
以上是注册界面的样式及要求。
有两个想法
一是设计外表格为8*2（八行两列），每个单元格又嵌套一个小表格（1*2），小表格第一列设置对齐方式为向右对齐，第二列向左对齐（因为图片中用户名，密码等右边是对齐的，而文本框这些左边也是对齐的）。接下来的代码就是用这个方法的。
二是外表格设计为1*2的，然后左右两列都嵌套一个8*2的内表格。对齐方式同上。
话不多说，直接上代码吧。
关于行内样式和内嵌样式混用这一点，因为我不记得某些属性对应的CSS属性了，所以emmmm.......
<!DOCTYPE html>
<html>
<head>
<title>作业--注册界面</title>
<meta charset="utf-8">
<style type="text/css">
caption{
font:30px 宋体 black;
}
table{
margin:auto;
}
.table1{
margin:0px 10px;
}
td{
padding:5px;
}
input{
border:solid 1px #436EEE;
}
#button{
background-color:#71C671;
border-radius:8px;
text-align:center;
height:40px;
width:130px;
}
#right{
align:right;
}
#left{
align:left;
}
</style>
</head>
<body>
<table>
<caption align="center">注册</caption>
<tr>
<td colspan="2"> <!--第一行跨两列-->
<table class="table1"> <!--table1用于跨两列的表格中，不能设置margin为auto,不然不能和别的文字向右对齐-->
<tr>
<td class="right"> <!--向右对齐-->
用户名：
</td>
<td class="left"> <!--向左对齐-->
<form>
<!--最大输入长度为6，placeholder属性设置提示内容，当有输入时不显示提示，没有输入则显示，required属性表示此项为必填项-->
<input type="text" maxlength="6" placeholder="请输入不超过6位的字符" required="required"/>
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="right">
密 码：
</td>
<td class="left">
<form>
<input type="password" maxlength="16" placeholder="请输入6-16位的数字与字母" required="required"/>
</form>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="right">
真实姓名：
</td>
<td class="left">
<form>
<input type="text">
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="right">
确认密码：
</td>
<td class="left">
<form>
<!--密码框-->
<input type="password"/>
</form>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="right">
手机号码：
</td>
<td class="left">
<form>
<!--pattern的值为正则表达式（好像是的吧），意思是输入11位0-9之间的数字-->
<input type="text" placeholder="请输入11位数字 "pattern="[0-9]{11}"/>
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table class="table1">
<tr>
<td class="right">
性 别：
</td>
<td class="left">
<form>
<!--单选按钮，要求name的值要一样，不然就不是单选了-->
<input type="radio" name="sex" value="男" />男
</form>
</td>
<td>
<form>
<input type="radio" name="sex" value="女" />女
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="right">
民 族：
</td>
<td class="left">
<form>
<input type="text" list="nation" />
<!--这个叫啥我忘了......，跟select是差不多的功能，但是和select不一样的是，如果选项中没有你要选的，可以自己在文本框中填写-->
<datalist id="nation">
<option>汉族</option>
<option>壮族</option>
<option>苗族</option>
<option>彝族</option>
</datalist>
</form>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="right">
邮 箱：
</td>
<td class="left">
<form>
<input type="text" name="email" size="20"/>
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table class="table1">
<tr>
<td align="right">
爱 好：
</td>
<td>
<form>
<input type="checkbox" name="basketball"/>篮球
<input type="checkbox" name="football"/>足球
<input type="checkbox" name="wushu"/>武术
<input type="checkbox" name="swimming"/>游泳
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="right">
国 家：
</td>
<td class="left">
<form>
<input type="text" list="country" />
<datalist id="country">
<option value="CN" selected="selected">中国</option>
<option value="USA">美国</option>
<option value="French">法国</option>
<option value="Japan">日本</option>
</datalist>
</form>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="right">
城 市：
</td>
<td class="left">
<form>
<input type="text" list="city" />
<datalist name="city">
<option>上海</option>
<option selected="selected">北京</option>
<option>南京</option>
<option>杭州</option>
</datalist>
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr height="100">
<td align="center" valign="bottom">
<form>
<input type="submit" id="button" value="立即注册" />
</form>
</td>
<td align="center" valign="bottom">
<form>
<input type="reset" id="button" value="重置" />
</form>
</td>
</tr>
</table>
</body>
</html>
我自己是不怎么给代码写注释的，然而这毕竟是放出来给别人看的，还是加点注释解释一下自己在干嘛吧。于是加了注释后，我运行了下打算截图，结果却变成了这样.....
我在style中定义的样式失效了？？？？黑人问号，然后我突然想起来CSS的注释是用 // 的，而我用的是HTML的<!-- -->，好吧，于是我就改过来了，结果还是一样。我就把style里的注释都删了，就得到了没写注释之前，正确的页面-_-
为什么会这样？？？？难道不能在style中写注释？？
好的，我知道原因了。style里的注释要用/* */。
------------------------------------------------------------------------------------------------------------------------------------------------------------------
看了下同学的布局和页面，然后，-_-我写的是什么垃圾页面啊......
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
