CSS系列教材（三十一）- 练习

下载区
文件名	文件大小
answer.html	4k
解压rar如果失败，请用5.21版本或者更高版本的winrar 点击下载 winrar5.21

工具版本兼容问题

参考答案在右侧下载

纠

步骤 1 :

练习效果图

edit 顶折

纠问

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

CSS系列教材（三十）- 练习 - 综合性练习2

CSS系列教材（三十二）- 应用 - 显示图片一部分

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

问答区域

2024-07-25 综合练习3

虚心求学

关于前端部分-CSS-综合性练习3 的提问

使用 table、input 元素和 vertical-alig等 css 样式结合实现。文件路径和组成: 类别路径 html 文件：根目录\.html CSS 文件：根目录\css\style.css

/*----------------------- CSS文件 ------------------------------*/

.title{
	background-color:lightblue;
	margin-top:2px;
	color:steelblue;
	font-weight:bold;
	font-size:15px;
}

.emphase{
	color:red;
	font-size:12px;
	letter-spacing:1px;
}

.itembox{
	height:90px;
	border-bottom:2px solid lightcyan;
	display:table-cell;
	width:100%;
}

td{
	font-size:12px;
	letter-spacing:1px;
}

.txt{
	width:125px;
	border:2px solid black;
	background-color:#F8F8FF;
	margin-top:3px;
}

.info{
	height:85px;
	display:table-cell;
	vertical-align:middle;
	background-color:whitesmoke;
	padding-left:7px;
	padding-right:25px;
}

a{
	color:#551A8B;
	font-size:11px;
}

.label{
	margin-left:10px;
	margin-top:3px;
                width:100px;
}

<!-------------------------- html 文件 --------------------------->

<html>
    <head>
        <meta http-equiv="Content-Type" connect="text/html;charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href = "style.css"/>
    </head>

    <body>
        <div class="background"  style="width:700px;padding:20 ; margin:0 auto;">
        	<span class="emphase">请注意：带有“*”的项目必须填写</span>
            <div class="mainbox" style="border:2px solid lightblue;width:610px">
        	  <div class="title">填写您的用户名：</div>
        	<div class="itembox">
	<table>
	      <tr>
		<td>
		<div  class="label">
		    <font class="emphase">*</font>通行证用户名：
		</div>
		</td>
		<td style="text-align:center;">
		    <input class="txt" placeholder="请输入用户名" style="margin-bottom:5px;color:lightgray;background-color:ghostwhite;">
		    <br/><a href="#">查看用户名是否被占用</a>
		</td>
		<td>
		    <div class="info">
			用户名由a~z的英文字母（不区分大小写）、
			0~9的数字、<strong>点、减号</strong>
			或<strong>下划线</strong>组成，
			长度为3~18个字符，只能以数字或者字母开头和结尾，
			例如：kyzy_001.
		    </div>
		</td>
	      </tr>
	</table>
	</div>

        	  <div class="title" style="margin-bottom:9px;">请填写安全设置：<font style="font-size:small;font-weight:normal">（安全设置用于验证帐号和找回密码）</font></div>
	  <span class="emphase">以下信息对保证您帐号的安全极为重要，请您务必认真填写.</span>
        	<div class="itembox">
	<table>
	      <tr>
		<td>
		    <div class="label"><font class="emphase">*</font>输入登录密码：<br/>
		    <font class="emphase">*</font>登录密码确认：</div>
		</td>
		<td>
		    <input class="txt"><br/>
		    <input class="txt">
		</td>
		<td>
		    <div class="info">
			密码长度为6~16位，区分字母大小写，登录密码可以由字母、数字、特殊字符组成.【<a href="#">更多说明</a>】
		    </div>
		</td>
	      </tr>
	</table>
	</div>

	<p style="margin:0"></p>
	<div class="itembox">
	<table>
	      <tr>
		<td>
		    <div class="label"><font class="emphase">*</font>密码提示问题：</div>
		    <div class="label"><font  class="emphase">*</font>密码提示答案：</div>
		</td>
		<td>
		    <input class="txt"><br/>
		    <input class="txt">
		</td>
		<td>
		    <div class="info">
			当您忘记密码时可以由找回密码.例如，问题是“我的哥哥是谁”，答案为“peter2”.问题长度不大于36个字符，一个汉子占两个字符，答案长度在6~30位之间，区分大小写.【<a href="#">更多说明</a>】
		    </div>
		</td>
	      </tr>
	</table>
	</div>


	<p style="margin:0"></p>
	<div class="itembox">
	<table>
	      <tr>
		<td>
		    <div class="label"><font class="emphase">*</font>输入安全码：</div>
		    <div class="label"><font  class="emphase">*</font>安全码确认：</div>
		</td>
		<td>
		    <input class="txt"><br/>
		    <input class="txt">
		</td>
		<td>
		    <div class="info">
			安全码时您找回密码的重要途径，安全码长度为6~16位，
			区分字母大小写，由字母，数字特殊字符组成.
			<font class="emphase">特别提醒：安全码一旦设定，将不可自行修改.</font>
			【<a href="#">更多说明</a>】
		    </div>
		</td>
	      </tr>
	</table>
	</div>

	<div class="endline" style="text-align:center;margin:10px">
		<input type="submit" value="提交表单" style="width:120px;letter-spacing:5px;font-size:12px;">
	</div>	

            </div>
        </div>
    </body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-05-05 还是有亿点点差别

小桥轻轻

关于前端部分-CSS-综合性练习3 的提问

交作业~~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-size: 12px;
        }
        .red{
            color: red;
        }
        .blue{
            color: rgb(41,108,194);
        }
        .bold{
            font-weight: bold;
        }
        td.col1{
            width: 100px;
            text-align: right;
            padding-right:10px;
        }
        td.col2{
            width: 120px;
            padding-right: 5px;
        }
        td.col3{
            width: 300px;
            background-color: #EEEEEE;
            padding: 10px;
        }
        input[type="text"]{
            width: 120px;
        }
        input[type="password"]{
            width: 120px;
        }
    </style>
</head>
<body>
<span class="red">请注意：带有“*”的项目必须填写.</span>
<table style="border: 1px solid lightblue;">
    <tr>
        <td colspan="3" style="background-color: rgb(235,242,252);">
            <span class="blue bold">请填写您的用户名:</span>
        </td>
    </tr>
    <tr>
        <td class="col1">
            <span class="red">*</span>通行证用户名:
        </td>
        <td class="col2">
            <input type="text" placeholder="请输入用户名"><br/>
            <a href="#">查看用户名是否被占用</a>
        </td>
        <td class="col3">
            用户名由a~z的英文字母（不区分大小写）、0~9的数字、<b>点</b>、<b>减号</b>或<b>下划线</b>组成，长度为3~18个字符，只能以数字或者字母开头和结尾，例如:kyzy_001.
        </td>
    </tr>
    <tr>
        <td colspan="3" style="background-color: rgb(235,242,252);border-top:2px solid lightblue;">
            <span class="blue bold">请填写安全设置：</span><span class="blue">（安全设置用于验证账号和找回密码）</span>
        </td>
    </tr>
    <tr>
        <td colspan="3"><span class="red">以下信息对保证您账号的安全极为重要，请您务必认真填写.</span></td>
    </tr>
    <tr>
        <td class="col1" style="vertical-align: bottom;">
            <span class="red">*</span>输入登录密码:
        </td>
        <td class="col2" style="vertical-align: bottom;">
            <label><input type="password"></label>
        </td>
        <td class="col3" rowspan="2">
            密码长度为6~16位，区分字母大小写，登陆密码可以由字母、数字、特殊字符组成.【<a href="#">更多说明</a>】
        </td>
    </tr>
    <tr>
        <td class="col1" style="vertical-align: top;">
            <span class="red">*</span>登录密码确认:
        </td>
        <td class="col2" style="vertical-align: top;">
            <label><input type="password"></label>
        </td>
    </tr>
    <tr>
       <td colspan="3">
           <div style="width:100%;padding-top:2px;margin-bottom:2px;border-bottom:2px solid lightblue;"></div>
       </td>
    </tr>
    <tr>
        <td class="col1" style="vertical-align: bottom;">
            <span class="red">*</span>密码提示问题:
        </td>
        <td class="col2" style="vertical-align: bottom;">
            <label><input type="text"></label>
        </td>
        <td class="col3" rowspan="2">
            当您忘记密码时可以由此找回密码. 例如，问题是“我的哥哥是谁？”，答案为“peter2”. 问题长度<b>不大于36</b>个字符，一个汉字占两个字符. 答案长度在6~30位之间，区分大小写.【<a href="#">更多说明</a>】
        </td>
    </tr>
    <tr>
        <td class="col1" style="vertical-align: top;">
            <span class="red">*</span>密码提示答案:
        </td>
        <td class="col2" style="vertical-align: top;">
            <label><input type="text"></label>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <div style="width:100%;padding-top:2px;margin-bottom:2px;border-bottom:2px solid lightblue;"></div>
        </td>
    </tr>
    <tr>
        <td class="col1" style="vertical-align: bottom;">
            <span class="red">*</span>输入安全码:
        </td>
        <td class="col2" style="vertical-align: bottom;">
            <label><input type="text"></label>
        </td>
        <td class="col3" rowspan="2">
            安全码是您找回密码的重要途径，安全码长度为6~16位，区分字母大小写，由字母、数字、特殊字符组成。<span class="red">特别提醒：安全码一旦设定，将不可自行修改.</span>【<a href="#">更多说明</a>】
        </td>
    </tr>
    <tr>
        <td class="col1" style="vertical-align: top;">
            <span class="red">*</span>安全码确认:
        </td>
        <td class="col2" style="vertical-align: top;">
            <label><input type="text"></label>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <div style="width:100%;padding-top:2px;margin-bottom:2px;border-bottom:2px solid lightblue;"></div>
        </td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: center;padding-bottom: 5px;">
            <input type="submit" value="提交表单">
        </td>
    </tr>
</table>
</body>
</html>

1 个答案

CharlieLong
答案时间：2023-10-27

作业答案

代码超过 5行，点击查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign In</title>
</head>
<body>
<style>
  div.items_usr{
    text-align: right;
  }
  body{
    font-size: 12px;
    font-family: "Heiti SC";
  }
  .alert{
    color: red;
  }
  div.subtitle{
    color: #5281cb;
    font-weight: bold;
    font-family: "Heiti SC";
    background-color: #eef2fb;
    /*width: 95%;*/
  }
  .items_usr,input{
    margin-top: 3px;
  }

  td{
    border-collapse: collapse;
  }
  td.td_info{
    background-color: #f5f5f5;
  }
  div.items_info{
    text-align: left;
    margin: 5px;
  }
  button{
    letter-spacing: 2px;
  }
  div.crossline{
    border:1px solid #d2ddff;
  }
</style>
<div class="alert">请注意：带有“*”的项目必须填写</div>
<table  style="width: 605px;height: 420px; border-collapse: collapse;border: solid 2px #d2ddff;">
  <tbody>
  <tr >
    <td colspan="3">
      <div class="subtitle">请填写您的用户名:</div>
    </td>
  </tr>
  <tr>
    <td width="110px">
      <div class="items_usr"><span class="alert">*</span>通行证用户名：</div>
    </td>
    <td width="130px">
      <div>
        <div class="items">
          <input type="text" placeholder="请输入用户名">
          <div class="items_usr"></div><a href="" target="_blank">查看用户名是否被占用</a></div>
      </div>
      </div>
    </td>
    <td width="300px" class="td_info">
      <div class="items_info">用户名由a~z的英文字母（不区分大小写）、0~9的数字、<b>点</b>、<b>减号</b>或<b>下划线</b>组成，长度为3~18个字符，只能以数字或者字母开头和结尾，例如:kyzy_001.</div>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="subtitle" style="border-top: 2px solid #d2ddff;">请填写安全设置：（安全设置用于验证账号和找回密码）</div>
    </td>
  </tr>
  <tr >
    <td colspan="3">
      <div class="alert">以下信息对保证您账号的安全极为重要，请您务必认真填写。</div>
    </td>
  </tr>
  <tr>
    <td >
      <div class="items_usr"><span class="alert">*</span>输入登录密码：</div>
      <div class="items_usr"><span class="alert">*</span>登录密码确认：</div>
    </td>
    <td >
      <div>
        <div class="items">
          <input type="text" >
          <input type="text" >
        </div>

      </div>
    </td>
    <td  class="td_info">
      <div class="items_info">密码长度为6~16位，区分字母大小写，登陆密码可以由字母、数字、特殊字符组成.【<a href="#">更多说明</a>】</div>
    </td>
  </tr>

  <tr>
    <td colspan="3">
      <div class="crossline"></div>
    </td>
  </tr>
  <tr >
    <td>
      <div class="items_usr"><span class="alert">*</span>密码提示问题：</div>
      <div class="items_usr"><span class="alert">*</span>登录密码确认：</div>
    </td>
    <td>
      <div>
        <div class="items">
          <input type="text" >
          <input type="text" >
        </div>
      </div>
    </td>
    <td  class="td_info">
      <div class="items_info">当您忘记密码时可以由此找回密码. 例如，问题是“我的哥哥是谁？”，答案为“peter2”. 问题长度<b>不大于36</b>个字符，一个汉字占两个字符. 答案长度在6~30位之间，区分大小写.【<a href="#">更多说明</a>】</div>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="crossline"></div>
    </td>
  </tr>
  <tr>
    <td >
      <div class="items_usr"><span class="alert">*</span>输入安全码：</div>
      <div class="items_usr"><span class="alert">*</span>安全码确认：</div>
    </td>
    <td >
      <div>
        <div class="items">
          <input type="text" >
          <input type="text" >
        </div>
      </div>
    </td>
    <td class="td_info">
      <div class="items_info">安全码是您找回密码的重要途径，安全码长度为6~16位，区分字母大小写，由字母、数字、特殊字符组成。<span class="alert">特别提醒：安全码一旦设定，将不可自行修改.</span>【<a href="#">更多说明</a>】</div>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="crossline"></div>
    </td>
  </tr>
  <tr>
    <td colspan="3" style="text-align: center"><button>提交表单</button></td>
  </tr>
  </tbody>
</table>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-03-19 comprehensive exercise3

起个名

关于前端部分-CSS-综合性练习3 的提问

综合练习3

<body>
	<div class="cred">请注意: 带有“*”的项目必须填写.</div>
	<div class="tab">
		<table height="400px">
			<tr height="3%">
			</tr>
			<tr height="17%">
				<td width="16%" align="center"></td>
			</tr>
			<tr height="4%">
				<td class="bg" colspan="3">
				</td>
			</tr>
			<tr height="3%">
				<td colspan="3"></td>
			</tr>
			<tr height="15%">
				<td width="16%" align="center"></td>
				<td width="24%"></td>
				<td width="58%" bgcolor="LightGrey"></td>
			</tr>
			<tr height="4%">
				<td colspan="3"></td>
			</tr>
			<tr height="18%">
				<td width="16%" align="center"></td>
				<td width="24%"></td>
				<td width="58%" bgcolor="LightGrey"></td>
			</tr>
			<tr height="4%">
				<td colspan="3"></td>
			</tr>
			<tr height="18%">
				<td width="16%" align="center"></td>
				<td width="24%"></td>
				<td width="58%" bgcolor="LightGrey"></td>
			</tr>
			<tr height="1%">
				<td colspan="3"></td>
			</tr>
			<tr height="11%">
				<td colspan="3" align="center">
				</td>
			</tr>
		</table>
	</div>
</body>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-01-27 尽力去还原布局了

__Fg__

关于前端部分-CSS-综合性练习3 -练习效果图的提问

兄弟们，可以做个参考

<head>
    <meta charset="UTF-8">
    </head>
    <style>
    .d1
    {font-size:12px;
color:red;}
    table.t1{border: solid 1px lightskyblue;}
td{border-top:solid 1px lightskyblue;
border-collapse:collapse;}
    </style>
    <html>
    <body>
    <p class="d1">请注意:带有1"*"的项目必须填写。</p>
    <table class="t1">
    <tr bgcolor="lightcyan">
<td colspan="2" bgcolor="lightcyan">请填写您的用户名:</td>
</tr>
    <tr>
    <td align="right"><span class="d1">*</span>通行证用户名：<input type="text" placeholder="请输入用户名"><br/>
    <a href="none">查看用户名是否被占用</a></td>
    <td bgcolor="lightgray">用户名由a~z的英文字母（不区分大小写）、0~9的数<br/>
    字、<b>点</b>、<b>减号</b>或<b>下划线</b>组成,长度为3~18个字符，只<br/>
    能以数字或者字母开头和结尾，例如：kyzy_001。<br/></td>
    </tr>
    <tr><td colspan="2"  bgcolor="lightcyan">请填写安全设置：（安全设置用于验证账号和找回密码）</td></tr>
    <tr><td colspan="2"><span class="d1">以下信息对保证您账号安全极为重要，请您务必认真填写。</span>
</td></tr>
<tr>
<td><span class="d1">*</span>输入登陆密码：<input type="password"><br/>
<span class="d1">*</span>登陆密码确认：<input type="password"></td>
<td bgcolor="lightgray">当你忘记密码时可以由此找回密码，例如，问题是“我<br/>
的哥哥是谁？”，答案为“peter2”.问题长度<b>不大于36</b><br/>
个字符，一个汉字占俩个字符，答案长度在6~30位之<br/>
间，要区分大小写。【<a href="none">更多说明</a>】<br/></td>
</tr>
<tr>
<td align="right"><span class="d1">*</span>输入安全码：<input type="password"><br/>
<span class="d1">*</span>安全码确认：<input type="password"></td>
<td bgcolor="lightgray">安全码是您找回密码的重要途径，安全码长度位6~16<br/>
位，区分字母大小写，由字母、数字、特殊字符组<br/>
成。<span color="red">特别提醒：安全码yi'dans设定，将不可自行修改。</span><br/>
【<a href="none">更多说明</a>】<br/></td>
</tr>
<tr>
<td colspan="2" align="center"><button type="sumbit" >提交表单</button></td>
</tr>
    </table>
    </body>
    </html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-04-15 还原度较高

up-bear

关于前端部分-CSS-综合性练习3 的提问

有点小缺陷，每一列的交界处有些缺口，不太完美，还请高人指点一二。

<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>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

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

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-CSS-综合性练习3 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

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

上传截图