学成在线小项目

学成在线项目，首先拿到设计图分析该怎样完成设计。
搭建文件夹，分离html和css代码，方便后期检查，
新建css，html然后用link把css链接导入进去。
设置公共样式，base.scc。把所有的公共样式添加进去例如*{margin：0；padding0；}等
设置版心，然后在开始做页面
首先是做头部logo，搜索框，导航，头像。
logo用h1来完成，记得先用个版心居中，然后再添加内容。内容可以分三部分
左边logo，中间ul加li  右边搜索框跟头像名字。用浮动可以把他们平行贴在后面
再用外边距把位置弹开，
然后到了下面一点的轮播图，附近这部分，也是用一个版心包裹着。中间可以划分为三个部分，左边的推荐栏，中间的轮播图，右边的课程表
而中间的图片是被两边的压着的，所以有层级的关系，中间图片可以用浮动，左右两边用绝对定位，而版心给一个相对定位，组成cp子绝父相。
左边的推荐栏可以用ul li来完成，鼠标经过变色可以再用hover，其他的就是行高和边距来调节。
做完后到中间的图片，中间图片又有左边和右边的两个点击按钮，往左换图片，往右换图片，还有下面五个小点，他们都是用变圆加个背景色实现的，左右两边可以用span，而下面的用ul+li+a实现。
用绝对定位，来给他放在两边还有中间的小点放到下面。
然后到右边的课程表，我是用dl 加dt和dd实现的，也可以用盒子来完成，设置背景颜色，垂直居中text-align-center；还有水平居中，然后用绝对定位把他放在右边。
层级关系上是左右两个绝对定位会比中间的浮动层级高，所以会压着。
左边的推荐栏用bgc+rgba  里面的透明色来完成它里面右透明的效果
然后到了下面一点的精品推荐一块，这里用ul+li来完成，li里面的右边的竖线可以用变框来实现，或者直接用斜杠也可以。
现在到了下面的图片这些，图片右边的hot是用绝对定位来实现的。让他right：-5px  来实现
下面文字可以用p作者h5都可以，记得要修改字体大小，来测试
而这些内容全部都是再版心里面的。所以记得都要给一个版心。
最下面这里内容可以划分为左边和右边。
左边是用图片+p标签+按钮实现的，设置好框高就能区分好了，
右边的话是一个div有浮动，然后里面可以用三个ul+li然后设置好宽度，就可以了。