how2j.cn

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

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


步骤 1 :

练习效果图

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


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


问答区域    
2019-01-12 交作业,框框隔离弄了好久,还是要记得多用div
张小丶凡



div是个好东西
<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1" charset="utf-8">
		<title>综合练习3</title>
		<style>
		body{
			width:600px;
			font-family:"微软雅黑";
			text-align:center;
			font-size:13px;
			margin:auto;
			}
			
		table{
            width:100%;
            border-bottom:2px solid #dee7fa;
            padding:1px;
			}
		
		
		.warning{
			color:red;
			text-align:left;
			padding-left:5px;
			}
			
			
		tr{
			height:70px;

			}
		
		.title{
			background-color:#edf2fc;
			color:#436bcd;
			font-weight:bold;
			text-align:left;
			font-size:14px;
			padding-left:5px;
			}
			
		
		td{
		     padding:5px;
		}
		
		.td1{
			text-align:right;
			width:120px;
			}
		
		.td2{
			text-align:center;
			width:150px;
			}
			
		.td3{
			background-color:#f5f5f5;
			text-align:left;
			}
			
		a{
			color:blue;
			}
			
			
			
		.show{
			border:1px red solid;
		}
		
		
		
		</style>
	</head>
		<body>
			<div style="border:2px solid #dee7fa;padding:3px;margin-top:15px">
			<div class="warning">
				请注意:带有“*”的项目必须填写。
			</div>
			<table >
				<tr style="height:20px">
					<td colspan="3" class="title">请填您的用户名:</td>
				</tr>
				<tr>
					<td class="td1"><span style="color:red">*</span>通行证用户名:</td>
					<td class="td2"><input type="text" size="15" placeholder="请输入用户名"><br/><a href="#nowhere">查看用户名是否被占用</a></td>
					<td class="td3" >用户名由a~z的英文字母(不区分大小写)、0~9的数字、点、<b>减号</b>或<b>下划线</b>组成,长度为3~18个字符,只能以数字或者字母开头和结尾,例如:kyzy_001。</td>
				</tr>
				</table>
				<table>
				<tr style="height:20px">
					<td colspan="3" class="title">请填写安全设置:<span style="font-weight:normal">(安全设置用于验证账号和找回密码)</span></td>
				</tr>
				<tr style="height:20px">
					<td colspan="3" class="warning">以下信息对保证您账号安全极为重要,请务必认真填写。</td>
				</tr>
				<tr>
					<td class="td1"><span style="color:red">*</span>输入登录密码:<br/><span style="color:red">*</span>登录密码确认:</td>
					<td class="td2"><div style="margin-bottom:5px"><input type="password" size="15"></div><input type="password" size="15"></td>
					<td class="td3">密码长度为6~16位,区分字母大小写。登录密码可以由字母、数字、特殊字符组成。【<a href="#nowhere">更多说明</a>】</td>
				</tr>
				</table>
				<table>				
				<tr>
					<td class="td1"><span style="color:red">*</span>密码提示问题:<br/><span style="color:red">*</span>密码提示答案:</td>
					<td class="td2"><div style="margin-bottom:5px"><input type="text" size="15"></div><input type="text" size="15"></td>
					<td class="td3">当您忘记密码时可以由找回密码.例如,问题是“我的哥哥是谁”,答案为“peter2”.问题长度<b>不大于36</b>个字符,一个汉子占两个字符,答案长度在6~30位之间,区分大小写。【<a href="#nowhere">更多说明</a>】</td>
				</tr>	
				</table>
				<table>				
				<tr>
					<td class="td1"><span style="color:red">*</span>输入安全码:<br/><span style="color:red">*</span>安全码确认:</td>
					<td class="td2"><div style="margin-bottom:5px"><input type="text" size="15"></div><input type="text" size="15"></td>
					<td class="td3">安全码时您找回密码的重要途径,安全码长度为6~16位,区分字母大小写,由字母,数字特殊字符组成.<span class="red">特别提醒:安全码一旦设定,将不可自行修改.</span>【<a href="#nowhere">更多说明</a>】</td>
				</tr>
				</table>
				<div style="height:40px;">
					<input style="margin:10px;" type="submit" value="提交表单">
					</div>
		</div>
		</body>
</html>
		

							






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





2019-01-06 为啥我的文本框和左边的输入提示都不能够居中 vertical-align:center为啥失效
plain



为啥我的文本框和左边的输入提示都不能够居中 vertical-align:center为啥失效
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--link rel="stylesheet" type="text/css" href="file://C:/Users/Administrator/Desktop/html/hw3/style.css"/-->
<style type="text/css">
	#panel{
		width:660px;
		height: 310px;
		border: 1px solid aliceblue;
	}
	#panel2{
		width: 400px;
		height: 205px;
		
	}
	#notice{
		color:red;
		font-size: 10px;
		display: inline-block;
		vertical-align: middle;
	}
	#notice2{
		font-size: 10px;
		display: inline-block;
		vertical-align: middle;
	}
	#caption{
		color:royalblue;
		font-size:15px;
		font-weight: bold;
		background-color: aliceblue;
		border: 2px solid white;
	}
	#lf{
		height: 40px;
		float:left;
		vertical-align: middle;
		line-height: 20px;
	}
	#txt{
		background-color: whitesmoke;
		margin: 2px;
		width:200px;
		height: 20px;
		display: inline-block;
	}
	#rqmt{
		background-color: whitesmoke;
		border: 2px solid white;
		font-size: 10px;
		width:350px;
		height: 50px;
		float: right;;
		display: inline-block;
	}
</style>
</head>

<body>
	<p id="notice">请注意:带有“*”的项目必须填写</p>
	<div id="panel">
		<div id="caption">请填写您的用户名:</div>
		<div>
			<div id="lf">
				<span id="notice">*</span>
				<span id="notice2">通行证用户名:</span>
			</div>
			<div id="lf">
				<input type="text" name="ID" id="txt" placeholder="请输入用户名"/><br>
				<a style="font-size:10px" href="">查看用户名是否被占用</a>
			</div>
			<div id="rqmt">
				用户名有a-z的英文字母(不区分大小写),0!9的数字、<strong>点、减号</strong>或
				<strong>下划线</strong>组成,长度为~18个字符,只能以数字或者字母开头和结尾,例如kyzy_001
			</div>
			<div style="clear:both;"></div>
			<div id="caption">请填写安全设置: 
			<span id="notice2" style="color:skyblue">(安全设置用于验证账号和找回密码)</span>
			</div>		
		</div>
		<div>
			<div id="notice" style="margin:5px">以下信息对保证您账号的安全极为重要,请您务必认真填写</div>
			<div id="lf">
				<span id="notice">*</span>
				<span id="notice2">输入登录密码:</span><br>
				<span id="notice">*</span>
				<span id="notice2">登录密码确认:</span>
			</div>
			<div id="lf">
				<input type="text" name="PWD" id="txt"/><br>
				<input type="text" name="PWD_CF" id="txt"/><br>
			</div>
			<div id="rqmt">
				密码长度为6~16位,区分字母大小写,登录密码可以由字母、数字、特殊字符组成。
				【<a href="">更多说明</a>】
			</div>
			<div style="clear:both;border-bottom: 1px solid aliceblue;"></div>
		</div>
		
		<div>
			<div id="lf">
				<span id="notice">*</span>
				<span id="notice2">密码提示问题:</span><br>
				<span id="notice">*</span>
				<span id="notice2">登录密码确认:</span>
			</div>
			<div id="lf">
				<input type="text" name="Reminder" id="txt"/><br>
				<input type="text" name="Answer" id="txt"/><br>
			</div>
			<div id="rqmt">
				密码长度为6~16位,区分字母大小写,登录密码可以由字母、数字、特殊字符组成。
				【<a href="">更多说明</a>】
			</div>
			<div style="clear:both;border-bottom: 1px solid aliceblue;"></div>
		</div>
		
		<div>
			<div id="lf">
				<span id="notice">&nbsp;*</span>
				<span id="notice2">输入安全码:</span><br>
				<span id="notice">&nbsp;*</span>
				<span id="notice2">安全码确认:</span>
			</div>
			<div id="lf">
				<input type="text" name="SFCODE" id="txt"/><br>
				<input type="text" name="SFCODE_CF" id="txt"/><br>
			</div>
			<div id="rqmt">
				安全码是您找回密码的重要途径,安全码长度为6~16位,区分字母大小写,
				登录密码可以由字母、数字、特殊字符组成。
				<span id="notice">特别提醒: 安全码一旦设定,将不可自行修改</span>
				【<a href="">更多说明</a>】
			</div>
			<div style="clear:both;border-bottom: 1px solid aliceblue;"></div>
		</div>
		
		<div  style="text-align: center;">
			<input type="submit" name="sub"  value="提交表单"/>
		</div>
	</div>
	
	
</body>
</html>

							






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





2018-12-08 交作业
2018-11-28 交作业
2018-10-01 交作业
2018-08-13 交作业
2018-06-07 作业
2018-06-05 作答!
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群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图