DIV+CSS学习教程之Logo链接

开发 前端
本文向大家介绍一下DIV+CSS学习教程之Logo链接,一般网站都会做到点击logo,就会回到主页,应该怎样做呢,这里和大家分享一下。

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

DIV+CSS学习教程之Logo链接

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

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

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

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

 

这样HTML就很容易写出来了
 

  1. <dividdivid="Logo"></div> 
  2. <dividdivid="Nav"></div> 
  3. <dividdivid="Banner"></div> 
  4. <dividdivid="Content"></div> 
  5. <dividdivid="Footer"></div> 


因为这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.  
  3. #logo,#Nav,#Banner,#Content,#Footer{width:900px;margin:0auto;}  

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

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

 

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

  1. <ahrefahref="#"id="logoLink"><imgsrcimgsrc="#"/></a> 


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

HTML代码:
 

  1. <dividdivid="Logo"> 
  2. <ahrefahref="#"id="logoLink"></a> 
  3. </div> 

 CSS代码
 

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

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

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
  5. <linkrellinkrel="stylesheet"type="text/css"href="CSS/css.css"/> 
  6. <title>浮动(float)页面布局(上)alixixi.com整理</title> 
  7. </head> 
  8. <body> 
  9. <dividdivid="Logo"> 
  10. <ahrefahref="#"id="logoLink"></a> 
  11. </div> 
  12. <dividdivid="Nav"></div> 
  13. <dividdivid="Banner"></div> 
  14. <dividdivid="Content"></div> 
  15. <dividdivid="Footer"></div> 
  16. </body> 
  17. </html> 
  18.  
  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. #Logo,#Nav,#Banner,#Content,#Footer{width:900px;margin:0auto;}  
  21.  
  22. #Logo{  
  23. height:80px;  
  24. }  
  25. #logoLink{  
  26. display:block;  
  27. width:173px;  
  28. height:46px;  
  29. background:url(../Images/logo.gif)no-repeat;  
  30. float:left;  
  31. margin-top:20px;  
  32. }  
  33.  

【第三步布局导航栏Nav】

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

  1. <dividdivid="Nav"> 
  2. <ul> 
  3. <li><ahrefahref="#">HOME</a></li> 
  4. <li><ahrefahref="#">PHOTOS</a></li> 
  5. <li><ahrefahref="#">ABOUT</a></li> 
  6. <li><ahrefahref="#">LINKS</a></li> 
  7. <li><ahrefahref="#">CONTACT</a></li> 
  8. </ul> 
  9. </div> 

 CSS代码
 

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

 #p#【第四步Banner布局】

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

第一种:将图片作为<divid="Banner"></div>背景

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

CSS代码:
 

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

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

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

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

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

  1. <dividdivid="Content"> 
  2. <dividdivid="ContentL">此处为左边ContentL</div> 
  3. <dividdivid="ContentR">此处为左边ContentR</div> 
  4. </div> 

CSS代码:
 

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

页面效果:

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

【第六步Footer布局】

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

  1. <dividdivid="Footer"> 
  2. <p>CSS学习alixixi.com整理</p> 
  3. <p>CSS学习alixixi.com整理</p> 
  4. </div> 

CSS代码:
 

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

 目前效果如下: 

【编辑推荐】

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

 

责任编辑:佚名 来源: cssxuexi.cn
相关推荐

2010-08-16 09:56:05

DivCSS

2010-08-16 15:19:35

DIV+CSS教程

2010-08-16 10:10:11

DIV+CSS

2010-08-16 09:32:01

DivCSS

2010-08-16 16:17:21

2010-08-17 13:28:31

DIVCSS

2010-08-25 09:11:57

DIVCSS

2012-08-06 09:40:36

DIV

2010-08-24 11:25:06

DIVCSS

2011-05-17 09:51:27

Div+CSS

2010-08-27 14:05:40

DIV+CSS

2010-08-24 10:32:34

DIV+CSS

2010-08-25 12:47:40

DIVCSS

2010-08-30 13:09:40

DIVCSS

2010-09-14 11:19:23

DIV+CSS技术

2010-08-30 10:46:13

DIV+CSS

2010-08-16 09:19:04

DIVCSS

2011-05-26 18:05:01

DIV+CSS

2010-09-14 12:58:41

DIV+CSS圆角

2011-07-05 16:26:48

DIV+CSS
点赞
收藏

51CTO技术栈公众号