《Web应用基础》课程结业报告

做的什么

本网站简单的介绍了哈尔的移动城堡这部动漫，分为网站首页、剧情简介、角色介绍、作者介绍、影片介绍、联系我们6个页面。
页面展示
无法上传图片，一直失败，但能选择csdn提供的图片，没能解决。
css部分代码

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body {	font-family: "宋体";font-size: 12px;color:#000000;line-height: 20px;text-align:left; background:url(../images/b.jpg); background-size: cover}
td,th {font-family: "宋体";font-size: 12px;color: #000000;}
a {color: #000000;} 
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
ul,li{list-style-type:none;}
.clearit{clear:both;}


.da {width:1000px; margin:0 auto; background: rgba(255,255,255, 0.8 )}
.ban {width:1000px; height:440px;}
.nav {width:1000px; height:50px; background:#374362; line-height:50px;}
.nav li { width:166.66px; float:left; text-align:center;}
.nav li a {width:166.66px; height:50px; display:block; font-size:16px; color:#FFF; font-weight:bold;}
.nav li A:hover { background:#52638f;}
.zuo {width:470px; float:left; padding-left:20px; padding-bottom:20px;}
.zuo h2 {width:430px; height:40px; padding-left:20px; margin-top:20px; background:#77a720; border-radius:15px; line-height:40px; color:#FFF }
.zi {margin-top:20px;}
.zi p {line-height:30px; text-indent:2em; font-size:14px}
.you {width:440px;  padding:20px; float:left; margin-left:30px; background:#7fdce2;}
.you h2 {width:420px; height:40px; padding-left:20px; background:#77a720; border-radius:15px; line-height:40px; color:#FFF }
.you li {width:220px; float:left; margin-top:10px;}

.yi { width:1000px; border-top:1px dashed #666666;}
.yi h2 {width:940px; height:40px; padding-left:20px; margin:0 auto; margin-top:20px;  background:#77a720; border-radius:15px; line-height:40px; color:#FFF }
.yi ul {width:960px; margin:0 auto;}
.yi ul li {width:240px; float:left; text-align:center; line-height:30px; margin-top:20px;}
.yi ul li a { font-size:14px;}
.yi li A:hover { color:#F00;}
.foot {width:1000px; height:60px; background:#374362; line-height:60px; margin-top:20px; text-align:center; font-size:16px; color:#FFF; font-weight:bold;}
.er {width:960px; padding:20px;}
.er h2 {width:940px; height:40px; padding-left:20px; margin:0 auto; margin-top:20px;  background:#77a720; border-radius:15px; line-height:40px; color:#FFF }
.san{ margin-top:20px;}
.si input {width:300px; padding-left:10px; height:35px; border-radius:15px; margin-top:20px;}
.wu textarea {width:350px; height:120px; padding-left:10px;  margin-top:20px;}
.liu input {width:100px; height:35px; margin-top:20px;}

开发过程

本次开发可选择静态网页制作和动态网页制作，我选择的是静态网页制作。在学习了棋歌教学网上的内容以及借鉴了部分网站的排版，定义了css样式表。完成了网页的开发。

遇到的问题，如何解决

最初在设计主界面框架时，由于对菜单界面设计的不熟悉，在界面设计时遇到了排版混乱以及图层混乱的相关问题。更多的问题无非就是我们学的标签可能不够支撑我们去设计更有“花样”的内容，或者是很难满足我们的预期效果。后来查阅资料，参考了部分网站，并且一点点的调试，询问同学，最后解决。

未解决的问题

没能实现鼠标放置在每个动漫人物图片能自动显示该角色的信息，在联系我们该部分页面上虽然能输入相关语句但是无法提交。

总结

web学习的时间虽然不长，但是内容丰富，上手比较容易，操作起来感觉也很花哨，相比之c语言，java之类的更加吸引人的兴趣。本次网页设计相对来说比较困难，因为学习的相对较浅，做作业是需要大量查找资料，但是这也极好的锻炼了我的自学能力。通过对web前端开发的学习，我看到了今后的另一个方向，并且如今前端开发也越来越重要，加油吧。