总结：这次的大型购物网站做了有三天，耗时蛮久的，html+css也在这次制作中玩的很溜了，也是时候给自己的pc端css的学习画上一个圆满的句号。只是在一些小细节和思路上有一些新的启发，下面我会一一说到这些发现，希望自己在以后的开发中能够注意。

    首页样式
    image.png
    image.png
    image.png

    商品页样式
    image.png
    image.png

    注册页样式
    image.png

    网站制作前的准备
    拿到一个网站的psd图片，先建好文件夹，首先css样式文件夹，images图片文件夹，upload经常更换的广告文件夹和fons字体图片文件夹。然后需要思考这些psd的公共样式的部分，之后将css公共样式其放到common.css中，以后在想用到同样的样式的时候就不用再重新打了，再建立主页index.html\css ，商品页list.html\css ，注册页register.html\css 。在开始制作之前还有一个很重要的步骤就是建立css基本样式和格式的base.css文件，最简单的就是把你想copy的网站源码的基本样式css给扒下来放进去^^（这次扒的是京东的base），再在base的*中调整css3盒子样式，改成box-sizing：border-box。这很重要！！完成这些步骤就可以开始大型网站品优购的制作了（如图）
    image.png
    image.png

    因为到时候制作要使用字体图标，所以还要在index.html的style中加上字体图片方便使用
    image.png

    给自己的网站的title加上图标.ico文件，通过在head中link ico图标文件来实现
    image.png

    首页的制作难点
    首页是难度最大的一个页面，内容多并且样式多变，耗时最久，我下面就讲讲学到的东西

    1.首先是SEO优化，为了能让我们的网站能被浏览器搜索到，我们要对首页进行SEO优化，做法就是给index.html的head设置title，description，keywords，这些到时候有专业的人士来设计，我们只需要把别人设计好的放上去
    image.png

    2.顶部快捷导航section的制作，在版心w已经确定的情况下，我们需要如何让背景颜色占满屏幕（如图）
    image.png
    做法就是先放确定高度的section，再放确定宽度的版心w，然后给section加背景颜色就可以了。
    image.png
    image.png

    3.section栏的右边小短线，有三种方法来实现
    第一种：利用给a来加border-right来实现，但是要调整里面a的高度，使得短线不会很长，最后一个a没有右边框，可以通过单独设置。
    第二种：利用span然后给span设置width=1px，hight=你想要的长度，在设置一个背景颜色就可以实现，最后一个盒子没有短线，就不给最后一个盒子加span就可以了。
    第三种：和第二种有点像但又不是，不同的是利用伪元素li::after来实现，在li的后面加一个伪元素 (伪元素不要忘记加content！！）相同的是都要设置宽=1px和高和背景颜色，最后最后一个盒子没有短线就通过nth-child（-n+6）来实现，这个方式更专业！！
    image.png

    4.logo的SEO优化，我们再放logo的时候，不能直接放一张图片上去，我们要设置一个logo盒子，设置盒子大小，并且放上背景图片，也就是logo，然后再将其中放上h1，表示重要性，再往h1里面放一个a，a里面是一个主页链接，意味着点击logo就可以返回主页，再放上title进行seo优化（记得要调整a为块级元素之后将其大小设置为和图片一样大，使得点击图片哪里都可以返回主页和显示title）
    image.png
    image.png
    image.png

    5.搜索栏的制作，布局是先放一个大盒子并且设置边框里面再放两个input，制作的时候出现了边框溢出问题，原因是没有清除ipnut的button格式，至于里面的文本框里面的默认文字就不要在使用value了，显得很不专业，要使用placeholder=语言开发，就会显得很专业了。
    image.png
    image.png
    image.png

    6.之后到nav导航栏的制作，基本都很简单，只不过多了个全部商品分类的模块，他和nav是连在一起的，不能分开。制作方法是先建立一个div，然后在这个盒子里放入自定义列表dl>dt>dd，再在dd里面放入下栏的ul>li>a的布局，即可完成
    image.png
    image.png

    9.广告焦点图中的轮播小圆点的制作
    image.png
    通过ul>li来制作，ul是大盒子，调整成透明之后，再通过给li设置宽高和圆角来实现

    8.分类栏的精灵图使用
    image.png
    这个栏有很多小图片通过精灵图的定位来解决需要多次读取图片的麻烦
    image.png

    9.楼层布局的使用
    image.png
    这个布局是楼层布局，不给盒子设置高度（记得清除浮动）， 之后会设置点击按钮进行盒子楼层的快速跳转，做法是（如图）
    image.png
    具体内容的布局是对clss=jiadian进行布局的，外面楼层用一个div class=floor给他装起来
    image.png

    10.底部栏的竖直列表
    image.png
    因为五个列表格式都是一样的，所以通过dl>dt>dd的自定义列表来制作快捷又方便

    商品页制作难点
    将公共的导航栏和底部栏link过来之后把多余的部分删去就可以开始制作商品页了
    image.png
    不同的秒杀图标通过定位来实现很简单左边的短线因为只有一条，直接使用边框就可以了

    image.png
    商品样式耐心做，是可以做好的，里面的删除线通过line-through来实现image.png
    里面的进度条通过一大一小两个div来制作，方法是通过圆角来实现，红色右边没有圆角就可以通过右上和右下调整
    image.png

    其他的就没什么难度

    注册页制作难点

    注册页的话主要是针对表单的练习
    首先设置好大盒子容器的宽高并且使其margin居中
    image.png

    label的靠右对齐实现是通过给lable设置宽度之后再利用text-align=right就可以

    image.png
    image.png

    图片和文字的居中对其是通过vertical-align=middle来实现的
    image.png

    input的type类型注意：
    手机号的type类型是tel
    密码的type类型是password！！！
    image.png