通信软件开发与应用课程大作业
- 设计内容
设计内容主要以游戏崩坏三为主题，使用HTML和CSS来发表我对崩坏三的一些看法，以及对崩坏三的一些介绍。总共9个页面。使用所学的HTML和CSS的部分内容来构建自己的网站。9个页面分别为：剧情介绍、角色介绍、动画制作、制作相关、动画音乐、游戏发展、作品评价、游玩感触、以及文档一些壁纸推荐。每个页面有所不同，以不同的风格构造。
- 开发过程
首页是我第一个成品网页，功能性会相对于少一些，在学习网页编程前期，我主要学习到的就是各种块状元素的排列组合，所以网页的首页整体布局是利用块状元素：表格、div对整个网页进行布局。通过导航栏来实现网页之间的交互。
首页上主要有头部，导航栏，左部内容块，右部内容块，在左右内容块里又分别划分子块，主要用来排列图片、文字内容以及视频等元素。
HTML文件的头部设置：在每个HTML文件的头部里面添加标题<title>：“崩坏三：为世界上所有美好而战”。
跳转：在每个HTML文件的<body>的头部以超链接的形式将每个页面的所表达的意思以超链接的形式表达出来，来作为也页面跳转的踏板。以此来实现页面的跳转。
在每一个HTML文件的<main>里面添加内容来丰富自己的页面：
主网页主要起点题的作用，通过导航栏交互到相应的子网页，第一个子网页主题“剧情介绍”主要是对“崩坏三”故事的详细介绍，其余之后的子网页也都设置了导航条来实现各个页面的跳转，该网页也设置了导航栏，用于和其他网页进行交互。
网页布局：主要运用到CSS，CSS在页面框架中也有很大的作用，主要是对DIV模块的排列，通过对DIV模块加 border-style:solid; 的代码给模块加入外边框，来调整整个页面的布局。页面颜色也是在CSS中设置，
背景设置：background-image:url(“picture2/bei.jpeg”);，运用图片作为标题以及导航栏的背景图片，同样的方式也设置了整个网页的颜色主调。
开发的时候多采用HTML和样式表的方式结合，在样式表的方式对HTML文件进行修饰。
*{box-sizing: border-box;}
p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,form,table,a,div,img,body{
margin:0;
padding:0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.clearfix:before,.clearfix:after{display: block; content: ""}
.clearfix:after{clear:both;}
li{
list-style: none;
}
body{
background: url(../../img/bg.png);
background-size: 100%;
position: relative;
height: 700px;
padding-top: 20px;
}
header img{
position: absolute;
right: 150px;
top: 150px;
border-radius: 50%;
box-shadow:0px 0px 10px 10px #bc2e22;
}
header ul{
width: 90%;
display: flex;
justify-content: space-around;
margin: 20px auto;
}
header ul li{
width: 9.7%;
}
header ul li a{
color: #fff;
display: block;
background-color: rgba(0,0,0,0.4);
border: 1px solid gray;
text-align: center;
line-height: 45px;
font-size: 14px;
border-radius: 5px;
}
header ul li a:hover{
color: #bc2e22;
background-color: rgba(0,0,0,0.6);
}
main h2{
color: #b2652d;
line-height: 60px;
text-align: center;
font-size: 34px;
font-family: "幼圆";
width: 15%;
margin: 10px auto;
letter-spacing: 2px;
text-shadow: 4px 3px 3px #b7a696;
}
- 问题及解决方式，以及未完成的问题
问题：在开发的过程中我未实现对表单所发表的数据进行存储展示，只是单纯使用了表单，并没有解决表单信息的展示问题。
在开发过程中会遇到一些HTML和CSS表现方式的不了解，着时候我会去查看老师深刻讲解的内容，如果找不到的话，我会上网自行查询解决问题的方法。
- 总结
通过本次的HTML+CSS开发，让我对web编程有了更加浓厚的兴趣，同时也是对我web学习的一个自我检测和成果展示。了解了css的概念和特点，在网页中使用css的四种方式及选择器的语法格式及三种选择器;标签选择器、类选择器和ID选择器。掌握了cssde创建及管理方式和其中常用的属性，应用css+DIV进行页实验体会。CSS是以HTML为基础，提供丰富的格式化功能，是将样式信息与网页内容分离的一种记性语言。在学会使用CSS美化网站后，感CSS是一个神奇的东西，使我感觉好奇，是什么力让网页可以这样变化，在自己完完整整做了一遍后才知道其中的奥妙。
68
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
