大主宰,灵域

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

DIV+CSS學(xué)習(xí)教程之Logo鏈接

一般網(wǎng)站都會做到點擊logo，就會回到主頁，應(yīng)該怎么做呢，大家首先會想到，給圖片加上鏈接就可以了。相信本文介紹一定會讓你有所收獲。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計、成都做網(wǎng)站、陵城網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、陵城網(wǎng)絡(luò)營銷、陵城企業(yè)策劃、陵城品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供陵城建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

DIV+CSS學(xué)習(xí)教程之Logo鏈接

一般網(wǎng)站都會做到點擊logo，就會回到主頁，應(yīng)該怎么做呢，大家首先會想到，給圖片加上鏈接就可以了。前四節(jié)的大練習(xí)大家做的怎么樣？有沒有難度，如果你覺著有難度沒有關(guān)系，這節(jié)課，我?guī)е蠹易鲆幌逻@個練習(xí)！

【第一步整體布局與公共CSS定義】

我們先來分析一下這個頁面。

頁面主要分5大塊，頂部的Logo、導(dǎo)航條Nav、Banner、Content、Footer，如下圖

這樣HTML就很容易寫出來了

因為這5塊的寬度都是900像素，并且都是水平居中的，所以相應(yīng)CSS代碼如下

 
 
 
   
  
  
  body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}    
  
  
     
  
  
  #logo,#Nav,#Banner,#Content,#Footer{width:900px;margin:0auto;}

#p#
【第二步布局Logo欄】

首先我們需要把頁面上的logo給切割出來，其大小為173*46,名字為：logo.gif

一般網(wǎng)站都會做到點擊logo，就會回到主頁，應(yīng)該怎么做呢，大家首先會想到，給圖片加上鏈接就可以了，代碼一般會這么寫

不過KwooJan要介紹另外一種方法，將圖片做成鏈接a的背景，同樣可以達到上面說的效果，并且HTML代碼就會更精簡，少了，看看下面Logo欄的頁面代碼，紅色的為將logo.gif作為背景的鏈接

HTML代碼：

CSS代碼

 
 
 
   
  
  
  #Logo{    
  
  
  height:80px;    
  
  
  }    
  
  
  #logoLink{    
  
  
  display:block;    
  
  
  width:173px;    
  
  
  height:46px;    
  
  
  background:url(../Images/logo.gif)no-repeat;    
  
  
  float:left;    
  
  
  margin-top:20px;    
  
  
  }

好到這里，頭部含有l(wèi)ogo的區(qū)域已經(jīng)寫完，如果自己做不出來，源代碼如下：

 
 
 
   
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
  浮動(float)頁面布局（上）alixixi.com整理

新聞中心

其他資訊