做个人网站的一些心得体会

近期自己做了一个个人网站,从零开始。下面的内容可能对你们来说都是废话,但我的确是这样子做出来的

  • 关于个人网站:下面是一些奇思妙想
  • 听说看此博客的时候搭配https://zliang66666ll.github.io/ICY.github.io/icy/更配哦(见笑了,我的拙作)
  • 开始页:一张经过处理的图片,点击后出现ppt中溶解的效果(因为做不出来)(最后换成的canvas图)
  • 主要内容:首页 博客 我 关于 更多
  • 具体的内容:首页主要介绍本网站 利用图片,鼠标进入事件来写交互,文字类的用c3来写
  • 博客为csdn上的内容,先不设置评论,只是能打开观看就行了,然后注意什么时候打开新窗口,什么时候在原网页打开,具体格式以csdn的样式或则掘金为主//(最后发现哪一个都做不出来,废了)
  • 我 为一个提供个人展示的地方,可以把自己喜欢的句子,自己拍摄的图片放在上面
  • 关于:网站的一些建立过程,当下的一些情况,联系方式;qq 邮箱之类 csdn博客等
  • 更多:可以为之后会推出的功能,彩蛋等(彩蛋我还是比较满意的)
  • 网站主配色: 用浅色 主页图我觉得可以用彩虹//毙了(彩虹图放在了mine页,如果那时彩虹的话)
  • 注意 网站标题栏的图标,之前小米网站写过,就icy吧 我觉得那张图还挺好的
  • 然后要写宽高时为对应显示器的宽高 然后开始分页?
  • 网站每部分下拉的最后,要有风格统一的图案,可以是有延续的形状
  • 主要的界面以圆角矩形为主,以文字框为主,在文字框里面对文字本身更改它的大小和透明度。悬停的c3动画
  • 我:应该是一个照片墙类型的个人介绍,利用自己的文字,展示自己
  • 其它的一些图片在博客文件夹里面
  • 首页背景图做渐变色的气球,静态吧,就那几个主色调
  • 那张彩虹图放在个人页上
  • 宽80%
  • Boder radio==20%;
  • Icy-future   top的域名感觉挺好的(最后图简单便宜,去了github简单了很多)
  • 网站的下图应该用盒子margin 0 auto解决 看是否能消除bug
  • 最后将所有的名称改为了英文,高大上一点?(其实还好),可能和ICY比较搭一点
  • 优化动画和交互体验

除此之外,大概还花了4、5张草图,用PS做了一些图标图片,不得不说,还是花了不少时间的,以上内容作为参考,如果你也想建立自己的个人网站的话,从思想步骤上,我的想法和走的弯路还是有点价值的,不好意思,自恋了。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
个人网站一共有8个页面。首先博客的登录界面login.html:是利用html5和css3结合写出的一个超炫酷的页面,根据canvas粒子制作出背景具有动态的效果。登陆后根据存入数据进行比对,对其用户名、密码、验证码验证,只有通过验证后才能登录成功并且验证成功后可以达到全屏的效果。每一个页面分为footer body和footer三部分组成。头部主要就是标题栏,尾部是页脚,中间就是主题内容。index.html主页:主要就利用js焦点滚动式轮播插入图片和文字自行进行翻页,其他主要利用div和css进行控制每一个内容框。利用链接跳转到相对应的内容上。可以根据标题、标签、关键字等点击到另一个内容,图片和文字进行有个布局达到图文环绕的布局。再然后,就是 关于about.html页面:博主简介利用jquery焦点缩略图轮播滚动类似选项卡滑动切换。可以自动展现不同的图片。其次,是成长页面about.html:是博主对未来的美好未来的期待,利用bootstrap响应式布局进行布局,图片和文章不同布局相结合,是整体更协调。再其次,是娱乐fun.html页面,利用CSS3 transform当鼠标悬停到照片上时,图片具有放大特效,主要利用css3中scale()和rotate()进行旋转和缩放。接下来是说说moodlist.html:个人心情页面,博主可以发一些类似于微信或qq心情说说,具有时间年轮的效果,当鼠标放上某一个时具有高亮的效果。最后是留言comment.html页面,可以通过给博主留言。给博主一些意见,该留言可以有表情添加,留言框带有头像。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值