Code Monkey home page Code Monkey logo

hlt-final's Introduction

PIIO社交网站

简单的社交网站网站重构。a simple social network site design.

因为github没有后台,无法用Ajax,很多功能无法使用。展示的只是静态的画面,无法和后台进行交互。

网站视觉设计、网站重构、JavsScript逻辑均由本人一人完成。

视觉设计

参考了新浪微博、网易的GACHA和LOFTER,主色调为黑色和黄色。 因为工作量的原因,移除了图标的设计。 总觉得有点网易云音乐的感觉(尽管我调研的时候没调研它)...

页面介绍

1. 登录注册页面

  • 选项卡的形式,在一个页面内登录和注册通过点击选项切换。

2. 注册后的详细信息填写页面

  • 注册后跳转到详细信息填写页面,用户需填完这些信息才能真正注册。需要填写的信息有:昵称、性别、生日、验证码。

3. 首页

首页很多功能没做,目前实现的功能:

  • 点击导航栏或右边的用户名,会跳转到自己的个人主页。
  • 光标滑到导航栏的用户名上时,会出现二级菜单,有“设置”和“退出”两个选项。点击“设置”跳转到设置界面,点击“退出”则跳转到登录注册界面。
  • 下拉加载新的说说模块(原设计为与Ajax搭配使用)
  • 点击发布会在网页正中间跳出发布框,可以输入文字,添加图片功能没有实现,右上方的“关闭”可关闭发布框,关闭后文字内容清空。发布按钮点了并没有什么反应。
  • 回到顶部功能

4. 个人主页

  • 只显示自己的说说。

5. 设置页面

  • 修改个人信息。

不足需要改进的地方

  • 注册页面的样式需要调整(给css流氓低头);
  • 添加一些交互;
  • 表单的验证;
  • 每个说说下面的评论模块需要添加;
  • JavaScript添加说说模块并没有实现完,比如日期都没做。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.