DIV+CSS学习教程之Logo链接

一般网站都会做到点击logo，就会回到主页，应该怎么做呢，大家首先会想到，给图片加上链接就可以了。相信本文介绍一定会让你有所收获。

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站设计、成都做网站、陵城网络推广、微信小程序定制开发、陵城网络营销、陵城企业策划、陵城品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供陵城建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

DIV+CSS学习教程之Logo链接

一般网站都会做到点击logo，就会回到主页，应该怎么做呢，大家首先会想到，给图片加上链接就可以了。前四节的大练习大家做的怎么样？有没有难度，如果你觉着有难度没有关系，这节课，我带着大家做一下这个练习！

【第一步整体布局与公共CSS定义】

我们先来分析一下这个页面。

页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，如下图

这样HTML就很容易写出来了
 
    •  
    •  
  •  
  •  

    • 因为这5块的宽度都是900像素，并且都是水平居中的，所以相应CSS代码如下

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

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

    首先我们需要把页面上的logo给切割出来，其大小为173*46,名字为：logo.gif

    一般网站都会做到点击logo，就会回到主页，应该怎么做呢，大家首先会想到，给图片加上链接就可以了，代码一般会这么写

     
 
 
 
        
  
  
  
    1.  
      2.

    不过KwooJan要介绍另外一种方法，将图片做成链接a的背景，同样可以达到上面说的效果，并且HTML代码就会更精简，少了，看看下面Logo栏的页面代码，红色的为将logo.gif作为背景的链接

    HTML代码：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.

     CSS代码

     
 
 
 
        
  
  
  
    1. #Logo{  
      2.   
  
  
  
    2. height:80px;  
      3.   
  
  
  
    3. }  
      4.   
  
  
  
    4. #logoLink{  
      5.   
  
  
  
    5. display:block;  
      6.   
  
  
  
    6. width:173px;  
      7.   
  
  
  
    7. height:46px;  
      8.   
  
  
  
    8. background:url(../Images/logo.gif)no-repeat;  
      9.   
  
  
  
    9. float:left;  
      10.   
  
  
  
    10. margin-top:20px;  
      11.   
  
  
  
    11. }  
      12.

     好到这里，头部含有logo的区域已经写完，如果自己做不出来，源代码如下：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6. 浮动(float)页面布局（上）alixixi.com整理 
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12.  
      13.   
  
  
  
    13.  
      14.   
  
  
  
    14.  
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16.  
      17.   
  
  
  
    17.  
      18.   
  
  
  
    18.  
      19.   
  
  
  
    19. body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}  
      20.   
  
  
  
    20. #Logo,#Nav,#Banner,#Content,#Footer{width:900px;margin:0auto;}  
      21.   
  
  
  
    21.  
      22.   
  
  
  
    22. #Logo{  
      23.   
  
  
  
    23. height:80px;  
      24.   
  
  
  
    24. }  
      25.   
  
  
  
    25. #logoLink{  
      26.   
  
  
  
    26. display:block;  
      27.   
  
  
  
    27. width:173px;  
      28.   
  
  
  
    28. height:46px;  
      29.   
  
  
  
    29. background:url(../Images/logo.gif)no-repeat;  
      30.   
  
  
  
    30. float:left;  
      31.   
  
  
  
    31. margin-top:20px;  
      32.   
  
  
  
    32. }  
      33.   
  
  
  
    33.  
      34.

    【第三步布局导航栏Nav】

    页面上的导航栏和第四节讲的几乎是一样的，并且更简单些，这里我就不再给大家一步一步做，不会做的就去看第四节，这里我就直接把代码发出来供大家学习
    HTML代码：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
      2.    
  
  
  
      • HOME
        •    
  
  
  
      • PHOTOS
        •    
  
  
  
      • ABOUT
        •    
  
  
  
      • LINKS
        •    
  
  
  
      • CONTACT
        •    
  
  
  
       
      3.   
  
  
  
    3.  
      4.

     CSS代码

     
 
 
 
        
  
  
  
    1. #Nav{height:42px;}  
      2.   
  
  
  
    2. #Navul{  
      3.   
  
  
  
    3. height:42px;  
      4.   
  
  
  
    4. list-style:none;  
      5.   
  
  
  
    5. background:#56990c;  
      6.   
  
  
  
    6. }  
      7.   
  
  
  
    7. #Navulli{height:42px;float:left;}  
      8.   
  
  
  
    8. #Navullia{  
      9.   
  
  
  
    9. display:block;  
      10.   
  
  
  
    10. height:42px;  
      11.   
  
  
  
    11. color:#FFF;  
      12.   
  
  
  
    12. padding:010px;  
      13.   
  
  
  
    13. line-height:42px;  
      14.   
  
  
  
    14. font-size:14px;  
      15.   
  
  
  
    15. font-weight:bold;  
      16.   
  
  
  
    16. font-family:Arial;  
      17.   
  
  
  
    17. text-decoration:none;  
      18.   
  
  
  
    18. float:left;  
      19.   
  
  
  
    19. }  
      20.   
  
  
  
    20. #Navullia:hover{background:#68acd3;}  
      21.

     #p#【第四步Banner布局】

    这个就更简单了，有两种方法

    第一种：将图片作为背景

    第二种：直接将图片插入之间，代码：
    大家可以根据需求和实际情况选择用哪一种，在这里我们用第一种
    HTML代码没有什么变化，只需要在CSS里面定义一下就OK了

    CSS代码：

     
 
 
 
        
  
  
  
    1. #Banner{  
      2.   
  
  
  
    2. height:290px;  
      3.   
  
  
  
    3. background:url(../Images/banner.jpg)no-repeat;  
      4.   
  
  
  
    4. }  
      5.

    做出来了吗？做不出跟下面的源代码比较一下吧~

     
 
 
 
        
  
  
  
    1.   
  
  
  
    2. xhtml1/DTD/xhtml1-transitional.dtd"> 
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. 浮动(float)页面布局（上）alixixi.com整理 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12.  
      13.   
  
  
  
    13.  
      14.   
  
  
  
      14.    
  
  
  
      • HOME
        •    
  
  
  
      • PHOTOS
        •    
  
  
  
      • ABOUT
        •    
  
  
  
      • LINKS
        •    
  
  
  
      • CONTACT
        •    
  
  
  
       
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16.  
      17.   
  
  
  
    17.  
      18.   
  
  
  
    18.  
      19.   
  
  
  
    19.  
      20.   
  
  
  
    20.  
      21.   
  
  
  
    21.  
      22.   
  
  
  
    22. body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}  
      23.   
  
  
  
    23. #Logo,#Nav,#Banner,#Content,#Footer{width:900px;margin:0auto;}  
      24.   
  
  
  
    24.  
      25.   
  
  
  
    25. #Logo{  
      26.   
  
  
  
    26. height:80px;  
      27.   
  
  
  
    27. }  
      28.   
  
  
  
    28. #logoLink{  
      29.   
  
  
  
    29. display:block;  
      30.   
  
  
  
    30. width:173px;  
      31.   
  
  
  
    31. height:46px;  
      32.   
  
  
  
    32. background:url(../Images/logo.gif)no-repeat;  
      33.   
  
  
  
    33. float:left;  
      34.   
  
  
  
    34. margin-top:20px;  
      35.   
  
  
  
    35. }  
      36.   
  
  
  
    36.  
      37.   
  
  
  
    37. #Nav{height:42px;}  
      38.   
  
  
  
    38. #Navul{  
      39.   
  
  
  
    39. height:42px;  
      40.   
  
  
  
    40. list-style:none;  
      41.   
  
  
  
    41. background:#56990c;  
      42.   
  
  
  
    42. }  
      43.   
  
  
  
    43. #Navulli{height:42px;float:left;}  
      44.   
  
  
  
    44. #Navullia{  
      45.   
  
  
  
    45. display:block;  
      46.   
  
  
  
    46. height:42px;  
      47.   
  
  
  
    47. color:#FFF;  
      48.   
  
  
  
    48. padding:010px;  
      49.   
  
  
  
    49. line-height:42px;  
      50.   
  
  
  
    50. font-size:14px;  
      51.   
  
  
  
    51. font-weight:bold;  
      52.   
  
  
  
    52. font-family:Arial;  
      53.   
  
  
  
    53. text-decoration:none;  
      54.   
  
  
  
    54. float:left;  
      55.   
  
  
  
    55. }  
      56.   
  
  
  
    56. #Navullia:hover{background:#68acd3;}  
      57.   
  
  
  
    57.  
      58.   
  
  
  
    58. #Banner{  
      59.   
  
  
  
    59. height:290px;  
      60.   
  
  
  
    60. background:url(../Images/banner.jpg)no-repeat;  
      61.   
  
  
  
    61. }  
      62.   
  
  
  
    62.  
      63.

     #p#【第五步内容Content板块布局】

    从图片上我们看到，内容板块分为左右两个区域，左边ContentL宽度是600px，右边ContentR宽度是300px，但是由于我们要将内边距设置成15px(这样才会好看)，所以ContentL的宽度在CSS中就要设置成600-15*2=570px,而右侧的ContentR则需要设置成300-15*2=270px；
    HTML代码：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2. 此处为左边ContentL 
      3.   
  
  
  
    3. 此处为左边ContentR 
      4.   
  
  
  
    4.  
      5.

    CSS代码:

     
 
 
 
        
  
  
  
    1. #Content#ContentL,#Content#ContentR{float:left;padding:15px;}  
      2.   
  
  
  
    2. #Content#ContentL{width:570px;background:#f0f0f0;}  
      3.   
  
  
  
    3. #Content#ContentR{width:270px;background:#d3e7f2;}  
      4.

    页面效果：

    内容部分我们就先做到这里，最后我们再布局里面的具体元素，下面接着来布局版权模块(Footer)

    【第六步Footer布局】

    这部分结构比较简单，大家只需要知道怎么布局就OK了
    HTML代码：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2. CSS学习alixixi.com整理
       
      3.   
  
  
  
    3. CSS学习alixixi.com整理
       
      4.   
  
  
  
    4.  
      5.

    CSS代码：

     
 
 
 
        
  
  
  
    1. #Footer{  
      2.   
  
  
  
    2. text-align:center;  
      3.   
  
  
  
    3. background:#68acd3;  
      4.   
  
  
  
    4. padding:10px0;  
      5.   
  
  
  
    5. font-size:12px;  
      6.   
  
  
  
    6. font-family:Arial,Helvetica,sans-serif;  
      7.   
  
  
  
    7. color:#fff;  
      8.   
  
  
  
    8. line-height:20px;  
      9.   
  
  
  
    9. }  
      10.

     目前效果如下：

    【编辑推荐】

    1. 新手上路 如何学习DIV+CSS制作网页
    2. Div+CSS布局入门教程之页面布局和规划
    3. 深入学习DIV+CSS之绝对定位和相对定位用法
    4. Div+CSS布局入门之写入整体层结构与CSS
    5. DIV+CSS开发过程中影响SEO的制作细节

    网站题目：DIV+CSS学习教程之Logo链接
    本文链接：http://www.mswzjz.cn/qtweb/news14/510764.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

    贝锐智能技术为您推荐以下文章

    App设计知识

    同城分类信息

    php主机　　 　成都展柜厂　　 　橡塑板　　 　香港云空间　　 　背发光字　　 　眉山主机托管　　 　邛崃做网站　　 　重庆水土双线托管　　 　成都茶叶销售　　 　混凝土搅拌车　　 　普能电气　　 　广安迈傲建站　　 　网站推广公司　　 　成都网站改版　　 　乐山主机托管　　 　四川正泰动物　　 　自贡服务器托管　　 　四川搅拌罐车　　 　犀浦雨棚定制　　 　seo优化