js课程设计设计报告

课程设计报告 学 院： 信息科学与工程学院 专 业： 计算机科学与技术（软件外包方向） 班 级： 计软 1306 学 号： 20131214153 学生姓名： 徐翔 指导教师： 李崇威 课程名称： web 客户端编程技术 设计名称： 我的博客 济南大学 课程设计报告 第 1 页，共 26 页 一、 设计内容及要求 （1）运用 HTML、CSS 和 JavaScript技术完成一个相对完整的网站，至少完成 5个页面 （2）使用 HTML标记，CSS 样式及 JavaScript技术，完成的网页没有错误 首页设置导航栏，命名为 index.html （3）利用 CSS技术对网站进行布局，网站风格统一，灵活运用 JavaScript使 网页生动 （4）要经过至少两种主流浏览器的测试，最终检查时要配置 Web服务器发布出 来访问 设计结束后上交报告（纸质和电子版）、源代码 二、 设计思路 全部包括七个网页， 首页:介绍了我的进本信息，和网站的基本信息。 关于我：详细介绍了我的各种信息奥。 慢生活：介绍了我的一些生活理念。 谁言碎语：类似说说一样是我的一些语录。 模板分享：介绍了 我自己的一些小网站。（百度云分享）。 学无止境：推介了一些图书。 留言板：没有发布，还无法实现。 三、 设计结果及分析 1、主页： （1）背景和头像 （2）文章推荐 （3）一些好的网站的链接 （4）天气显示（百度的代码） （5）登录 济南大学 课程设计报告 3 2、关于我： （1）主要的个人生活简介 （2）主要的身份简介 （3）网页简单介绍（很多的是虚拟的） 3、慢生活： （1）一些程序员的文章推荐。 （2）个人小日记的推荐和网上的文件的链接 （3）点击排行链接（信息来自网络） 3、碎言碎语： （1）惹人平时的心情记录 （2）右侧的是心情发表的时间 （3）左侧是时间 学无止境： 最新技术的一个更新 右侧是技术分享的一个分类链接 左侧是技术的详细信息 四、 总结 首先是复习了以前学过的 css、html 知识，又把 js的只是更进一步的理解 掌握，为了达到更好的效果，又学了好多 html5和 css3的知识。 刚开始做了好几次都有重新做，因为结构又有新的问题，通过这车让我更明 白先设计好再开始编写代码，磨刀不误砍柴工 页面的布局不是动画越多越好，在最合适的地方使用合适的演示，事半功倍。 五、 附录（源代码） 济南大学 课程设计报告 5 个人博客 #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:0px auto; 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; left: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); window.onload=function() var btn=document.getElementById(“btn“); var name=document.getElementById(“name“); var age=document.getElementById(“age“); var i=1; btn.onclick=function() if(name.value=“) alert(“姓名不得为空“); name.focus(); i=0; if(age.value=“|isNaN(age.value) alert(“年龄不合法“); age.focus(); i=0; var b=document.getElementById(“b“); var g=document.getElementById(“g“); / if(!b.selected 济南大学 课程设计报告 7 / i=0; / if(i=1) var kk=document.getElementById(“loginA“); kk.style.display=“none“; 首页 Protal 关于我About慢生活Life碎言碎语 Doing我 的相册Share学无止境LearnGustbook 游客登记 name: var oNext = document.getElementById(next); var oPlay = document.getElementById(play); var oImg = document.getElementById(images); var _Img = document.getElementById(img); var _aImg = document.getElementById(img02) var aDiv = _Img.getElementsByTagName(div); var aImg = oImg.getElementsByTagName(img); var oPrevSm = document.getElementById(prevSm); var oNextSm = document.getElementById(nextSm); var thisImg = document.getElementById(length); var length = document.getElementById(thisImg); var oLayer = document.getElementById(layer); var aLayerImg = oLayer.getElementsByTagName(img); var oClose = document.getElementById(close); var oAlbum = document.getElementById(album); var iNow = 0; var timer = null; var play = 0; var zIndex = 3; function initial() /初始化 oImg.style.height = document.documentElement.clientHeight + px; for(var i=0;i charset “gb2312“; .banner background: url(/images/banner_top.jpg) top center; height: 265px; overflow: hidden .texts width: 350px; line-height: 26px; margin: 60px 0 0 20px; float: left; font-size: 14px; .texts p -webkit-transform: translate(60px); -moz-transform: translate(60px); -o-transform: translate(60px); -ms-transform: translate(60px); transform: translate(60px); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8), 2px 2px 3px rgba(180, 151, 151, 0.3); .texts p:nth-child(1) -webkit-animation: animations 3s ease-out 1s backwards; -moz-animation: animations 3s ease-out 1s backwards; - o-animation: animations 3s ease-out 1s backwards; -ms-animation: animations 3s ease-out 1s backwards; animation: animations 3s ease- out 1s backwards; .texts p:nth-child(2) -webkit-animation: animations 3s ease-out 4s backwards; -moz-animation: animations 3s ease-out 4s backwards; - o-animation: animations 3s ease-out 4s backwards; -ms-animation: animations 3s ease-out 4s backwards; animation: animations 3s ease- out 4s backwards; .texts p:nth-child(3) -webkit-animation: animations2 5s ease-in- out 7s backwards; -moz-animation: animations2 5s ease-in-out 7s backwards; -o-animation: animations2 5s ease-in-out 7s backwards; - ms-animation: animations2 5s ease-in-out 7s backwards; animation: animations2 5s ease-in-out 7s backwards; -webkit-keyframes animations 0% -webkit-transform:translate(0); opacity:0; 50% -webkit-transform:translate(30px); opacity:.5; 100% 济南大学 课程设计报告 19 -webkit-transform:translate(60px); opacity:1; -moz-keyframes animations 0% -moz-transform:translate(0); opacity:0; 50% -moz-transform:translate(30px); opacity:.5; 100% -moz-transform:translate(60px); opacity:1; -o-keyframes animations 0% -o-transform:translate(0); opacity:0; 50% -o-transform:translate(30px); opacity:.5; 100% -o-transform:translate(60px); opacity:1; -ms-keyframes animations 0% -ms-transform:translate(0); opacity:0; 50% -ms-transform:translate(30px); opacity:.5; 100% -ms-transform:translate(60px); opacity:1; keyframes animations 0% transform:translate(0); opacity:0; 50% transform:translate(30px); opacity:.5; 100% transform:translate(60px); opacity:1; -webkit-keyframes animations2 0% opacity:0; 40% opacity:.8; 45% opacity:.3; 50% opacity:.8; 55% opacity:.3; 60% opacity:.8; 100% opacity:1; -moz-keyframes animations2 0% opacity:0; 40% opacity:.8; 45% opacity:.3; 50% 济南大学 课程设计报告 21 opacity:.8; 55% opacity:.3; 60% opacity:.8; 100% opacity:1; -o-keyframes animations2 0% opacity:0; 40% opacity:.8; 45% opacity:.3; 50% opacity:.8; 55% opacity:.3; 60% opacity:.8; 100% opacity:1; -ms-keyframes animations2 0% opacity:0; 40% opacity:.8; 45% opacity:.3; 50% opacity:.8; 55% opacity:.3; 60% opacity:.8; 100% opacity:1; keyframes animations2 0% opacity:0; 40% opacity:.8; 45% opacity:.3; 50% opacity:.8; 55% opacity:.3; 60% opacity:.8; 100% opacity:1; .avatar float: right; margin: 40px; width: 130px; height: 130px; border-radius: 100%; overflow: hidden; border: #FFF 4px solid .avatar a display: block; padding-top: 97px; width: 160px; background: url(/images/photos.jpg) no-repeat; background-size: 130px 130px .avatar a span display: block; margin-top: 63px; padding-top: 8px; width: 130px; height: 55px; text-align: center; line-height: 20px; color: #fff; background: rgba(0, 0, 0, .5); -webkit-transition: margin-top .2s ease-in-out; -moz-transition: margin-top .2s ease-in- 济南大学 课程设计报告 23 out; -o-transition: margin-top .2s ease-in-out; transition: margin- top .2s ease-in-out; .avatar a:hover span display: block; margin-top: 0; .template background: #F1F0EE .template h3 border-bottom: #FFF 1px solid; width: 100%; overflow: hidden; font-size: 14px; margin: 0 0 10px; font-family: “微 软雅黑“; display: block; clear: both; .template h3 p background: #474645; width: 180px; height: 25px; margin: 15px 0 0 10px; line-height: 25px; color: #fff; text-align: center; box-shadow: #999 4px 5px 1px; .template h3 p span color: #38b3d4; .template ul overflow: hidden; .template ul li margin: 3px; float: left; display: block; padding: 5px 5px 6px 5px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; .template li img width: 142px; height: 80px; background: #FFF; padding: 4px; box-shadow: 0px 0px 2px rgba(0,0,0,.5); display: block; .template li span color: #F1F0EE; display: block; text-align: center; margin-top: 5px; width: 142px; overflow: hidden; text- overflow: ellipsis; height: 14px .template li:hover background: #666; padding: 5px 5px 6px 5px; h2.title_tj font: 18px “微软雅黑“, Arial, Helvetica, sans-serif; color: #444; font-weight: bold; background: url(/images/h_line.jpg) repeat-x 20px center; h2.title_tj span color: #FE5187 h2.title_tj p background: #fff; width: 90px .bloglist width: 740px; overflow: hidden; background: url(/images/r_line.jpg) repeat-y right; .bloglist h3 margin: 20px 0 10px 0; color: #333 .bloglist figure float: left; width: 183px; .bloglist figure img padding: 4px; border: #f4f2f2 1px solid; width: 175px; .bloglist ul float: left; width: 520px; margin: 10px 0px 0 15px; line-height: 20px; .dateview width: 695px; overflow: hidden; clear: both; margin: 10px 0 0 0; display: inline-block; background: #f6f6f6 url(/images/time.jpg) 15px center no-repeat; line-height: 26px; height: 26px; color: #838383; padding-left: 25px .dateview span margin: 0 10px; .dateview span a color: #099B43; a.readmore background: #fd8a61; color: #fff; padding: 5px 10px; float: right; margin: 20px 0 0 0 .weather background: url(/images/weather_bg.jpg) no-repeat; height: 88px; margin: 20px 0;padding: 20px 0 0 75px; .news h3 font-size: 14px; background: url(/image