一、效果圖

前面對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(抽屜）