11.3笔记

音悦商城项目总结：

　　这个项目是一个针对用户而设计的一个网站，它可以方便用户对于歌曲，明星，专辑的一些查看和购买。首先，我们会进入首页面，它主要是对于网站功能的大致体现。从首页面上来看，我们主要可以大致分为三个部分；一个头部，一个主题内容部分，还有一个尾部。其中头部和尾部部分为公共部分，当点击链接跳转到其他页面时，我们也同样会引用这两部分，不用将代码复制到其他的页面上，更加的方便。

　　首先头部，我们可以看到头部右上角有购物须知等内容，这一部分会用到背景颜色、文本样式的设置，以及相对定位等css样式；在中间会有搜索文字的框、订单登陆等按钮的跳转，在这里会用到css精灵图片对搜索框进行实现，以及点击时的各种样式，其中，也是用到了盒子模型的外内边框的数值的调整；在头部这部分，我们放置了一个ul、li标签来进行功能的实现，我们通过设置了div的高和宽，还设置了首页为默认选中的样式，以及当我们鼠标移动上去呈现出选中的样式，并且跳转页面。

　　接着是中间主题内容部分，我们将这部分使用div分成了四个部分。从上到下依次是轮播图片、追星必备、专辑排行、和专辑购买展示。除了轮播图片其余的三个部分，均用到了ul、li标签。ul内含有多个li标签，可以更详细的展示专辑以及歌曲的内容。当我们点击专辑排行里面的li标签时，他会跳转到列表页面。当点击专辑购买时，会跳转到购买页面。这其中会用到a标签的href属性，对跳转页面进行选择。在这个中间内容部分也会用到css精灵图片、各个div高宽的设置，盒子模型的使用、背景图片、文本字体设置、元素垂直方式的设置。

　　最后是公共的尾部，这一部分我们使用了图片以及div还有a标签，以及背景图片，对页面进行了展示，其中，CSS样式使用到了布局中的绝对定位和相对定位，以及盒子模型，还有精灵图的使用。

　　这一项目我们除了有首页购买页面登录页面，还有购买须知页面和列表展示页面。当我们点击首页头部购买须知时，我们会跳到购买须知页面，这一页面同样使用了公共的头部以及尾部，在这一页面中，我们会对购买时，一些需要所知信息进行阐述。其中包括预订商品专辑价格，发货周期和快递退换货相关内容进行阐述与分析。在这一页面的主体部分，我们可以通过预订商品专辑价格，发货周期等a标签进行对页面的快速，访问，例如，当点击专辑价格时，它会直接跳转到此页面的专辑价格部分。在这一部分，我们用到了盒子模型文本居中样式，页面背景，颜色以及精灵图片和鼠标移入事件等CSS样式的使用。

　　当我们点击首页新品首发里面的各个标签时，我们会跳入到购买页面，其中，购买页面同样使用了公共头部以及公共尾部，在主体部分，使用到了面包屑导航，它可以展示当前页面在导航层次结构内的位置，在购买页面这一部分，我们主要将他分为了左边和右边，右边主要对专辑的样式进行了展现，而右边则是对专辑的价格数量进行了展示，在最后我们可以选择加入购物车或者立即购买，在这一部分，我们主要使用到的CSS样式有精灵图片，字体样式的设置，元素对齐的方式，以及各种背景颜色和文本样式的设置。

　　最后是登录页面，当我们进入到首页，点击登录按钮时，它会跳转到登录页面，在这页面中，我们会看到手机号或邮箱的输入以及密码两个文本框的展示。在文本框下面有一个自动登录按钮，以及最下边的一个登录按钮。在这里，它会使用到文本框的placeholder属性以及选择框与label标签的连接。这一部分的CSS样式主要会用到背景图片，文本框，样式大小的设置以及精灵图片和浮动布局里面的元素分布。

　　这个项目不但让我对css样式的使用产生了更多了了解，也让我更加熟悉html页面的布局。同时也让我对一个项目的完整性有了更多的认知。