html+css学习总结

来源：互联网发布：网络性与爱第一季编辑：程序博客网时间：2024/04/30 05:08

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>

0 0