神刀安全网

Fly Zone网站建设记录总结


前言

晚上敲代码敲了个通宵,自己做了一个 Shadowsocks 的网站,使用了 Bootstrap ,响应式开发,支持电脑、平板、手机浏览。

网站地址:flyzonee.club

本文的定位是笔记,下面主要是说一下搭建过程。

效果展示

Fly Zone网站建设记录总结

flyzone.gif

思路规划

开始前要先设计一下布局和具体展示内容什么的,画一个大概的设计草稿并简单标记。这一步个人认为非常重要,因为之后写代码的结构安排等包括 sectiondiv等的 class、id 取名以及栅格系统的布局等都要用到,提前设计好写代码时会方便有条理不少。

需要考虑的内容

都需要包括哪些内容,页面的布局,各个主题内容的位置,内容的展现方式(文字?图片?卡片式?动画?……),页面的颜色搭配,鼠标滑过/点击的效果,配图的选择……

然后就是根据想好的画一个页面设计草稿,之后又增增改改,画的有点乱,就不展示出来了。⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

结构

根据上一步设计好的,把 HTML 在结构上分为 9 部分:

  1. 导航栏 —— Navigation
  2. 开始 Logo 及欢迎语 —— Header
  3. 服务介绍 —— About
  4. 服务价格 —— Services
  5. 教程 —— Tutorials
  6. 下载 —— Download
  7. 联系购买 —— Contact
  8. 尾部声明/广告&版权 —— footer
  9. 教程模态框部分 —— modal

方法

概述


网站采用响应式开发,主要使用 Bootstrap ,实现自适应不同大小的屏幕,在任何设备上都能比较美观的展现网站内容,浏览起来也比较舒心。

结合模态框的使用,把两个“教程板块”(即 “网站注册使用指南 ” 和 “Shadowsocks使用教程 ”)放入模态框内,通过点击在原页面呼出相应“教程”,并可通过页面首尾的 “X” 返回。尽量减少页面跳转。

主页右上角的“登陆”和“注册”,是连接到 ss-panel 管理面板上的,用户能够方便地登陆后台查看自己的流量等账户使用信息。因为目前还不会 php ,所以用户管理系统只能用现成的开源方案。也没有实现自助下单发货功能,会继续学习研究下。

HTML+CSS+JS


  • 使用的 HTML5 ,但只用到了一些语义化的标签,并未用到一些新的特性,也确实用不着;
  • CSS 的话倒是用到了一些 CSS3 的动画效果,transitiontransform等,并对常见浏览器进行了兼容,感觉还不错;
  • JS 方面的话使用了 jQuery,主要是页面滚动时顶部标题栏的变换和“回到顶部”按钮的出现;

开发工具是 sublime 3,先在本地开发完成,结合 Chrome 预览调整,改 Bug 。调好后部署到 VPS 上完成。

问题及解决

Q & A 1


Q:我开始设计时就把导航栏设计为透明的,能够显示出背景图片,但是实际中当文字移动到导航栏下面时会与导航栏的标题发生重叠冲突,影响显示效果。

A:通过 JS ,当页面向下滚动时给导航栏的 nav 添加样式,将其变为不透明的,稍微有点浅黄色并将字体换为黑色。

Q & A 2


Q:上一个问题同样出现在移动端设备上,收缩的导航栏一展出,因为其透明背景与页面内容重叠。

A:通过媒体查询 @media 进行调整,当使用手机查看时,将导航栏变为黑灰色背景和浅灰色字体。

Q & A 3


Q:使用了 Font Awesome 图标字体,以前都是用的 cdn 的资源,这次把 font-awesome.min.css 下到了本地调用,但不起作用,换用网络资源就行。

A:最后发现是因为只拷了 min.css 一个文件,需要把整个文件夹拷过去才可以。因为一直用网络资源,也没发现,直到这次才知道。

Q & A 4


Q:移动端显示 Bug,本来应该完美自适应不同大小的移动设备的,但在测试时发现小屏幕上左右拖动时会晃动,即有一块内容的总宽度要比其它内容多一点。

A:经检查发现是“联系购买 ” 部分的问题,但是检查 HTML 和 CSS 代码没问题,Chrome 调试那块就是多了 padding,怎么都去不掉,更改覆盖都不行,除非删了“联系购买 ”部分。

没办法,把这部分删了重写一遍,结果好了。可重写的看起来和原来的一样啊!就把两个代码段提出来,diff 一下,才发现是少了</div>元素没闭合!

总结

  • HTML 元素没闭合问题可能是代码的删改过程中造成的,以后代码写完要先用工具检查下,可以使用 w3 的验证服务。

  • HTML 的结构安排还行,就是要注意下元素闭合问题,这个有时会引起难以预料的奇妙 bug,这次深有体会。

  • CSS 的结构安排有一点乱,需要注意,这几天把《精通CSS》研究下。

  • Bootstrap 的布局和一些基本功能的使用还好,但有些复杂点的如模态框还是需要查看文档才能完成。

结语

还提供了Shadowsocks 教程下载资源

包括:

  • Shadowsocks 使用教程(包括电脑端和移动端);
  • Shadowsocks 各版本客户端下载(Win,Mac,Android,IOS);

欢迎大家来踩一踩! / ( ^∀^) /
网站地址:flyzonee.club

@原创文章,所有权力归作者所有,转载请注明出处

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Fly Zone网站建设记录总结

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址