CSS快速入門-前端布局1(抽屜）

一、效果圖

前面對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實現代碼如下：

<script>
    function Top(){
        $(window).scrollTop(0);
    }
</script>