WEB前台静态网页开发设计.doc

WEB前台开发 姓名： 王XX 学号：201232 XXXXXXX 班级： 计科1231班目录一、设计思路2二、制作流程3三、关键技术总结和关键源代码分析（加注释）31. Javascript选项链接和实现图片的效果332./body背景和css链接43. 鼠标点击出现阴影效果5四、HTML+CSS+javascript代码61.CSS代码62.布局框架代码9五、心得体会26一、设计思路1 以个人兴趣爱好来展现自己来制作我的个人网页2 网页的结构分为三部分个性签名模块、链接模块、内容模块、主页模块3 资料的收集与整理：文字内容、图片、超链接。4 网页设计由HTML语言、CSS样式和Javascript语言来对网页修饰5 布局主要以div和表格为主，大部分框架可以套用，二、制作流程1 界面2 程序3 网页的设计三、关键技术总结和关键源代码分析（加注释）1. Javascript选项链接和实现图片的效果 window.onload = function () var oDiv = document.getElementById(div1); var aBtn = oDiv.getElementsByTagName(input); var aDiv = oDiv.getElementsByTagName(form); var i = 0; for (i = 0; i aBtn.length; i+) aBtni.index = i; aBtni.onclick = function () for (i = 0; i aBtn.length; i+) aBtni.className = ; aDivi.style.display = none; this.className = active; aDivthis.index.style.display = block; ; / var oUl = document.getElementsByTagName(ul)0; var aLiUl = oUl.getElementsByTagName(li); var iNum = Math.round(790 / 5); for (var i = 0; i aLiUl.length; i+) aLiUli.style.left = i * iNum + px; for (var i = 0; i aLiUl.length; i+) aLiUli.index = i; aLiUli.onmouseover = function () for (var i = 0; i aLiUl.length; i+) if (i = this.index) startMove(aLiUli, left: i * 30 ); else startMove(aLiUli, left: 790 - 240 + (i - 1) * 30 ); ; aLiUli.onmouseout = function () for (var i = 0; i aLiUl.length; i+) startMove(aLiUli, left: i * iNum ); ; ; 2./body背景和css链接 3. 鼠标点击出现阴影效果 1.css阴影效果:#poto border-style: solid; transition: box-shadow linear 0.2s; box-shadow:0 0 0 0px rgba(255,255,255,0.2); border-width:0; float:inherit; left: -29px; #poto:hover box-shadow:0px 0px 50px 2px rgba(255,255,255,0.3); #div1 input height:10px; border-radius: 500px; background:rgba(255,255,255,0.3); padding:20px 0px 20px 0px; margin:20px 0px 20px 0px; width: inherit;border-style: solid; transition: box-shadow linear 0.2s; box-shadow:0 0 0 0px rgba(255,255,255,0.2); border-width:0; float:inherit; left: -29px; #div1 .active box-shadow:0px 0px 50px 2px rgba(255,255,255,0.3); 四、HTML+CSS+javascript代码 1.CSS代码 div width: 900px; /*height: inherit;*/ height:inherit; margin:0px 0px 0px 0px; #zuo width: 100px; float: left; position: fixed; text-align: right; #you margin-left: 220px; margin: 0px 0px 0 190px; color: #FFC; top: 15px; width: 800px; border-style: solid; transition: box-shadow linear 0.2s; box-shadow:0 0 0 0px rgba(255,255,255,0.2); border-width:0; float:inherit; left: -29px; #you:hover box-shadow:0px 0px 50px 2px rgba(255,255,255,0.3); #poto border-style: solid; transition: box-shadow linear 0.2s; box-shadow:0 0 0 0px rgba(255,255,255,0.2); border-width:0; float:inherit; left: -29px; #poto:hover box-shadow:0px 0px 50px 2px rgba(255,255,255,0.3); #div1 input height:10px; border-radius: 500px; background:rgba(255,255,255,0.3); padding:20px 0px 20px 0px; margin:20px 0px 20px 0px; width: inherit;border-style: solid; transition: box-shadow linear 0.2s; box-shadow:0 0 0 0px rgba(255,255,255,0.2); border-width:0; float:inherit; left: -29px; #div1 .active box-shadow:0px 0px 50px 2px rgba(255,255,255,0.3); #logo width:73px; height: auto; z-index:1; left:1px; #hand margin:10px 10px 10px 200px; #div1 form width:%; height:100%; display:none; padding:0px 0px 0px 0px; #header background:url(2.jpg) no-repeat; width: 800px; height:340px; margin:0 auto; padding:5px 0 0 5px; .h1 margin:0; padding:280px 0 0 40px; letter-spacing:-2px; font-style:40px; .a color: #FF9; .h2 margin:-10px 0 0 0; padding:0 0 0 175px; font:Verdana, Geneva, sans-serif; .lybfont-family: sans-serif;font-size:13px;color: #CF0; input, textarea font-family: Arial, 宋体, sans-serif; background-color:transparent; #hander_1 width:100%; height:auto; margin:0 auto; padding:10px 0 0 0px; li list-style:none; img border:none; vertical-align:top; #boxwidth:790px;height:300px; position:relative; margin:30px auto; overflow:hidden; ul width:790px; position:absolute;left:0; top:0; z-index:1; ul li width:790px; position:absolute; left:0; top:0; height: inherit; olz-index:2; width:240px; position:absolute;right:10px; bottom:10px; ol li width:20px;height:20px; float:left;margin:0 2px; display:inline; background:#fff; color:#f60; line-height:20px; text-align:center; ol .active background:#f60; color:#fff; #apDiv1 position:absolute; width:200px; height:115px; z-index:1; 2.布局框架代码 1.按钮部分 2.内容部分 1.最新动态 主任你好久没有发言了！说两句呗。 发表 昵称 个性签名-# dawdad dawdad dawdad dawdad (1) (2) (10) (0) 我也说一句 发表 asdasd asdasda safdsaasfdasdasfa 祝我的家人、朋友永远平安快乐！ (1) (2) (10) (0) 我也说一句 发表 3 日志部分 阿斯达# 个性签名-# 事实而已 海底金鱼 一、 有钱的意义并不是可以肆意挥霍，而是有更多的选择。 二、 心情再差你可以写在脸上，工作再累你可以抱怨，生命再短你可以随意作践，生活再苦你可以失去信念，前行再难你可以踯躅不前。但是前提你必须知道：没有人喜欢看你的臭脸，没有人无条件替你干活，没有人为你的健康买单，美好将在明天，自己的选择，跪着也要走完。每个人都累，不是只有你一个而已。 三、 有个尴尬的年龄，结婚太早，恋爱有些晚。跟小孩一起玩无聊，跟大人呆一起又没共同话题。在家太闲，出门没钱。啥都不想被骂没理想，想法多了被指不踏实。青春就是这样，让人有些无所适从，但若干年过去后才发现它的美好和重要这个时候你的所做所为，会影响你一辈子。   (10020) (424018) (52104) (11242) 分享到 我也来说两句 使用 其它 内容 提交 4.我的信息部分 阿斯达# 个性签名-# 我的资料 性别： 女 个人简历 年龄： 20 # 生日： 4-20 星座： 白羊 现居地： 昆明 婚姻情况： 否 血型： A 故乡： 昭通 职业： 学生 兴趣爱好： # 性格 # 联系QQ 1# 5.我的相册 dawdad dawdad dawdad dawdad dawdad dawdad dawdad dawdad dawdad 今日浏览214次 历史浏览记录（195756） dawdad dawdad dawdad daw