标签：Web 结业 top height width 课程 20px margin left
文章目录
做的什么
本网站简单的介绍了哈尔的移动城堡这部动漫，分为网站首页、剧情简介、角色介绍、作者介绍、影片介绍、联系我们6个页面。
页面展示
无法上传图片，一直失败，但能选择csdn提供的图片，没能解决。
index页面
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前端开发的学习，我看到了今后的另一个方向，并且如今前端开发也越来越重要，加油吧。
标签：Web,结业,top,height,width,课程,20px,margin,left 来源： https://blog.csdn.net/m0_48679320/article/details/118072140
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。