js课程设计设计报告

课程设计报告学院：信息科学与工程学院专业：计算机科学与技术（软件外包方向）班级：计软1306学号：20131214153学生姓名：徐翔指导教师：李崇威课程名称：web客户端编程技术设计名称：我的博客济南大学课程设计报告第1页，共25页一、设计内容及要求（1）运用HTML、CSS和JavaScript技术完成一个相对完整的网站，至少完成5个页面（2）使用HTML标记，CSS样式及JavaScript技术，完成的网页没有错误首页设置导航栏，命名为index.html（3）利用CSS技术对网站进行布局，网站风格统一，灵活运用JavaScript使网页生动（4）要经过至少两种主流浏览器的测试，最终检查时要配置Web服务器发布出来访问设计结束后上交报告（纸质和电子版）、源代码二、设计思路全部包括七个网页，首页:介绍了我的进本信息，和网站的基本信息。关于我：详细介绍了我的各种信息奥。慢生活：介绍了我的一些生活理念。谁言碎语：类似说说一样是我的一些语录。模板分享：介绍了我自己的一些小网站。（百度云分享）。学无止境：推介了一些图书。留言板：没有发布，还无法实现。三、设计结果及分析1、主页：（1）背景和头像（2）文章推荐（3）一些好的网站的链接（4）天气显示（百度的代码）（5）登录济南大学课程设计报告2济南大学课程设计报告32、关于我：（1）主要的个人生活简介（2）主要的身份简介（3）网页简单介绍（很多的是虚拟的）3、慢生活：（1）一些程序员的文章推荐。（2）个人小日记的推荐和网上的文件的链接（3）点击排行链接（信息来自网络）3、碎言碎语：（1）惹人平时的心情记录（2）右侧的是心情发表的时间（3）左侧是时间济南大学课程设计报告4学无止境：最新技术的一个更新右侧是技术分享的一个分类链接左侧是技术的详细信息四、总结首先是复习了以前学过的css、html知识，又把js的只是更进一步的理解掌握，为了达到更好的效果，又学了好多html5和css3的知识。刚开始做了好几次都有重新做，因为结构又有新的问题，通过这车让我更明白先设计好再开始编写代码，磨刀不误砍柴工页面的布局不是动画越多越好，在最合适的地方使用合适的演示，事半功倍。五、附录（源代码）!doctypehtmlhtml济南大学课程设计报告5headmetacharset=gb2312title个人博客/titlemetaname=keywordscontent=徐翔的个人博客/metaname=descriptioncontent=/linkhref=css/base.cssrel=stylesheetlinkhref=css/index.cssrel=stylesheetstyletype=text/css#loginA{position:fixed;width:100%;height:100%;top:-0px;left:0px;z-index:100;background:rgba(100,100,100,0.5);}#loginB{position:relative;width:300px;height:300px;border-radius:150px;margin:0pxauto;top:30%;background:rgba(13,19,26,0.7);}#loginC{position:relative;width:300px;height:300px;left:60px;top:80px;font-size:20px;color:#959544;/*background:#00cc00;*/}#you{position:absolute;width:140px;height:50px;济南大学课程设计报告6left:90px;top:10px;font-size:30px;color:#959544;}#btn{width:140px;height:30px;border-radius:20px;background:rgba(33,119,199,0.5);}#btn:hover{background:rgba(253,233,87,0.5);}/stylescripttype=text/javascriptwindow.onload=function(){varbtn=document.getElementById(btn);varname=document.getElementById(name);varage=document.getElementById(age);vari=1;btn.onclick=function(){if(name.value==){alert(姓名不得为空);name.focus();i=0;}if(age.value==||isNaN(age.value)){alert(年龄不合法);age.focus();i=0;}varb=document.getElementById(b);varg=document.getElementById(g);//if(!b.selected&&!b.selected)//{////alert(性别必须选择);//i=0;济南大学课程设计报告7//}if(i==1){varkk=document.getElementById(loginA);kk.style.display=none;}}}/script/headbodyheaderdivid=logoahref=//a/divnavclass=topnavid=topnavahref=index.htmlspan首页/spanspanclass=enProtal/span/aahref=about.htmlspan关于我/spanspanclass=enAbout/span/aahref=newlist.htmlspan慢生活/spanspanclass=enLife/span/aahref=moodlist.htmlspan碎言碎语/spanspanclass=enDoing/span/aahref=photo.htmlspan我的相册/spanspanclass=enShare/span/aahref=knowledge.htmlspan学无止境/spanspanclass=enLearn/span/aahref=book.htmlspan/spanspanclass=enGustbook/span/a/nav/nav/headerdivid=loginAdivid=loginBclass=divid=youclass=游客登记/divdivid=loginCclass=lablename:   brinputtype=textid=name//lablebrlableage:   brinputtype=textid=age//lablebrbr  男inputtype=radioid=bname=sex/女inputtype=radioid=gname=sex/brbr inputtype=buttonvalue=loginid=btn//div/div/divdivclass=bannersectionclass=box济南大学课程设计报告8ulclass=textsp打了死结的青春，捆死一颗苍白绝望的灵魂。/pp为自己掘一个坟墓来葬心，红尘一梦，不再追寻。/pp加了锁的青春，不会再因谁而推开心门。/p/uldivclass=avatarahref=#span徐翔/span/a/div/section/divdivclass=templatedivclass=boxh3pspan个人博客/span生活在于分享/p/h3/div/divarticleh2class=title_tjp文章span推荐/span/p/h2divclass=bloglistlefth3我是程序员，这是我的生活/h3figureimgsrc=images/001.png/figureulp我是程序员，这是我的生活/patitle=/href=/target=_blankclass=readmore阅读全文/a/ulpclass=dateviewspan2015-11-04/spanspan作者：徐翔/spanspan个人博客：[ahref=/news/life/程序人生/a]/span/ph3程序员请放下你的技术情节，与你的同伴一起进步/h3figureimgsrc=images/001.png/figureulp我是程序员，这是我的生活/patitle=/href=/target=_blankclass=readmore阅读全文/a/ulpclass=dateviewspan2015-12-04/spanspan作者：徐翔/spanspan：[ahref=/news/life/程序人生/a]/span/ph3程序员请放下你的技术情节，与你的同伴一起进步/h3figureimgsrc=images/001.png/figureul济南大学课程设计报告9p如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话，那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展.../patitle=/href=/target=_blankclass=readmore阅读全文/a/ulpclass=dateviewspan2015-11-04/spanspan作者：徐翔/spanspan[ahref=/news/life/程序人生/a]/span/ph3程序员请放下你的技术情节，与你的同伴一起进步/h3figureimgsrc=images/001.png/figureulp如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话，那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展.../patitle=/href=/target=_blankclass=readmore阅读全文/a/ulpclass=dateviewspan2015-11-04/spanspan作者：徐翔/spanspan[ahref=/news/life/程序人生/a]/span/ph3程序员请放下你的技术情节，与你的同伴一起进步/h3figureimgsrc=images/001.png/figureulp如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话，那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展.../patitle=/href=/target=_blankclass=readmore阅读全文/a/ulpclass=dateviewspan2015-