Skip to content
This repository has been archived by the owner on May 10, 2023. It is now read-only.

nep1406886/html_only_copy_job

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

[TOC]

关于网站

中国珂学院网站来源于洛谷某管理员。。具体是谁我也不太清楚,大概是他对珂朵莉这个动漫角色好感度高,加之珂朵莉树事件,所以就心血来潮写了个中国珂学院的网站,目的大概就是表达对这个动漫角色的喜爱,以及让人知道有珂朵莉这样一个动漫角色,有珂朵莉树这样一种暴力的数据结构。。有些网站并不是一定要有所谓的功能,而是告诉网络,有这样的一个网站。

其次

我选择模仿这个网站是因为第一眼看上去好做,且界面简洁美观,以及珂朵莉这个动漫角色我也有很深的印象,动漫名:**《末日时在干什么?有空吗?可以来拯救吗?》**我当然看完了,还补完了小说。

关于css布局

我的网站都是一个一个敲出来的。原作者的网站是用框架写的,能参考的只有布局,在写这个网站的过程中遇到了很多问题,尤其是空白问题。算是明白了没有无缘无故的空白。。虽然我大多数都想认为是无缘无故的。。例如轮播图做好后我的页面右侧空出来一大片例如。。

img

页脚上面的部分空白,后来发现是footer的一个子div高度设高了顶出来了。。

因为实在轮播的小点宽度问题而导致的右侧空白

然后是上面这个。折腾最久的空白,审查元素好久才知道是因为轮播图的小点。用的ul宽度问题,因为浮动导致没高度所以只有一条线,导致很难找到问题所在。。

其实还有很多问题,。。看我代码提交次数就知道了。。。

还有,因为页面简单所以考虑了一点响应式设计,在手机端也能很好的显示,以及缩放窗口,

关于js

然后就是js问题了,虽然只是用了三个,这个滑动的导航栏兼容性问题真的很,不去查文档就怀疑是代码出问题了。

image-20200701184018477

我还引入了不蒜子统计,引用了一个live2d的js看板娘,看板娘不支持跨域名调用,所以谷歌本地打开无法显示,这个问题还是找这个js的开发人员问的。。然后顺便加了他们网站友链 中国珂学院Wiki 这网站开发组真是人才辈出。。因为这俩个插件,所以部署到码云是个非常好的选择,推荐通过最后的链接查看网页,另外没考虑浏览器兼容性问题,只有那个判断距离页面顶部高度的js获取考虑了下?(存疑)

最后选择取消了轮播图的上一张下一张显示,但是点击盒子边缘仍可切换,只是把按钮透明化了

最后

每次自我感觉良好的时候都提交到了码云。。也算是证明是我一个人一手敲出来的,也是为了部署上去用手机查看效果,git配合vscode体验极佳,可惜没有块大屏,敲代码体验实属拉跨,这次仿造差不多学了很多。。效果也还算理想,对了。里面一些logo都是我自己裁剪的。。虽然只有几个,不过也说明ps还是会用一点的,,

image-20200701185443171

我还想加些东西上去的,不过时间上好像有点不够,因为我做的有些迟了。。。

image-20200701185917954

码云上面的提交数据emmm。

最后附上地址,中国珂朵莉某未收录分站

https://gitee.com/suoga1406886/giteeimges/raw/master/设定集_页面_002 副本.jpg)