how2j.cn

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

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



步骤 1 :

练习效果图

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


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


问答区域    
2021-01-27 大家看一下
lizui




写好了,差不多吧,多多指点
加载中
<!DOCTYPE html>
<head>
    <title>表单</title>
    <meta charset="utf-8">
</head>
<body>
    
    <form>
        <span>请注意:带有“*”的项目必须填写</span>

        <table>
            
            <tr>
                <td colspan="3" class="title">
                    请填写您的用户名:
                </td>
            </tr>
            <tr class="tr1">
                <td class="left">
                    <span>*</span>通行证用户名:
                </td>
                <td>
                    <input type="text" placeholder="请输入用户名"><br>
                    <span><a href="none">查看用户名是否被占用</a></span>
                </td>
                <td class="right">
                    用户名由a~z的英文字母(不区分大小写)、0~9的数字、
                    减号或下划线组成,长度为3~18个字符,只能以数字或字母开头或结尾,列入kyzy_001.
                </td>
            </tr>
            <tr>
                <td colspan="3" class="title" style="border-top: 2px solid lightblue;">
                    请填写安全设置:(安全设置用于验证账号和密码)
                </td>   
            </tr>
            <tr>
                <td colspan="3">
                    <span>以下信息对保证您账号的安全几位重要,请务必认真填写.</span>
                </td>
            </tr>
            <tr class="tr1">
                <td>
                    <span>*</span>输入登录密码:<br>
                    <span>*</span>登录密码确认:
                </td>
                <td>
                    <input type="text"><br>
                    <input type="text">

                </td>
                <td class="right">
                    密码长度为6~16位,区分大小写,登录密码可以由字母、数字、特殊字符组成。
                    【<a href="none">更多说明</a>】
                </td>
            </tr>
            <tr class="tr1">
                <td>
                    <span>*</span>密码提示问题:<br>
                    <span>*</span>密码提示答案:
                </td>
                <td>
                    <input type="text"><br>
                    <input type="text">
                </td>
                <td class="right">
                    当您忘记密码时可以由此找回密码,例如,问题时“
                    我的哥哥是谁?”,答案为“peter2”.问题长度不大于36个字符
                    ,答案长度在6~30位之间,区分大小写.
                    【<a href="none">更多说明</a>】
                </td>
            </tr>
            <tr class="tr1">
                <td>
                    <span>*</span>输入安全码:<br>
                    <span>*</span>安全吗确认:
                </td>
                <td>
                    <input type="text"><br>
                    <input type="text">
                </td>
                <td class="right">
                    安全码是您找回密码的重要途径,安全吗长度位6~16
                    位,区分字母大小写,由字母、数字、特殊字符组成.<span>特别提醒:安全码一旦设定,将不可自行更改.</span>
                    【<a href="none">更多说明</a>】
                </td>
            </tr>
            <tr>
                <td colspan="3" class="tijiao">
                    <input type="submit" value="提交表单" id="sub">
                </td>
            </tr>
            
        </table>
    </form>
</body>
<style type="text/css">

table{
    
    width: 550px;
    border: 1px lightblue solid;
    font-size: 12px;
    border-collapse: collapse;
}
.title{
    color:blue;
    background-color: rgb(210, 246, 228);
    font-weight: bold;
    font-size: 15px;
}
.left{
    text-align: right;
    width: 100px;   
}
.right{
    background-color: whitesmoke;
    padding: 10px;
    
}
input{
    background-color:whitesmoke;
    width: 120px;
}
span{
    font-size: 10px;
    color: red;
}
.tijiao{
    text-align: center;
}
.tr1{
    
    border-bottom: 3px solid lightblue;
   
}
#sub{
    margin: 5px;
}
</style>

							





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





2020-12-16 table写的
苗233




table写的,没用div
加载中
<html>

<head>
<meta charset=UTF-8>
</head>

<body>

<style>
.red{
    color:red;
    font-size:10px;
}
.bold{
    font-weight: bold;
}
table{
    border:1px lightblue solid;
    width: 550px;
    font-size:12px;
}
.title{
    background-color: rgb(210, 226, 248);
    color: rgb(70, 90, 180);
    font-weight: bold;
    font-size:15px;
}
td.left{
    text-align:right;
    width: 100px;
}
td.right{
    background-color: whitesmoke;
    padding: 10px;
}
td.submit{
    text-align: center;
}
input{
    background-color: whitesmoke;
    width: 120px;
}
tr.duan{
    height:2px;
    background-color: lightskyblue;
}
</style>

<span class=red>请注意,带有"*"的项目必须填写.</span><br>
<table>

    <tr class=title>
        <td colspan="3">请填写您的用户名:</td>
    </tr>

    <tr>
        <td class=left><span class=red>*</span>通行证用户名</td>
        <td><input placeholder="请输入用户名"><br><a href="#">查看用户名是否被占用</a></td>
        <td class=right>用户名由<span class=bold>a~z</span>的英文字母(不区分大小写)、<span class=bold>0~9</span>的数字、<span class=bold>点</span>、<span class=bold>减号</span>或<span class=bold>下划线</span>组成,长度为<span class=bold>3~18</span>个字符,只能以数字或者字母开头和结尾,例如kyzy_001.</td>
    </tr>

    <tr class=title>
        <td colspan="3" style="border-top:2px solid lightskyblue">请填写安全设置:<span style="font-size:small;font-weight: normal;">(安全设置用于验证账号和找回密码)</span></td>
    </tr>

    <tr>
        <td colspan="3" class=red>以下信息对保证您账号的安全极为重要,请您务必认真填写.</td>
    </tr>

    <tr>
        <td class=left><span class=red>*</span>输入登录密码:<br><span class=red>*</span>登录密码确认:</td>
        <td><input name=密码><br><input name=确认密码></td>
        <td class=right>密码长度为<span class=bold>6~16</span>位,区分字母大小写,登陆密码可以由字母、数字、特殊字符组成.【<a href="#">更多说明</a>】</td>
    </tr>

    <tr class=duan>
        <td colspan="3"></td>
    </tr>

    <tr>
        <td class="left"><span class=red>*</span>密码提示问题:<br><span class=red>*</span>密码提示答案:</td>
        <td><input name=问题><br><input name=答案></td>
        <td class="right">当你忘记密码时可以由此找回密码.例如,问题是“我的哥哥是谁?”,答案为“peter2”.问题长度<span class=bold>不大于36</span>个字符,一个汉字占两个字符.答案长度在<span class=bold>6~30</span>位之间,区分大小写.【<a href="#">更多说明</a>】</td>
    </tr>

    <tr class=duan>
        <td colspan="3"></td>
    </tr>

    <tr>
        <td class="left"><span class=red>*</span>输入安全码:<br><span class=red>*</span>安全码确认:</td>
        <td><input name=安全码><br><input name=安全码确认></td>
        <td class="right">安全码是您找回密码的重要途经,安全码长度为<span class=bold>6~16</span>位,区分字母大小写,由字母、数字、特殊字符组成.<span class=red>特别提醒:安全码一旦设定,将不可自行修改.</span>【<a href="#">更多说明</a>】</td>
    </tr>

    <tr class=duan>
        <td colspan="3"></td>
    </tr>

    <tr>
        <td colspan="3" class=submit><input type="button" value="提 交 表 单" style="width:100px"></td>
    </tr>

</table>

</body>

</html>

							





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





2020-11-26 使用table-cell实现
2020-08-27 mark
2020-08-14 做了好久我擦


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

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

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

上传截图