第一次接触HTML5 CSS3

  这是我第一次接触网页制作,没想到一个简简单单的网页,要想实现起来要用到很多的标签。第一次是做学生信息注册页面,用到了

  •      <div>分块:

            <div id="学生信息注册">...</div>

  •      文本、密码输入框:

             <form method="post" action="学生信息注册页面">   

             <input type="text" name="myName">  

             <input type="password"    name="myPass">     注:当type="password"时,为密码输入框

  •      下拉列表框(可单选也可多选):

           <label>专业:</label>   
            <select>
                <option value="计算机科学与技术">计算机科学与技术</option>
                <option value="空间信息与数学技术">空间信息与数学技术</option>
                <option value="物联网工程">物联网工程</option>
                <option value="电子信息科学与技术">电子信息科学与技术</option>
                <option value="通信工程">通信工程</option>
                <option value="遥感科学与技术">遥感科学与技术</option>
                <option value="信息与计算科学">信息与计算科学</option>
            </select>      

            当<select>开始标签改为<select multiple="multiple">时,可进行多选项      注:ctrl+选择项即可实现多项选择。

  •       单选框和复选框:

                    单选:<input type="radio" value="男" name="性别">男  <input type="radio" value="女" name="性别">女                                       多选: <input type="checkbox" value="篮球" name="篮球">篮球  
                                <input type="checkbox" value="排球" name="排球">排球 

  •       多行的文本域:

                    <textarea rows="80px" cols="30px"></textarea>     注:rows设置行数,cols设置列数。

  •       上传浏览照片:

                    <div id="tbody">
                    <div >
                    <p>
                          <label>上传照片:</label>
                          <input type="file" id="file" class=" btn btn-default" style="height: 25px; width: 220px;text-align-last: 0;" />
                          <br>
                     </p>
                    </div>

            一些零散的还有<br>相当于回车换行    &nbsp表示空格     等等......

            最后的居中对齐我采用了,加一个文本框<table>  

                在<style>中用table{ margin:0 auto; }实现文本框的居中对齐。

下面是实现的最后界面:

​<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>学生信息注册页面</title>
		<style>
			table,table tr th, table tr td { border:1px solid #0094ff; }
            table {border: 1px solid #151515}   
        table
         {
          margin:0 auto; 
         }
		</style>
	</head>
	<body>
	<div id="学生信息注册">
			<form method="post" action="学生信息注册页面">
			<h1 style="font-family:'微软雅黑';font-size:25px;text-align:center;">学生信息注册</h1>
			<br><br> 
			<table><tr><td>
			姓名:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" name="myName">
			<br><br>
			性别:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="radio" value="男" name="性别">男  
			<input type="radio" value="女" name="性别">女
			<br><br>
			出生日期: 
			<input type="text" name="myBirthday">
			<br><br>
			学校:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" name="myBirthday">
			<br><br>
			<label>专业:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     
			<select>
				<option value="计算机科学与技术">计算机科学与技术</option>
				<option value="空间信息与数学技术">空间信息与数学技术</option>
				<option value="物联网工程">物联网工程</option>
				<option value="电子信息科学与技术">电子信息科学与技术</option>
				<option value="通信工程">通信工程</option>
				<option value="遥感科学与技术">遥感科学与技术</option>
				<option value="信息与计算科学">信息与计算科学</option>
			</select>
			<br><br>
			体育特长:<input type="checkbox" value="篮球" name="篮球">篮球  
				      <input type="checkbox" value="排球" name="排球">排球 
				      <input type="checkbox" value="足球" name="足球">足球 
				      <input type="checkbox" value="游泳" name="游泳">游泳 
		    <div id="tbody">
            <div >
                <p>
                   <label>上传照片:</label>
                   <input type="file" id="file" class=" btn btn-default" style="height: 25px; width: 220px;text-align-last: 0;" />
                   <br>
                </p>
            </div>
                        密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="password" name="myPass">
			<br><br>
			个人介绍:
			<textarea rows="80px" cols="30px"></textarea>
			<br><br>
			<input type="submit" value="提交" name="submit" />
			<input type="reset" value="取消" name="reset" />
			</td></tr></table>
			</form>
	</div>
	</body>
</html>

                          

  

     

猜你喜欢

转载自blog.csdn.net/LH_1999/article/details/81265679
今日推荐