一、效果圖

前面對CSS基礎知識有了一定的了解，是時候開始實戰了！以下我對抽屜(https://dig.chouti.com/)主頁進行模擬布局。

官方網站效果圖：

模擬網站圖：

二、實現步驟

1、整體布局(header、body、footer)

抽屜的首頁主要分為三塊：頭部、網頁內容、底部內容。

2、header實現

header由logo、內容菜單、登錄菜單、搜索框四部分組成。

代碼架構為：

CSS代碼：

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實現

body分為左邊內容和右邊內容，通過float：right和float：left來實現。

代碼架構為：

CSS代碼為：

.pg-body .content-left {

float:left;

width:630px;

background-color:white;

font-size: 14px;

min-height:1000px;

}

.pg-body .content-right {

float:right;

background-color:white;

width:320px;

height:auto;

font-size: 14px;

margin-top:40px;

position:relative;

}

4、footer實現

footer分為友情鏈接和備案信息兩部分，代碼結構如下：

CSS代碼為：

.pg-footer {

clear:both;

background-color:white;

width:960px;

margin:0 auto;

font-size: 12px;

text-align:center;

padding-top: 30px;

}

.pg-footer .footer-list a {

color: #369;

margin-left: 10px;

margin-right: 10px;

text-decoration:none;

}

.pg-footer .footer-list a:hover{

text-decoration: underline;

}

.pg-footer .footer-list span {

color: #5681ab;

display: inline-block;

height: 12px;

overflow: hidden;

}

.pg-footer .footer-list {

text-align:center;

padding-left:150px;

}

5、其他(回到最頂部)

大部分網站都有回到頂部這一功能，而且我個人認為這是一個用戶體驗很好的小功能，尤其是對非常長的頁面而言。實現起來其實非常簡單，就是一個div，設定一個onclick動作。

CSS實現代碼如下：

.pg-top{

height:40px;

width:50px;

background-color:#aaa;

background:url("top.png") 0 0 no-repeat;

right:10px;

bottom:10px;

float:right;

position:fixed;

line-height:50px;

text-align:center;

}

JS實現代碼如下：

function Top(){

$(window).scrollTop(0);

}

總結

以上是生活随笔為你收集整理的css html 抽屉,CSS快速入门-前端布局1(抽屉）(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。