项目总结(0730)

本次所总结项目为“音悦网”，其中所做的部分内容有：首页、专辑、专辑(独家发售)、购物须知、登录页面。所使用的技术有:html、css。这次要总结一下做项目过程中的所遇到的困难和做完之后的心得。

一、项目内容

在做项目之前，要先构思好整体页面的布局，这样有利于提升我们做项目的过程中的流畅程度和页面效果的美化程度。首先分析整体页面的特点，再进行进行网页的布局。可以发现每个部分的网页都有相同的“头部”和“底部”，我可以单独做一个头部和底部的网页。这样可以直接引入到所需要的地方，减少网页的代码量而且特别方便。

1. 头部

  效果图：

       

 

     首先对头部进行布局。头部可以分为三个板块：顶部的音悦网、中间部分的音悦商城、底部的艺人分类。顶部分左右两个板块，中间部分三个板块，底部也分两个板块。可以使用弹性布局进行位置上的调，其中关键的地方就是鼠标移入官方微博和关注微信，会有一个二维码的显示。可以是使用 display：none；和display：block；进行交互使用。

1. 底部

   效果图:

   

 

    底部的布局分两部分：顶部的图片部分、底部的内容部分。底部内容可以分上下两部分。其中关键点是两个小图标的摆放的位置，可以使用定位 position:relative和position：absolute来实现位置上的调整。

1. 首页

效果图:

 

 页面可分为四个部分,每部分主要使用弹性布局来实现位置上的调整。其中部分三中的图片变大变小的动画效果可以使用：@keyframes 和 animation。

1. 专辑

   效果图:

   

 

   这里可分为两部分，其中第二部的内容部分可使用：grid进行布局。然后对每块进行调整即可。

1. 专辑(独家发售)

效果图:

 

  同样这个网页也可以使用:grid进行布局,然后调整每个的间距即可。

1. 购物须知

       效果图:

       

 

      这个页面看似内容非常多，其实只要有一个好的布局方法就可以轻松应对。这里分为两大部分:标题部分和内容部分，其中内容部分可分为内容部分的标题部分和字体部分。

1. 登录

   效果图:

    

 

登录页面可以使用table标签直接布局。input进行非空验证等其它效果。

• 做项目中遇到的困难

     最主要的问题还是项目的布局问题。例如在做专辑页面时只做好页面的整体布局，内容区域没有做好调整。导致在过后的页面优化过程，出现了不知道怎么改，或者改不了的情况。经过自己不断的构思，将内容区域的布局进行了调整。最后才实现现在的页面效果。从中我明白了一个道理，做什么事都要一个规划一个路线不要心急。战国时子思说过一段话非常有道理，“凡事预则立，不预则废”，

打代码也是一样。

• 心得

    该投入做事时候细心耐心,心无旁骛沉浸。需要抽离的时候迅速脱离,如云雀袭长空,片叶不沾身。如此劳逸结合,必定事半功倍。