CSS快速入门-前端布局1(抽屉）

一、效果图

前面对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、其他（回到最顶部）

原文地址：https://www.cnblogs.com/skyflask/p/8987996.html