《通信软件开发与应用》课程结业报告

最新推荐文章于 2024-05-22 13:52:22 发布

手可摘星辰c

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量222

点赞数

文章标签： angular.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40959458/article/details/125582377

版权

一、任务要求

任务一：构建一个静态或动态网站。以下要求中任选A或B，要求如下：
A. 静态网站
采用纯 CSS 或你喜欢的任何 CSS 框架如 Bootstrap、MDB、Tailwind 等构建一个主题自选且不少于5个页面（Web Page）的网站
B. 动态网站
使用任何一个前端框架如 Angular 等进行某应用（如英雄之旅、代办事项、图书管理等）的开发，需要有 CRUD 即增删改查功能并有一定的样式
无论你选择静态还是动态网站，该网站都需部署到你喜欢的网站托管服务器上如 Gitpage 等
选择任务一，采用纯CSS框架

二、页面效果展示

主页面

在这里插入图片描述

页面一

在这里插入图片描述

页面二

在这里插入图片描述

页面三

在这里插入图片描述

反馈页面

三、设计过程

1 .主页面

主页面我设置了一个logo图片，在每个其他页面都有，点击此logo能跳转到主页面

   <div class="side_header">
          <div class="side_header_logo">
            <a href="index.html">
            <img src="image/logo.jpg" width="150px" height="100px" alt="点击返回主页"/>

在页面顶端，有两个超链接，点击能进行页面的跳转

  <span class="sep">|</span>
            <a href= "http://www.hnta.cn/"><ea>《通信软件开发与应用》课程结业报告</ea></a>

2.页面一

页面一主要是一个盒子，里面又装有4个盒子，里面存有页面主题，点击其中任意一个能切换

   <div class="box">
    	<div class="box1">金木研</div>
    	<div class="box2"><a href="history-2.html" target="_self">迪奥</a> </div>
    	<div class="box3"><a href="history-3.html" target="_self">佩恩</a></div>
    	<div class="box4"><a href="history-4.html" target="_self">艾伦</a></div>

3.页面二

页面二也类似，不过相较于页面一，使用了更多的CSS定义

时间刺客-艾克

离群之刺-阿卡丽

封魔剑魂-永恩

影流之主-劫

4.页面三

页面三主要是文字与图片的堆叠

 <div class="normal_box">
		<img src="../image/eat/莫兰特.jpeg" class="pic">
		<p class="font">[Ja Morant]&nbsp;&nbsp;贾·莫兰特是一位身体素质劲爆且充满创造力的组织后卫，他的速度、爆发力和变速能力都非常出色，这让他有足够的能力撕扯对手的防线，为自己和队友创造出好的进攻机会。出色的身体素质让莫兰特在防守端具有一定的优势，他能紧咬进攻者的脚步，机敏地送出抢断和封盖。但莫兰特在防守端的积极性并不高，他不是一个充满侵略性的防守者，只是在完成自己的防守工作。</p>

5.反馈页面

反馈页面使用了text、radio、check等type构成了一个可以让用户输入、选择的页面，并且，最后有一个submit提交按钮。

四、问题与解决

问题一：大小不能超过10M，视频无法直接插入生成网址
在原本的页面当中，是有视频插入的，但是托管时，视频大小超过10M就无法上传，导致我将插入视频删除，将代码改为插入图片。现在也不知道无法解决（压缩视频会导致清晰度大幅度降低）
问题二：对于页面布局的问题，如果图片设置过大不能显示
当图片设置像素点px过大时，在页面是没有显示的，这个问题一直无法解决，导致我只能更换为小尺寸的图片
问题三：代码中一下图片在托管时不能通过URL的方式显示成功
解决方法：下载原图片，并更改代码中图片路径

五、总结

本次课程结束后，第一次尝试设计一个完整的自己的网页，结合自己所学的CSS和HTML进行设计，由于我选择的是直接设计的纯CSS结构，并没有选择MDB或其他的模板，所以在设计时遇到了许多的问题，而且页面的布局也是丑得出奇。例如在CSS中的颜色选择、尺寸的表示方式，对你整个页面的布局都有影响，你必须对这些语法足够的熟悉，才能将你的页面布置得足够精美。其实就是文字和图片之间的位置的放置，也会影响用户的观感。总而言之，从这次课程的网页设计后，我终于了解到了自己的诸多不足，但是通过自己的学习成果来设计一个属于自己的网页也是很酷的，也许现在还不够精美，但是我相信在以后的不断打磨与优化，一定能设计出一个像样的网页来。