how2j.cn

相关下载
文件名 文件大小
answer.html 4k

工具版本兼容问题
参考答案在右侧下载


步骤 1 :

练习效果图

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
练习效果图


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-06-07 作业
李戈多



作业3
<html>
<head>
  <meta charset="GB2312">
  <style>
.red{
  color:red;
  font-size: 10px;
}
    .bottom1{
      background-color:lightskyblue;
      padding:2px;
      color:mediumblue;
      font-size:12px;
    }
.box{
  padding:2px;
  border:solid;
  border-color:lightskyblue;
}
  </style>
</head>
<div style="width:600px;height:550px;padding:10px;font:宋体;font-size:10px">

<div class="red">
  请注意,带有"*"的项目必须填写
</div>
<div class="box" >
  <div class="bottom1">
填写您的用户名:
  </div>
<table style="font-size:10px;">
  <tr> <td width="20%" style="padding:20px 0"><span style="color:red">*</span>通行证用户名:</td>
<td width="25%" style="padding:20px 0">
      <input type="text" placeholder="请输入用户名">
      <a href="">查看用户名是否被占用</a>
</td>
   <td width="55%" style="background-color:lightgray;padding:20px 0"> 用户名由a~z的英文字母(不区分大小写)、0~9的数字、点、减号或下划线组成,长度为3~18个字符,只能以数字或者字母开头和结尾,例如:kyzy_001.</span>
   </td>
  </tr>
</table>


    <div class="bottom1">请填写安全设置:(安全设置用于验证帐号和找回密码)</div>
    <div style="color:red">以下信息对保证您帐号的安全极为重要,请您务必认真填写.</div>


  <table style="font-size:10px">
    <tr>
      <td width="20%" style="padding:20px 0">
        <div><span style="color:red">*</span>输入登录密码</div>
        <div><span style="color:red">*</span>登录密码确认</div>
      </td>
      <td width="25%" style="padding:20px 0">
        <input type="text">
        <input type="text>"
      </td>
      <td width="55%" style="background-color:lightgray;padding:20px 0"> 密码长度为6~16位,区分字母大小写,登录密码可以由字母、数字、特殊字符组成.<a href="">【更多说明】</a>
      </td>
    </tr>
  </table>



  <table style="font-size:10px">
    <tr>
      <td width="20%" style="padding:20px 0">
        <div><span style="color:red">*</span>输入登录密码</div>
        <div><span style="color:red">*</span>登录密码确认</div>
      </td>
      <td width="25%" style="padding:20px 0">
        <input type="text">
        <input type="text>"
      </td>
      <td width="55%" style="background-color:lightgray;padding:20px 0"> 密码长度为6~16位,区分字母大小写,登录密码可以由字母、数字、特殊字符组成.<a href="">【更多说明】</a>
      </td>
    </tr>
  </table>

  <table style="font-size:10px">
    <tr>
      <td width="20%" style="padding:20px 0">
        <div><span style="color:red">*</span>输入登录密码</div>
        <div><span style="color:red">*</span>登录密码确认</div>
      </td>
      <td width="25%" style="padding:20px 0">
        <input type="text">
        <input type="text>"
      </td>
      <td width="55%" style="background-color:lightgray;padding:20px 0"> 密码长度为6~16位,区分字母大小写,登录密码可以由字母、数字、特殊字符组成.<a href="">【更多说明】</a>
      </td>
    </tr>
  </table>
<div align="center">
  <button style="margin-left:10px;margin-right:10px">     提交表单     </button>
</div>








</div>
</div>
</html>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-06-05 作答!
飞翔的企鹅



答案!
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form>
		<a style="color: red;">请注意: 带有"*"的项目必须填写.</a>
		<table  bordercolor="#E5E5E5" border="1">
			<tr style="background-color: #87CEFA;">
				<td colspan="3"><a style="color: blue; font: '黑体'; ">
					请填写您的用户名:</a></td>
			</tr>
			<tr style="height: 88px; background-color: #EAEAEA;">
				<td style="width: 130px;" align="center"><a style="color: red; font-size: 10px;">*</a><a>通行证用户名:</a></td>
				<td style="width: 180px;"><input type="text" value="请输入用户名"/><br/>
					<ins style="color: blue;">查看用户是否被占用</ins>
				</td>
				<td style="width: 350px; font-size: small;">
					<a>用户名由a~z的英文字母(不区分大小写)、0~9的数字、
					点、减号或者下划线组成,长度为3~18个字符,只能以数字
					或者字母开头和结尾,例如:kyzy_001.</a>
				</td>
			</tr>
			<tr style="background-color: #87CEFA;">
				<td colspan="3"><a style="color: blue; font: '黑体'; ">
					请填写安全设置:</a>
					<a style="color: blue; font-size: small;">
						(安全设置用于验证账号和找回密码)
					</a></td>
			</tr>
			<tr style="background-color: #EAEAEA;;">
				<td colspan="3"><a style="color: red;font-size: small;">
					以下信息对保证您的账号安全极为重要,请您务必认真填写。
				</a></td>
			</tr>
			<tr style="height: 88px;background-color: #EAEAEA;">
				<td style="width: 130px;" align="center"><a style="color: red;font-size: small;">*</a><a>输入登录密码:</a>
					<br /><a style="color: red;font-size: small;">*</a><a>登录密码确认:</a>
				</td>
				<td style="width: 180px;">
					<input type="password" /><br/>
					<input type="password" />
				</td>
				<td style="width: 350px; font-size: small;">
					密码长度为6~16位,区分字母大小写,登录密码可以由字母、数字
					、特殊字符组成。【<a href="">更多说明</a>】
				</td>
			</tr>
			<tr style="height: 88px;background-color: #EAEAEA;">
				<td style="width: 130px;" align="center"><a style="color: red;font-size: small;">*</a><a>密码提示问题:</a>
					<br /><a style="color: red;font-size: small;">*</a><a>密码提示答案:</a>
				</td>
				<td style="width: 180px;">
					<input type="password" /><br/>
					<input type="password" />
				</td>
				<td style="width: 350px; font-size: small;">
					当您忘记密码时可以由此找回密码,例如,问题是"我的哥哥是谁?",答案为"peter2",
					问题长度不大于36个字符,一个汉字占两个字符,答案长度在6~30位之间,区分大小写。【<a href="">更多说明</a>】
				</td>
			</tr>
			</tr>
			<tr style="height: 88px;background-color: #EAEAEA;">
				<td style="width: 130px;" align="center"><a style="color: red;font-size: small;">*</a><a>输入安全码:</a>
					<br /><a style="color: red;font-size: small;">*</a><a>安全码确认:</a>
				</td>
				<td style="width: 180px;">
					<input type="password" /><br/>
					<input type="password" />
				</td>
				<td style="width: 350px; font-size: small;">
					安全码是您找回密码的重要途径,安全码的长度在6~16位,区分字母大小写,
					由字母、数字、特殊字符组成。<a style="color: red;font-size: small;">
						特别提醒:安全码一旦设定,将不可自行修改。
					</a>
					【<a href="">更多说明</a>】
				</td>
			</tr>
			<tr align="center" style="background-color: #EAEAEA;">
				<td colspan="3"><input type="submit" value="提交表单"></td>
			</tr>
		</table>
		</form>
	</body>
</html>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-12-22 交作业
2017-12-20 用table快很多,虽然我写的比较慢
2017-03-14 也是按照图片写了一个,不是用table写的
2017-02-24 练习题贴图
2017-01-14 照图搞了一个...
2016-11-04 简单做了一下 做得不好 见谅(效果图 见下)
2016-11-02 没有见答案呢?




提问之前请登陆
关于 前端部分-CSS-综合性练习3 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 620943819
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图