how2j.cn

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

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



步骤 1 :

练习效果图

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


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


问答区域    
2021-04-15 还原度较高
up-bear




有点小缺陷,每一列的交界处有些缺口,不太完美,还请高人指点一二。
加载中
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	</head>
	
	<style>
		table{
			border-style:solid;
			border-width:2px;
			border-color:LightSkyBlue;
		}
		.textarea-1{
			background-color:Gainsboro;
		}
		div{
			margin:5px;
		}
		p{
			margin:0px;
		}
		.p1{
			color:red;
		}
		.p2{
			color:blue;
			background-color:PaleTurquoise;
		}
		.font1{
			color:blue;
		}
		.font2{
			color:red;
		}
		 button{
			background-color:white;
		}
		.button1{
			border-width:0px;
		}
		td{
			border-left-width:0px;
			border-right-width:0px;
			border-top-width:0px;
		}
		.td1{
			border-width:0px;
		}
	</style>
	
	<body>
		<p class="p1">请注意带有*的项目必须填写</p>
		<table border="2px">
			<tr>
				<td class="td1" colspan="3">
					<p class="p2">请填写您的用户名</p>
				</td>
			</tr>
			<tr height="80px">
				<td>
				<font class="font2">*</font>通用证用户名:
				</td>
				
				<td>
				<div><input type="text" placeholder="请输入用户名"></br></div>
				<div><button class="button1"><ins><font class="font1">查看用户名是否被占用<font></ins></button><div>
				</td>
				
				<td>
				<div class="textarea-1">
				<p>用户名由a~z的英文字母(不区分大小写)、0~9的数</p>
				<p>字、点、减号或下划线组成,长度为3~18个字符,只</p>
				<p>能以数字或字母开头或结尾,例如kyay_001。</p>
				</div>
				</td>
			</tr>
			<tr>
				<td class="td1" colspan="3">	
				<p class="p2">请填写安全设置:(安全设置用于验证账号和找回密码)</p>
				</td>
			</tr>
			<tr>
				<td class="td1" colspan="3">
				<p class="p1">以下信息对保证您的帐号安全极为重要,请务必认真填写</p>	
				</td>
			</tr>
			<tr height="80px">
				<td>
				<font class="font2">*</font>输入登录密码:</br>
				<font class="font2">*</font>登陆密码确认:
				</td>
				
				<td>
				<div><input type="text"></br></div>
				<div><input type="text"></div>
				</td>
				
				<td>
				<div class="textarea-1">
				<p>密码长度为6~16位,区分字母大小写,登陆密码可以</p>
				<p>由字母、数字、特殊字符组成。【<ins><font class="font1">更多说明</font></ins>】</p>
				</div>
				</td>
			</tr>
			<tr height="80px">
				<td>
				<font class="font2">*</font>密码提示问题:</br>
				<font class="font2">*</font>密码提示答案:
				</td>
				
				<td>
				<div><input type="text"></br></div>
				<div><input type="text"></div>
				</td>
				
				<td>
				<div class="textarea-1">
				<p>当您忘记密码时可以由此找回密码。例如,问题是”我</p>
				<p>的哥哥是谁?”,答案为"peter2""。问题长度不大于36</p>
				<p>个字符,一个汉字占两个字符。笞案长度在6~30位之</p>
				<p>间,区分大小写。【<ins><font class="font1">更多说明</font></ins>】</p>
				</div>
				</td>
			</tr>
			<tr height="80px">
				<td>
				<font class="font2">*</font>输入安全码:</br>
				<font class="font2">*</font>安全码确认:
				</td>
				
				<td>
				<div><input type="text"></br></div>
				<div><input type="text"></div>
				</td>
				
				<td>
				<div class="textarea-1">
				<p>安全码时您找回密码的重要途径,安全码长度为6~16</p>
				<p>位,区分字幕大小写,由字母.数字、特殊字符组</p>
				<p>成.特别提醒:安全码一旦设定,将不可自行修改.</p>
				<p>【<ins><font class="font1">更多说明<font></ins>】</p>
				</div>
				</td>
			</tr>
			<tr>
				<td class="td1" colspan="3" align="center">
				<button><font size="+1">提交表单</font></button>
				</td>
			</tr>
		</table>
	</body>
</html>

							





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





2021-03-25 近最大努力去还原页面了
镜子里的笑脸




感觉还是有些小地方不同
加载中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合性练习3</title>
    <style>
        .d1{
            width: 600px;
            height:600px;
            margin:auto;
            padding-top: 20px;
            font-size:12px;
            letter-spacing: 1px;
        }
        .d2{
            border-style: solid;
            border-color:lightblue;
            border-width: 2px;
            height:500px;

        }
        .d3{
            background-color: lightblue;
            color:steelblue;
            margin: 2px;
        }
        .d4{
            width:320px;
            background-color:#f5f4f3;
            text-align: left;
            padding:20px 0px;
        }
        .s1{font-size: 15px;
            font-weight: bold;}
        td{
            height:90px;
            text-align: center;
            border-bottom-style: solid;
            border-bottom-width: 2px;
            border-bottom-color:#dcf7f9;
        }
        .t1{
            width: 100px;
        }
        .t2{
            width:160px;
        }

        input[type=text]{
            border-style: inset;
            border-color: #666666;
            width:124px;
            background-color: ghostwhite;
            margin-bottom: 2px;
        }
        input[type=submit]{
            width:120px;
            font-size:14px;
            letter-spacing: 3px;
            margin-top: 5px;
        }

    </style>
</head>
<body>
<div class="d1">
    <span style="color: red">请注意:带有“*”的项目必须填写</span><br/>
    <div class="d2">
        <div class="d3">
            <span class="s1">填写您的用户名:</span>
        </div>
        <table>
            <tr>
                <td class="t1">
                    <span style="color: red">*</span>通行证用户名:
                </td>
                <td class="t2">
                    <input type="text" placeholder="请输入用户名"/><br/>
                    <a href="">查看用户名是否被占用</a>
                </td>
               <td><div class="d4">
                    用户名由a~z的英文字母(不区分大小写)、0~9的数字、<b>点、减号</b>或<b>下划线</b>组成,长度为3~18个字符,只能以数字或者字母开头和结尾,例如:kyzy_001.
               </div></td>
            </tr>
        </table>
        <div class="d3">
            <span class="s1">请填写安全设置:</span>(安全设置用于验证帐号和找回密码)
        </div>
        <span style="color: red">以下信息对保证您帐号的安全极为重要,请您务必认真填写.</span><br/>
        <table>
            <tr>
                <td class="t1">
                    <span style="color: red">*</span>输入登录密码:<br/>
                    <span style="color: red">*</span>登录密码确认:
                </td>
                <td class="t2">
                    <input type="text"/><br/>
                    <input type="text"/>
                </td>
                <td><div class="d4">
                    密码长度为6~16位,区分字母大小写,登录密码可以由字母、数字、特殊字符组成.【<a href="">更多说明</a>】
                </div></td>
            </tr>
            <tr>
                <td class="t1">
                    <span style="color: red">*</span>密码提示问题:<br/>
                    <span style="color: red">*</span>密码提示答案:
                </td>
                <td class="t2">
                    <input type="text"/><br/>
                    <input type="text"/>
                </td>
                <td><div class="d4">
                    当您忘记密码时可以由找回密码.例如,问题是“我的哥哥是谁”,答案为“peter2”.问题长度<b>不大于36</b>个字符,一个汉子占两个字符,答案长度在6~30位之间,区分大小写.【<a href="">更多说明</a>】
                </div></td>
            </tr>
            <tr>
                <td class="t1">
                    <span style="color: red">*</span>输入安全码:<br/>
                    <span style="color: red">*</span>安全码确认:
                </td>
                <td class="t2">
                    <input type="text"/><br/>
                    <input type="text"/>
                </td>
                <td><div class="d4">
                    安全码时您找回密码的重要途径,安全码长度为6~16位,区分字母大小写,由字母,数字特殊字符组成.<span style="color: red">特别提醒:安全码一旦设定,将不可自行修改.</span>【<a href="">更多说明</a>】
                </div></td>
            </tr>
        </table>
            <center><input type="submit" value="提交表单"></center>
    </div>
</div>
</body>
</html>

							





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





2021-01-27 大家看一下
2020-12-16 table写的
2020-11-26 使用table-cell实现


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 21 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-综合性练习3 的提问

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

上传截图