一、效果图
前面对CSS基础知识有了一定的了解，是时候开始实战了！以下我对抽屉（https://dig.chouti.com/）主页进行模拟布局。
官方网站效果图：
模拟网站图：
二、实现步骤
1、整体布局（header、body、footer）
抽屉的首页主要分为三块：头部、网页内容、底部内容。
2、header实现
header由logo、内容菜单、登录菜单、搜索框四部分组成。
代码架构为：
body{margin:0px;background-color:#ededed;}ul{list-style:none;margin:0px;}ul li{float:left; }div.pg-header {font-size: 14px;height:44px;background-color:#2459a2;top: 0;left: 0;z-index: 1000;width: 100%;position: fixed;}.w {width:960px;margin:0 auto;}a { text-decoration:none;}.pg-header .logo{float:left;margin-top:10px;}.pg-header .menu {float:left;line-height:44px;}.pg-header .search {float:right;margin-top:-5px;}.pg-header .account {float:right;margin-top:10px;}.pg-header .account ul li a{color:white;padding:0 20px;text-decoration:none;}.pg-header .account{margin:0;}.pg-header .menu ul li a{color:white;padding:0 20px;text-decoration:none;}.pg-header .menu {line-height:44px;}.pg-header .menu ul li:hover{background-color:rgba(255,255,255,0.1);}.pg-header .account {line-height:44px;}.pg-header .account ul li:hover{background-color:rgba(255,255,255,0.1);}
3、body实现
4、footer实现
5、其他（回到最顶部）
CSS快速入门-前端布局1(抽屉）
原文地址：https://www.cnblogs.com/skyflask/p/8987996.html