how2j.cn

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

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



步骤 1 :

练习效果图

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


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


问答区域    
2019-03-30 交作业啦啦
babylove0724



作业
Css:
.main{
	height: 800px;
	width: 700px;
	margin:39px auto;
}

.content{
	height: 700px;
	width: 700px;
	border: 1px blue solid;
}
.point{
	height: 23px;
	width: 125px;
}
.line1{
	padding: 30px 0;
}
.blue1{
	background-color: 	#ADD8E6;
}
.description{
	background-color: #E6E6FA
}
.note{
	color: red;
}
.submit{
	padding: 30px 0;
	text-align:center;
}

Html:
<!DOCTYPE html>
<html>
<head>
	<title>this is a CssTest</title>
</head>
<link rel="stylesheet" type="text/css" href="D:\JavaWebStudy\codetest\TestCss\CssTest11.css">

<body>
<div class="main">
<div class="note">
	请注意:带有“*”的项目必须填写
</div>
<div class="content">
	<div class="blue1">
		填写您的用户名:
	</div>
		
<table class="line1">
	<tr>
		<td>
			<div class="point">
				<span style="color: red">*</span>通行证用户名:
			</div>
		</td>
		<td>
			<div class="inputtext">
				<input type="text" placeholder="请输入用户名"></input>
			</div>
			<div>
				<a href="">查看用户名是否被占用</a>
			</div>
		</td>
		<td>
			<div class="description">
				用户名由a~z的英文字母(不区分大小写)、0~9的数字、点、减号或下划线组成,长度为3~18个字符,只能以数字或者字母开头和结尾,例如:kyzy_001.
			</div>
		</td>
	</tr>
</table>

<div class="blue1">请填写安全设置:(安全设置用于验证账号和找回密码)</div>
<div class="note">
	以下信息对保证您账号的安全极为重要,请您务必认真填写。
</div>
		
<table class="line1">
	<tr >
		<td>
			<div class="point">
				<span style="color: red">*</span>
				<span>输入登录密码:</span>
			</div>
			<div class="point">
				<span style="color: red">*</span>
				<span>登录密码确认:</span>
			</div>
		</td>
		<td>
			<div class="inputtext">
				<input type="password"></input>
			</div>
			<div class="inputtext">
				<input type="password"></input>
			</div>
		</td>
		<td>
			<div class="description">
				<span>密码长度为6~16位,区分字母大小写,登录密码可以由字母、数字、特殊字符组成.[<a href="">更多说明</a>]</span>
			</div>
		</td>
	</tr>
</table>

<table class="line1">
	<tr>
		<td>
			<div>
				<span style="color: red">*</span>
				<span>密码提示问题</span>
			</div>
			<div class="point">
				<span style="color: red">*</span>
				<span>密码提示答案</span>
			</div>
		</td>
		<td>
			<div class="inputtext">
				<input type="text"></input>
			</div>
			<div class="inputtext">
				<input type="text"></input>
			</div>
		</td>
		<td>
			<div class="description">
				<span>当您忘记密码时可以由找回密码.例如,问题是“我的哥哥是谁”,答案为“peter2”.问题长度不大于36个字符,一个汉子占两个字符,答案长度在6~30位之间,区分大小写.[<a href="更多说明"></a>]</span>
			</div>
		</td>
	</tr>
</table>

<table class="line1">
	<tr>
		<td>
			<div class="point">
				<span style="color: red">*</span>
				<span>输入安全码</span>
			</div>
			<div class="point">
				<span style="color: red">*</span>
				<span>安全码确认</span>
			</div>
		</td>
		<td>
			<div class="inputtext">
				<input type="text"></input>
			</div>
			<div class="inputtext">
				<input type="text"></input>
			</div>
		</td>
		<td>
			<div class="description">
			<span>
				安全码时您找回密码的重要途径,安全码长度为6~16位,区分字母大小写,由字母,数字特殊字符组成.
			</span>
			<span class="note">特别提醒:安全码一旦设定,将不可自行修改.</span>[<a href="">更多说明</a>]
			</div>
		</td>
	</tr>
</table>

<div class="submit">
	<input type="submit" value="提交表单"></input>
</div>
</div>
</div>
</body>
</html>


							


1 个答案

小柒 答案时间:2019-04-08
你这个提交表单按钮不能提交到服务器吧



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-03-24 交作业 用div布局做了一点感觉太麻烦了 又改成table
唯独LI



才发现td不能设置margin 还有table用border-collapse之后就无法设置padding了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border:1px solid lightblue;
font-size:14px;
padding:3px;
}
td{
width:110px;
}
span{
color:red;
}
input{
background-color:#f5f5f5;
}
.left{
padding-left:20px;
}
.right{
width:320px;
padding:10px;
background-color:#f5f5f5;
}
td.line{
 border-top-color: lightblue;
    border-top-width: 2px;
    border-top-style: solid;
}
.redText{
color:red;
}
.blueText{
color: #426bc2;
font-weight: bold;
background-color: #edf2fc
}
</style>
</head>
<body>
<div class="redText">请注意:带有*号的项目必须填写。</div>
<div class="table">
<form>
<table>
<tr>
<td class="blueText" colspan="3">请填写您的用户名:</td>
</tr>
<tr>
<td class="left" valign="bottom"><span>*</span>通行证用户名:</td>
<td valign="bottom"><input type="text" size="18" placeholder="请输入用户名"></td>
<td class="right" rowspan="2">用户名由a~z的英文字母(不区分大小写)、0~9的数字、<b>点</b>、<b>减号</b>或<b>下划线</b>组成,长度为3~18个字符,只能以数字或字母开头和结尾,例如:kyzy_001.</td>
</tr>
<tr>
<td></td>
<td valign="top"><a href="#">查看用户名是否被占用</a></td>
</tr>

<tr>
<td class="blueText line" colspan="3">请填写安全设置:<span style="font-weight:normal;color: #426bc2;">(安全设置用于验证用户和找回密码)</span></td>
</tr>
<tr>
<td class="redText" colspan="3">以下信息对保证您的账户安全极为重要,请您务必认真填写。</td>
</tr>
<tr>
<td class="left" valign="bottom"><span>*</span>输入登录密码:</td>
<td valign="bottom"><input type="text" size="18"></td>
<td rowspan="2" class="right">密码长度为6~16位,区分字母大小写,登录密码可以由字母、数字、特殊字符组成.【<a href="#">更多说明</a>】</td>
</tr>
<tr>
<td class="left" valign="top"><span>*</span>确认登录密码:</td>
<td valign="top"><input type="text" size="18"></td>
</tr>

<tr><td class="line" colspan="3"></td></tr>
<tr>
<td class="left" valign="bottom"><span>*</span>密码提示问题:</td>
<td valign="bottom"><input type="text" size="18"></td>
<td rowspan="2" class="right">当您忘记密码时可以由找回密码.例如,问题是“我的哥哥是谁”,答案为“peter2”.问题长度不大于36个字符,一个汉子占两个字符,答案长度在6~30位之间,区分大小写.【<a href="#">更多说明</a>】</td>
</tr>
<tr>
<td class="left" valign="top"><span>*</span>密码提示答案:</td>
<td valign="top"><input type="text" size="18"></td>
</tr>

<tr><td class="line" colspan="3"></td></tr>
<tr>
<td class="left" valign="bottom"><span>*</span>输入安全码:</td>
<td valign="bottom"><input type="text" size="18"></td>
<td rowspan="2" class="right">安全码时您找回密码的重要途径,安全码长度为6~16位,区分字母大小写,由字母,数字特殊字符组成.<span class="redText">特别提醒:安全码一旦设定,将不可自行修改.</span>【<a href="#nowhere">更多说明</a>】</td>
</tr>
<tr>
<td class="left" valign="top"><span>*</span>安全码确认:</td>
<td valign="top"><input type="text" size="18"></td>
</tr>

<tr>
<td  class="line" colspan="3" align="center" style="padding:5px"><input type="submit" value="提交表单"></td>
</tr>
</table>


</form>
</div>


</body>
</html>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-03-07 提交作业
2019-03-03 内边距怎么设置
2019-03-03 交作业
2019-01-25 交了交了 调得头疼
2019-01-12 交作业,框框隔离弄了好久,还是要记得多用div
2019-01-06 为啥我的文本框和左边的输入提示都不能够居中 vertical-align:center为啥失效
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群交流: 984886441
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图