Web基础之CSS实战

Web基础之CSS实战

一、前言：

好久没有更新我的博客了，最近实在太忙了；不过，再累也要坚持更新博客；最近会把没有更新的博客补上来，顺便复习和整理一下以前学的知识；

通过前面的学习，我们已经对HTML和CSS样式有了一定的了解；我们不能总是纸上谈兵，还是得真枪实弹的操练起来，尤其对我们这种特别需要动手能力的专业来说；

好吧，不说废话了；直接上项目：我们需要用我们前面学的知识完成下面的网页效果图：

不要看起来很简单，做起来就没你想的那么容易了；这里你会见识到DIV+CSS的厉害之处，可能刚学起来你会觉得好难调出这种效果；这时候你就需要有点耐心了，慢慢来；不会的地方可以去W3CSchool查一下API；

二、难点解析和注意事项：

这里需要用PS切图，把我们用到的图片切下来；首先我们的注意一下网页的整体布局；然后不要图简单，网页中有文字的地方就尽量自己把文字写上去；举个栗子，上图中微博微信下的文字，就是我们自己写上去的，而不是把整个图片截取下来放上去；这样做利于后面的维护，而且，很多网页的头部和底部基本是一样的，可以稍微修改下就能重用了；

三：项目框架图：