音悦Tai项目总结

一、使用的技术

使用Html5来实现网页的布局，使用css3和sass来完成页面的渲染。

html5概述

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

CSS3概述

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。

Scss概述

    Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

二、项目的划分

拿到项目之后发现每个页面的顶部和底部都是相同的，所以我们只需写一个顶部和底部html文件，使用iframe标签将其引入到所需页面中­­­­。其他的就是每个一个页面，引入顶部和底部即可。

三、项目分析

顶部部分

顶部可以划分为三个板块，使用三大div来布局，然后使用弹性布局（display:felx;)来完成页面的渲染。

底部部分

底部可以划分为俩个板块，使用俩个大的div来布局,使用display:inline-block;使其变为行内块元素。

首页部分

首页可以划分为4个板块，使用弹性布局来实现网页的布局，使用：hover来实现鼠标悬停效果，使用精灵图来实现每个板块的小标题。

专辑部分

专辑页面可以划分为俩个板块，第一块采用dl、dt、dd布局，第二块采用display:grid;来布局，使用精灵图来实现鼠标移动到爱心上，爱心变为实心。

购买部分

购买页面可以分为俩个板块，可以使用浮动，可以使用display:grid;,这里我使用的是浮动，因为浮动出现的最开始出现的意义是用来让文字环绕图片而已。

 

 购买须知部分

购买须知页面可以分为俩个板块，顶部和下面的文字部分，主要用到的知识点就是精灵图和hover还有一个首行缩进（text-indent）。

 四、总结

在拿到一个项目后，要先分析网页有没有相同的顶部和底部，如果有就可以把顶部和底部分别写一个页面，在使用的时候直接使用iframe标签将其引入即可。然后先页面布局，需要分成几块，最后再使用css进行渲染。