仿豆瓣网（电脑版网页）HTML+CSS实现

步骤一：将豆瓣电脑版网页以图片形式保存下来：

利用了chrome里面的插件：

 

步骤二：将图片放置到PS中，研究布局：

我将其分为header部分，banner部分，section部分，footer部分；其中相应的比如header部分又要分为header_up部分和header_down部分，header_down部分又得左右划分为左，中，右部分等。

 

步骤三：确定页面宽度，每部分高度，以及主体内容区域高度，宽度(测量时PS中有辅助线，以及测量工具，比较简单！)。

一般页面部分设置position:relative;主体内容部分设置:position:absolute进行定位。

 

步骤四：代码编写&测试（HTML+CSS总共2000多行代码）

完整代码查看

　　全部是HTML+CSS代码完成了静态页面的制作！利用的技术有：CSS spirit（图片精灵），position，display等特性。

转载于:https://www.cnblogs.com/why-not-try/p/7852206.html