【6.7】案例：制作注册界面

Live小杨

于 2022-05-10 22:50:36 发布

阅读量1.1k

点赞数 3

文章标签： css html

本文链接：https://blog.csdn.net/qq_68334563/article/details/124699582

版权

zhuce.html

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>注册界面</title>
	</head>
	
	<link rel="stylesheet" href="../css/style02.css">
	
	<body>
	<div id="box">
	  <h2 class="header">下面就开始在线报名吧<span>(以下信息是报名传智播客的重要依据，请认真填写)</span></h2>
	  <from actiom="#" method="post">
	    <table class="content">
	      <tr>
	        <td class="left"> <span>姓名</span><span class="red">*</span></td>
	        <td><input type="text" value="报名的重要依据，请认真填写" class="txt01" /></td>
	      </tr>
	      <tr>
	        <td class="left">手机<span class="red">*</span></td>
	        <td><input type="text" value="报名的重要依据，请认真填写"  class="txt02" /></td>
	      </tr>
	      <tr>
	        <td class="left" >性别<span class="red">*</span></td>
	        <td><label for="boy">
	            <input type="radio" name="sex" id="boy" />
	            男</label>
	          <label for="girl">
	            <input type="radio" name="sex" id="girl" />
	            女</label></td>
	      </tr>
	      <tr>
	        <td class="left">邮箱<span class="red">*</span></td>
	        <td><input type="text" class="txt03" /></td>
	      </tr>
	      <tr>
	        <td class="left">意向课程<span class="red">*</span></td>
	        <td><select class="course">
	            <option>网页平面UI设计基础班</option>
	            <option selected="selected">网页平面UI设计就业班</option>
	            <option>网页平面UI设计周末班</option>
	          </select></td>
	      </tr>
	      <tr>
	        <td class="left">了解传智渠道</td>
	        <td><label for="baidu">
	            <input  type="checkbox" id="baidu" />
	           <span class="cc"> baidu</span></label>
	          <label for="itcast">
	            <input type="checkbox" id="itcast" />
	        <span class="cc">传智老学员</span></label>
	          <label for="friend">
	            <input type="checkbox" id="friend"  />
	            <span  class="cc">朋友推荐</span></label>
	          <label for="csdn">
	            <input type="checkbox" id="csdn" />
	           <span class="cc">CSDN网站</span> </label>
	          <label for="video">
	            <input type="checkbox" id="video" />
	            <span class="cc">视频教程</span></label>
	          <label for="other">
	            <input type="checkbox" id="other" />
	           <span class="cc"> 其他</span></label></td>
	      </tr>
	      <tr>
	        <td class="left">留言</td>
	        <td><textarea cols="50" rows="5" class="message">请简述你有没有设计基础，以及为什么学习网页平面UI设计？</textarea></td>
	      <tr>
	        <td>&nbsp;</td>
	        <td><input type="submit" value="提交" /></td>
	      </tr>
	      </tr>
	      
	    </table>
	  </from>
	</div>
	</body>
	</html>

style.css

/*全局控制*/
body{
	font-size: 12px;
	font-family: "宋体"; 
	color: #515151;
	 background: url("../img/1.png");
	background-size: 100%;
}
/*重置浏览器默认样式*/
body,h2,form,table{
	padding: 0;
	margin: 0;
}
#box{				/*控制最外层大盒子	*/
	width: 660px;
	height: 600px;
	border: 1px solid #CCC;
	padding: 20px;
	margin: 50px auto 0;
	
}
.header{				/*控制标题*/
	font-size: 25px;
	color: #0b0b0b;
	padding-bottom: 30px;
}
.header span{				/*控制标题中的小号字体*/
	font-size: 12px;
	font-weight: normal;
}
td{
	padding-bottom: 26px;
	color: #FD8B01;
	font-size: 13px;
	font-weight:600;
}
td.left{
    width: 78px;
    text-align: right;				/* 使提示信息居右对其*/
    padding-right: 8px;				/* 拉开提示信息和表单控件间的距离*/
    color: #1209E8;
}
.red{
	color: #F00;					/*控制提示信息中星号的颜色*/
	font-size: 22px;
}
.txt01, .txt02{						/*定义前两个单行文本输入框的相同模式*/
	width: 264px;
	height: 12px;
	border: 1px solid #E81197;
	padding: 3px 3px 3px 26px;
	font-size: 12px;
	color: #F50081;
 }
.txt01{											/*定义第一个单行文本输入框的背景图像*/
	background: url("../img/name.png") no-repeat 2px center;
}
.txt02{										/*定义第二个单行文本输入框的背景图像*/
	background: url("../img/phone.png") no-repeat 2px center;
}
.txt03{										/*定义第三个单行文本输入框的背景图像*/
	width: 122px;
	height: 12px;
	padding: 3px 3px 3px 26px;
	font-size: 20px;
	background: url("../img/email.png") no-repeat 2px center;
}
.course{
	width: 184px;						/*定义下拉菜单的宽度*/
}
.message{								/*定义多行文本输入框的样式*/
	width: 432px;
	height: 164px;
	font-size: 12px;
	color: #980000;
	padding: 3px;
}
.cc{
	color: #AA0ACD;
}

在这里插入图片描述

Live小杨

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
【6.7】案例：制作注册界面

zhuce.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/h
复制链接

扫一扫