html抽屉效果,HTML+CSS入门 CSS前端抽屉布局讲解

本篇教程介绍了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知识！