html+css学习总结

HTML+CSS+JQuery实现Web设计、验证和跳转功能

    实习第一周,初步完成HTML、CSS和JQuery的功能性学习,并且在项目经理的指导下完成了信息登记网页的设计以及JQuery事务响应的功能。

   星期一任务:运用HTML绘制简历表格

学习情况:基本完成了对HTML基础部分的学习,但是对HTML+Css的使用仍然不是很熟练的。

         1.开发工具

              1】apache-tomcat-6.0.37-windows-x64
              2】eclipse 3.5
              3】eclipse-jee-indigo-SR2-win32-x86_64
              4】jd-gui
              5】jdk-6u45-windows-i586
              6】PLSQL Developer10.0.3.1701_keygen
              7】plsqldev1004
              8】TortoiseSVN-1.8.10.26129-win32-svn-1.8.11.1420009704
              9】win32_11gR2_database_1of2
            10】win32_11gR2_database_2of2

            11】wrar521sc_setup.1426841415

            【红色部分软件需要重点了解】

        2.HTML知识点总结

      1】对于基本标签的使用:html、head、body、p、br、table、tr(行)、td列、img(相对路径与绝对路径)

              2】标签一般成对出现,除了img和br之外。

        3、遇到的问题

             当对HTML标签大小进行修改时总是不能对标签进行独立修改

             解决方案:将其放入不同的table中,从而互不影响。

            周二到周五任务:熟悉Javascript和JQuery,并且完成网页的基本功能<!DOCTYPE>

<!DOCTYPE>
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="C:\Users\Administrator\Desktop\2105-4-2\jquery.js" >
  </script>
  <script>
/*	$(document).ready(function(){
		$("#username").blur(function(){
			var user=$("#username").val();
				if(user=="1"){
					alert("请输入用户名");}		
		});
		 $("#username").focus(function(){
			$("#username").css("background-color","#FFFFCC");
		 });
				
	});*/
	var password=$("#password").val();
	var assure_password=$("#assure_password");
	<!--用户名表单验证函数-->
	$(document).ready(function(){								//当无反应时考虑你的jQuery是否引用正确,这是一般方法:采用alert()函数进行测试
		
		//$("#username").focus(function(){						//引用Jquery一般是先用<script>进行引用,再在另一个<script>编写函数
			//alert("OK");
		//});
		//$("#username").blur(function(){
			//alert("hi");
			$("#username").blur(function(){
				if($("#username").val()==""){
					alert("请输入用户名");
				}
			});
		//});
			$("#password").blur(function(){
				if($("#password").val()==""){
					alert("请输入密码");
				}
			});
			
			$("#assure_password").blur(function(){
				if($("#assure_password").val()==""){
					alert("请输入密码");
				}
			});
			
			if (password!=assure_password)
			{
					alert("两次密码不一致");
			}

			
	});

	</script>
	<script>

$(document).ready(function(){
	
	$("#btn1").click(function(){
		
	});
	});
</script>


 </head>
<body>
	 <table  align="center" width="100" height="150">
	 </table>
	<table  align="center" width="100">
	<b>员工注册</b>
	</table>
	<br/>
	<br/>
	 <div  style="position:relative padding-top:1300px;" >
		<table align="center">
				<tr>
					<td>
						<b> 用户名</b>
					</td>
					<td>
					<form >
						<input id="username" type="text"/>
					</form>
					</td>
				</tr>
		</table>
		<br/>
		<table align="center">
				<tr>
					<td>
						<b>  密   码  </b>
					</td>
					<td>
					<form>
						<input id="password" type="text"/>
						</form>
					</td>
				</tr>
		</table>
		<br/>
		<table align="center">
				<tr>
					<td>
						<b> 确认密码</b>
					</td>
					<td>
					<form>
						<input id="assure_password" type="text"/>
						</form>
					</td>

				</tr>
		</table>
		<br/>
		<table align="center">
				<tr>
					<td>
						<b> 性 别 </b>
					</td>
					<td>
					<form>
						<input id="sex" name="sex" type="radio" value="male"/>男
						<input id="sex" name="sex" type="radio" value="female"/>女
						</form>															<!--input 的参数还不清楚-->
					</td>
				</tr>
		</table>
		<br/>
		<table align="center">
				<tr>
					<td>
						<b>生日 </b>
					</td>
					<td>
					<form>
				<select name="year">
				<option value="2014">1992</option>
				<option value="2015">1993</option>
				<option value="2014">1994</option>
				<option value="2015">1995</option>
				<option value="2014">1996</option>
				<option value="2015">1997</option>
				<option value="2014">1998</option>
				<option value="2015">1999</option>
			</select>年
			<select name="month">
				<option value="12">12</option>
				<option value="11">11</option>
				<option value="10">10</option>
				<option value="9">9</option>
				<option value="8">8</option>
				<option value="7">7</option>
				<option value="6">6</option>
				<option value="5">5</option>
				<option value="4">4</option>
				<option value="3">3</option>
				<option value="2">2</option>
				<option value="1">1</option>

		</select>月 
		<select name="day">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
		</select>日
	</form>
		</td>
				</tr>
		</table>
		<br/>
		<!--实现三级联动菜单的跳转-->
	<div class="info" align="center">
	<div>
	<select id="s_province" name="s_province"></select>  
    <select id="s_city" name="s_city" ></select>  
    <select id="s_county" name="s_county"></select>
    <script class="resources library" src="http://sandbox.runjs.cn/uploads/rs/267/g3ugugjp/area.js" type="text/javascript"></script>
    <script type="text/javascript">_init_area();</script>
    </div>
    <div id="show"></div>
</div>
<script type="text/javascript">
var Gid  = document.getElementById ;
var showArea = function(){
	Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" + 	
	Gid('s_city').value + " - 县/区" + 
	Gid('s_county').value + "</h3>"
							}
Gid('s_county').setAttribute('onchange','showArea()');
</script>
<br/>
		<br/>
		<br/>

		<!--实现页面的跳转-->
		<table align="center">
		<form>
		<input type="button" name="registration" value="注册成功" id="btn1" onclick="location.href='http://www.baidu.com'"/>
		</form><!--实现页面的跳转-->
		</table>
  </div>
 </body>
</html>


你可能感兴趣的:(html,css)