本篇教程介绍了HTML+CSS入门 CSS前端抽屉布局讲解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

一、效果图

以下我对抽屉主页进行模拟布局。

官方网站效果图：



 

模拟网站图：



 
二、实现步骤
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、其他（回到最顶部）    

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！