DIV+CSS学习教程之Logo链接-div+css教程

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

DIV+CSS学习教程之Logo链接

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

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

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

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

这样HTML就很容易写出来了

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

因为这5块的宽度都是900像素，并且都是水平居中的，所以相应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;}  
1.
2.
3.

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

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

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

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

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

HTML代码：

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

CSS代码

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

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

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

【第三步布局导航栏Nav】

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

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

CSS代码

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

#p#【第四步Banner布局】

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

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

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

CSS代码：

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

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

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

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

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

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

CSS代码:

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

页面效果：

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

【第六步Footer布局】

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

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

CSS代码：

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

目前效果如下：

【编辑推荐】