how2j.cn

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

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



步骤 1 :

练习效果图

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


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


问答区域    
2020-01-12 小企业的前端Time-CSS 综合性练习3
小企业哒




终于搞完啦
加载中
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/css; charset=UTF-8">
        <title>综合性练习3</title>
    </head>
    
    <body>
        <style>
            div.background{
                /*设置最外层背景属性:绝对定位,距左右边界29%,距上边界9%*/
                position:absolute;
                left:29%;
                right:29%;
                top:9%;
            }

            div.block{
                 /*设置内层背景属性:距左右边界30%,距上边界10%.边框属性:2像素,实线,蓝色*/
                left:30%;
                right:30%;
                top:10%;
                border:2px solid LightBlue;
            }
	
            table.block{
                /*这是表格属性:边框分割,边框属性:2像素,实线 蓝色*/
                border-collapse:separate;
                border-bottom:2px solid LightBlue;
            }
            
            td.left_text{
                /*设置左侧列文字属性:14像素,居中,宽度占据行的20%*/
                font-size:14px;
                text-align:center;
                width:20%;
            }
            
            td.center_text{
                /*设置中间列文字属性:14像素占据行的行的25%*/
                font-size:14px;
                text-align:center;
                width:25%;
            }
            
            td.right_annotation{
                /*设置右侧列文字属性:14像素,背景为灰白,高100px*/
                font-size:14px;
                background-color:GhostWhite;
                height:100px;
                margin-left:10px;
            }
            
            .center_box{
                /*设置文本框属性:背景灰白,占据列宽度的80%*/
                background-color:GhostWhite;
                width:80%;
            }
            
            td.title{
                /*设置列标题属性:加粗,16像素,蓝色,背景为亮蓝*/
                font:normal bold 16px "default";
                color:SteelBlue;
                background-color:LightBlue;
            }
            
            span.title{
                /*设置警告文字属性:14像素,红色*/
                font:normal normal 14px "default";
                color:Red;
            }
        </style>

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

                <table class="block" border="0" CELLSPACING="5">
                    <tr>
                        <td colspan="3" class="title">填写您的用户名:<span class="title">(安全设置用于验证帐号和找回密码)</span></td>
                    </tr>
                    
                    <tr>
                        <td colspan="3" style="background-color:White" class="title"><span class="title">以下信息对保证您帐号的安全极为重要,请您务必认真填写.</span></td>
                    </tr>
                    <tr>
                        <td class="left_text"><font color="red">*</font>输入登录密码:<br/><font color="red">*</font>登录密码确认:</td>
                        <td class="center_text"><input class="center_box" type="text" name="name"><br/><input class="center_box" type="text" name="name"></td>
                        <td class="right_annotation">密码长度为6~16位,区分字母大小写,登录密码可以由字母、数字、特殊字符组成.【<a href=" ">更多说明</a>】</td>
                    </tr>
                </table>

                <table class="block" border="0" CELLSPACING="5">
                    <tr>
                        <td class="left_text"><font color="red">*</font>密码提示问题:<br/><font color="red">*</font>密码提示答案:</td>
                        <td class="center_text"><input class="center_box" type="text" name="name"><br/><input class="center_box" type="text" name="name"></td>
                        <td class="right_annotation">当您忘记密码时可以由找回密码.例如,问题是“我的哥哥是谁”,答案为“peter2”.问题长度不大于36个字符,一个汉子占两个字符,答案长度在6~30位之间,区分大小写.【<a href=" ">更多说明</a>】</td>
                    </tr>
                </table>

                <table class="block" border="0" CELLSPACING="5">
                    <tr>
                        <td class="left_text"><font color="red">*</font>输入安全码:<br/><font color="red">*</font>安全码确认:</td>
                        <td class="center_text"><input class="center_box" type="text" name="name"><br/><input class="center_box" type="text" name="name"></td>
                        <td class="right_annotation">安全码时您找回密码的重要途径,安全码长度为6~16位,区分字母大小写,由字母,数字特殊字符组成.<font color="red">特别提醒:安全码一旦设定,将不可自行修改.</font>【<a href=" ">更多说明</a>】</td>
                    </tr>
                </table>
                
                <div style="text-align:center">
                    <input style="margin:10px;" type="button" value="提 交 表 单"  margin:0px; >
                </div>
           </div>
        </div>
    </body>
</html>

							





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





2019-10-23 交作业
空白丨旋律




比给的答案简洁一点
加载中
<html>
<style>
div{
font-size:50%;
font-family:黑体;
}
span{
color:red;
}
table{
font-size:50%;
border-style:solid;
border-width:1px;
border-color:rgb(210,210,255);
border-collapse:collapse;
}
tr.nn{
border-top-style:solid;
border-top-width:2px;
border-top-color:rgb(210,210,255);
}
td.aa{
background:rgb(230,230,255);
color:blue;
}
td.ac{
width:300px;
}

input{
width:135px;
background:rgb(245,245,245);
font-size:50%;
border-style:solid;
border-color:gray;
border-width:thin;
}
input.ad{
width:80px;
margin:7px;
}
p{
background:rgb(245,245,245);
padding:10px;
}
a{
color:blue;
}
</style>
<div>
<span>请注意:带有“*”的项目必须填写。</span>
<table>
<tr>
<td colspan="3" class="aa"><b>请填写您的用户名:</b></td>
</tr>
<tr>
<td><span>*</span>通行证用户名:</td>
<td ><input type="text" placeholder="请输入用户名"><br/><a href="https://www.baidu.com/">查看用户名是否被占用</a></td>
<td class="ac"><p>用户名由a~z的英文字母(不区分大小写)、0~9的数字、点、减号或下划线组成,长度为3~18个字符,只能以数字或者字母开头和结尾,例如:kyzy_001.</p></td>
</tr>
<tr class="nn">
<td colspan="3" class="aa"><b>请填写安全设置:</b>(安全设置用于验证账号和找回密码)</td>
</tr>
<tr>
<td colspan="3"><span>以下信息对保证您账号的安全极为重要,请您务必认真填写。</span></td>
</tr>
<tr>
<td><span>*</span>输入登录密码:</td>
<td><input type="password"></td>
<td rowspan="2" class="ac"><p>密码长度为6~16位,区分字母大小写。登录密码可以由字母、数字、特殊字符组成。【<a href="https://www.baidu.com/">更多说明</a>】</p></td>
</tr>
<tr>
<td><span>*</span>登录密码确认:</td>
<td><input type="password"></td>
</tr>
<tr class="nn">
<td><span>*</span>密码提示问题:</td>
<td><input type="password"></td>
<td rowspan="2" class="ac"><p>当你忘记密码时可以由此找回密码。例如,问题是“我的哥哥是谁?”,答案为“peter2”。问题长度不大于36个字符,一个汉字占两个字符。答案长度在6~30位之间,区分大小写。【<a href="https://www.baidu.com/">更多说明</a>】</p></td>
</tr>
<tr>
<td><span>*</span>密码提示答案:</td>
<td><input type="password"></td>
</tr>
<tr class="nn">
<td align="right"><span>*</span>输入安全码:</td>
<td><input type="password"></td>
<td rowspan="2" class="ac"><p>安全码是找回密码的重要途径,安全码长度为6~16位,区分字母大小写,由字母、数字、特殊字符组成。<span>特别提醒:安全码一旦设定,将不可自行修改。</span>【<a href="https://www.baidu.com/">更多说明</a>】</p></td>
</tr>
<tr>
<td align="right"><span>*</span>安全码确认:</td>
<td><input type="password"></td>
</tr>
<tr class="nn">
<td colspan="3" align="center"><input class="ad" type="button" value="提 交 表 单"></td>
</tr>
</table>
</div>
</html>

							





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





2019-10-21 交作业,搞了四遍,可算会搞了。。。
2019-09-25 提交
2019-09-17 交作业
2019-08-30 交作业!!
2019-08-27 交作业!!!!
2019-07-25 兄弟们,我吐了
2019-07-23 ZZ交作业 CSS-综合性练习3
2019-07-22 。。。。
2019-07-05 最新作业
2019-05-29 提交提交,写的不是很好
2019-04-24 交作业
2019-03-30 交作业啦啦
2019-03-24 交作业 用div布局做了一点感觉太麻烦了 又改成table
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群交流: 982790551
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图