javascript代码实例教程-使用jQuery实现的网页版的个人简历

发布时间:2019-05-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-使用jQuery实现的网页版的个人简历脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 <!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>

&nbsp;   <title></title>

    <style type="text/css">

    body{ font-Size:13px;}

    #pFrame{ border:1px solid #666; height:1450px; width:750px; margin:auto;}

    

    #pFrame .pHead{ background-color:#eee; padding-top:30px; padding-left:125px; height:28px;}

    #pFrame .pHead h2{ padding-left:200px}

 #pFrame .pHead h4{ position:absolute;top:10px; left:730px}

 

 

    #pFrame .pPhoto{ padding-top:60px; padding-left:20px; width:100px; border:0px solid red;}

    #pFrame .pContent{ padding-left:200px; position:absolute; top:140px; border:0px solid blue ; width:300px}

    #pFrame .pContent ul { list-style-type:none; margin:0px;}

   #pFrame .pContent ul li{list-style-type:none;padding-top:5px; padding-bottom:5px }

    #pFrame .jianjie{ margin-top:150px; font-size:13px; display:none;}

    #pFrame .experience{ margin-top:30px; font-size:13px;}

    #pFrame .subject{ margin-top:30px; font-size:13px;}

    #pFrame .jineng{ margin-top:30px; font-size:13px;}

    #pFrame .yixiang{ margin-top:30px; font-size:13px;}

      #pFrame . zhushi{ margin-top:90px; font-size:13px;}

    </style>

    <script src="jquery-1.9.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('.pContent>h3').click(function () {

                $('.jianjie').show(3000);

            });

            $('.pContent>h4').click(function () {

                $('#pFrame').css('background-color', '#666');

                $('p[title=zi]').css('font-size', '16px')

            });

 

 

        })

    </script>

</head>

<body>

 

 

<p id="pFrame" title="zi">

<p class="pHead"><h2>个人简历</h2></p>

<!--个人信息-->

<p class="Content" title="zi">

<p class="pPhoto"><img alt="" src="images/嘿嘿.jpg"  width="150px" height="150px"/></p>

<p class="pContent">

<h3 style="padding-bottom:2px"><a href="#">王静静</a></h3>

<h4 style=" position:absolute;top:0px; left:660px; width:80px; text-decoration:none"><a href="#">切换皮肤</a></h4>

<ul>

 

 

  <li><img alt="" src="images/left.jpg" border="0">我的剧本,我导演</li>

  <li>希望能加入互联网公司,与一群热爱互联网的伙伴一起用产品改善生活。<img  alt="" src="images/right.jpg" border="0"></li>

  <li><font color="#999999">学校:河北软件职业技学院  软件开发 (.net)</font></li>

 </ul>

 </p>

<!-- 基本信息-->

<!-- 个人简历的信息-->

 <p class="jianjie" title="zi">

 <h3>基本信息:</h3>

    <table id="tbStu" cellpadding="0" cellspacing="0" border="1px solid red" >

     

        <tr><td>姓名:</td><td>王静静</td><td>性别:</td><td>女</td><td>出生年月:</td><td>1991-12-14</td></tr>

        <tr><td>籍贯:</td><td>河北省河间市尊祖庄乡</td><td>民族:</td><td>汉</td><td>身体状况:</td><td>良好</td></tr>

        <tr><td>政治面貌:</td><td>团员</td><td>学历:</td><td>大专</td><td>外语水平:</td><td>可以进行基本的英语对话</td></tr>

        <tr><td>所学专业:</td><td>软件开发</td><td>兴趣特长:</td><td>读书、唱歌</td><td>家庭住址:</td><td>河北省沧州市</td></tr> 

        <tr><td>联系话:</td><td>15031259715</td><td>邮编:</td><td>071000</td><td>Email:</td><td>elaineJJ123@126.COM</td></tr> 

        <tr><td>自我评价:</td><td colspan="5">适应能力比较强,能够较快的融入一个新的环境;能够很好地处理好与他人的关系,有较强的 

团队合作能力和抗压能力</td></tr> 

   

     

 

              

    </table>

 </p>

  <!-- 主修课程-->

 <p class="subject" title="zi">

 <table id="tbSub" cellpadding="0" cellspacing="0" title="zi">

 <tr><td colspan="2"><h3>主修课程:</h3></td></tr>

 <tr><td></td><td colspan="5">Javascript课程、Html课程、C#课程、SQLServer、Css、ASP.net、ADO课程、ASP.NET高级、

 Xmal基础、Flash制作 </td></tr>

 </table>

 </p>

<!-- 项目经验-->

 <p class="experience" title="zi">

 <table id="tbEce" cellpadding="0" cellspacing="0" >

 <tr><td colspan="2"><h3>项目实战:</h3></td></tr>

 <tr><td></td><td colspan="5">在校期间,多次参加项目实战,模拟京东商城网站、CSDN学习大本营、保百大楼、CSDN博客、学院图书管理系统、扫雷游戏等。<br />

具体项目开发内容如下:<br />

项目名称:CSDN学习大本营<br />

开发规模:4人<br />

开发环境:windows7<br />

开发工具VisualStudio2010、SQLsever2008<br />

开发时间:一周<br />

责任描述:此次项目是模拟制作CSDN学习大本营网站,本人在该项目中,主要负责实现网站的

          登陆、注册、教师作业的投放、学生提交作业等功能。<br />

项目收获:通过该项目,已能够熟练的对数据库进行操作</td></tr> 

 </table>

 </p>

 

 

<!-- 掌握技能-->

 <p class="jineng" title="zi">

 <table id="Table1" cellpadding="0" cellspacing="0" >

 <tr><td colspan="2"><h3>掌握技能:</h3></td></tr>

 <tr><td></td><td colspan="5">ADO技能、SQL Server技术、ASP.NET技术、win8应用开发</td></tr>

 </table>

 </p>

<!-- 求职意向-->

 <p class="yixiang" title="zi">

 <table id="Table2" cellpadding="0" cellspacing="0" >

 <tr><td colspan="2"><h3>求职意向:</h3></td></tr>

 <tr><td></td><td colspan="5">软件开发工程师、数据库管理员、网站美编</td></tr>

 </table>

 </p>

 

 

<p class="zhushi" title="zi">

  <table id="Table3" cellpadding="0" cellspacing="0" >

 <tr><td colspan="2"><h3>信息提示:</h3></td></tr>

 <tr><td></td><td colspan="5">点击王静静会显示全部信息,点击更换皮肤,会改变背景色和字体大小</td></tr>

 </table>

  </p>

  </p>

</p>

</body>

</html>

实现以下效果:

@H_360_259@

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-使用jQuery实现的网页版的个人简历全部内容,希望文章能够帮你解决javascript代码实例教程-使用jQuery实现的网页版的个人简历所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。