js课程设计设计报告解析.docVIP

课程设计报告 学 院： 信息科学与工程学院 专 业： 计算机科学与技术（软件外包方向） 班 级： 计软1306 学 号： 20131214153 学生姓名： 徐翔 指导教师： 李崇威 课程名称： web客户端编程技术 设计名称： 我的博客 设计内容及要求 （1）运用HTML、CSS和JavaScript技术完成一个相对完整的网站，至少完成5个页面 （2）使用HTML标记，CSS样式及JavaScript技术，完成的网页没有错误 首页设置导航栏，命名为index.html （3）利用CSS技术对网站进行布局，网站风格统一，灵活运用JavaScript使网页生动 （4）要经过至少两种主流浏览器的测试，最终检查时要配置Web服务器发布出来访问 设计结束后上交报告（纸质和电子版）、源代码 设计思路 全部包括七个网页， 首页:介绍了我的进本信息，和网站的基本信息。 关于我：详细介绍了我的各种信息奥。 慢生活：介绍了我的一些生活理念。 谁言碎语：类似说说一样是我的一些语录。 模板分享：介绍了 我自己的一些小网站。（百度云分享）。 学无止境：推介了一些图书。 留言板：没有发布，还无法实现。 设计结果及分析 1、主页： （1）背景和头像 （2）文章推荐 （3）一些好的网站的链接 （4）天气显示（百度的代码） （5）登录 2、关于我： （1）主要的个人生活简介 （2）主要的身份简介 （3）网页简单介绍（很多的是虚拟的） 3、慢生活： （1）一些程序员的文章推荐。 （2）个人小日记的推荐和网上的文件的链接 （3）点击排行链接（信息来自网络） 3、碎言碎语： （1）惹人平时的心情记录 （2）右侧的是心情发表的时间 （3）左侧是时间 学无止境： 最新技术的一个更新 右侧是技术分享的一个分类链接 左侧是技术的详细信息 总结 首先是复习了以前学过的css、html知识，又把js的只是更进一步的理解掌握，为了达到更好的效果，又学了好多html5和css3的知识。 刚开始做了好几次都有重新做，因为结构又有新的问题，通过这车让我更明白先设计好再开始编写代码，磨刀不误砍柴工 页面的布局不是动画越多越好，在最合适的地方使用合适的演示，事半功倍。 五、 附录（源代码） !doctype html html head meta charset=gb2312 title个人博客/title meta name=keywords content=徐翔的个人博客 / meta name=description content= / link href=css/base.css rel=stylesheet link href=css/index.css rel=stylesheet style type=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: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