1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

2天驾驭DIV+CSS!第五课(上)

作者:用户 来源:互联网 时间:2016-06-26 15:21:37

布局代码backgroundpxcontentheight

2天驾驭DIV+CSS!第五课(上) - 摘要: 本文讲的是2天驾驭DIV+CSS!第五课(上), 一般网站都会做到点击logo,就会回到主页,应该怎么做呢,大家首先会想到,给图片加上链接就可以了 前四节的大练习大家做的怎么样?有没有难度,如果你觉着有难度

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

前四节的大练习大家做的怎么样?有没有难度,如果你觉着有难度没有关系,这节课,我带着大家做一下这个练习!
【第一步 整体布局与公共CSS定义】
我们先来分析一下这个页面
2天驾驭DIV+CSS!第五课(上)-2天驾驭div <a href=css">
页面主要分5大块,顶部的Logo、导航条Nav、Banner、Content、Footer,如下图
2天驾驭DIV+CSS!第五课(上)-一堂课学会div css
这样HTML就很容易写出来了 
<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
因为这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:0 auto;}
【第二步 布局Logo栏】
首先我们需要把页面上的logo给切割出来,其大小为173*46,名字为:logo.gif
2天驾驭DIV+CSS!第五课(上)-div css课件
一般网站都会做到点击logo,就会回到主页,应该怎么做呢,大家首先会想到,给图片加上链接就可以了,代码一般会这么写
<a href="#" id="logoLink"><img src="#" /></a>
不过KwooJan要介绍另外一种方法,将图片做成链接a的背景,同样可以达到上面说的效果,并且HTML代码就会更精简,少了<img...>,看看下面Logo栏的页面代码,红色的为将logo.gif作为背景的链接 
HTML代码:
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>
 

CSS代码
#Logo{
height:80px;/*公共代码中没有定义高度,在这里定义*/
}
#logoLink{
display:block;/*将链接a转化成块状元素,这样才能显示出背景*/
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*为了让ie6和ff显示效果一样,如果不加上这句话,后面的margin-top:20px;两个浏览器解析不一样,大家可以去掉这句话,看看两者显示效果差别*/
margin-top:20px;/*设置a的顶部外边距为20像素,这样才能和浏览器顶部有段距离,才能和图片中做的一样*/
}

好到这里,头部含有logo的区域已经写完,如果自己做不出来,源代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="CSS/css.css"/>
<title>浮动(float)页面布局(上)alixixi.com整理</title>
</head>

<body>
<div id="Logo">
 <a href="#" id="logoLink"></a>
</div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="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:0 auto;}
/*头部logo区域*/
#Logo{
 height:80px;
}
#logoLink{
 display:block;
 width:173px;
 height:46px;
 background:url(../Images/logo.gif) no-repeat;
 float:left;/*为了让ie6和ff显示效果一样,如果不加上这句话,后面的margin-top:20px;两个浏览器解析不一样,大家可以去掉这句话,看看两者显示效果差别*/
 margin-top:20px;
}
【第三步 布局导航栏Nav】
页面上的导航栏和第四节讲的几乎是一样的,并且更简单些,这里我就不再给大家一步一步做,不会做的就去看第四节,这里我就直接把代码发出来供大家学习 
HTML代码:
<div id="Nav">
<ul>
     <li><a href="#">HOME</a></li>
        <li><a href="#">PHOTOS</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">LINKS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</div>

CSS代码
#Nav{height:42px;}
#Nav ul{
height:42px;
list-style:none;
background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
display:block;/*转化成块状元素,因链接是内链元素,若想给它定义下面的属性,必须将它转化成块状元素,*/
height:42px;
color:#FFF;
padding:0 10px;
line-height:42px;
font-size:14px;
font-weight:bold;
font-family:Arial;
text-decoration:none;/*去除链接样式,默认是有下划线的,加上这句就没有任何样式,下划线也没有了*/
float:left;/*这句一定要加,不然在IE6中会出现,这种效果*/
}
#Nav ul li a:hover{background:#68acd3;}
【第四步 Banner布局】
这个就更简单了,有两种方法
第一种:将图片作为<div id="Banner"></div>背景
第二种:直接将图片插入<div id="Banner"></div>之间,代码:<div id="Banner"><img src="" /></div>
大家可以根据需求和实际情况选择用哪一种,在这里我们用第一种
HTML代码没有什么变化,只需要在CSS里面定义一下就OK了 
CSS代码:
#Banner{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}
做出来了吗?做不出跟下面的源代码比较一下吧~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="CSS/css.css"/>
<title>浮动(float)页面布局(上)alixixi.com整理</title>
</head>

<body>
<div id="Logo">
 <a href="#" id="logoLink"></a>
</div>
<div id="Nav">
 <ul>
     <li><a href="#">HOME</a></li>
        <li><a href="#">PHOTOS</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">LINKS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="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:0 auto;}
/*头部logo区域*/
#Logo{
 height:80px;
}
#logoLink{
 display:block;
 width:173px;
 height:46px;
 background:url(../Images/logo.gif) no-repeat;
 float:left;/*为了让ie6和ff显示效果一样,如果不加上这句话,后面的margin-top:20px;两个浏览器解析不一样,大家可以去掉这句话,看看两者显示效果差别*/
 margin-top:20px;
}
/*导航条*/
#Nav{height:42px;}
#Nav ul{
 height:42px;
 list-style:none;
 background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
 display:block;/*转化成块状元素,因链接是内链元素,若想给它定义下面的属性,必须将它转化成块状元素,*/
 height:42px; 
 color:#FFF;
 padding:0 10px;
 line-height:42px;
 font-size:14px;
 font-weight:bold;
 font-family:Arial;
 text-decoration:none;/*去除链接样式,默认是有下划线的,加上这句就没有任何样式,下划线也没有了*/
 float:left;
}
#Nav ul li a:hover{background:#68acd3;}

/*Banner*/
#Banner{
 height:290px;
 background:url(../Images/banner.jpg) no-repeat;
}
怎么样做到这里比较简单吧,好,接着来
【第五步 内容Content板块布局】
从图片上我们看到,内容板块分为左右两个区域,左边ContentL宽度是600px,右边ContentR宽度是300px,但是由于我们要将内边距设置成15px(这样才会好看),所以ContentL的宽度在CSS中就要设置成600-15*2=570px,而右侧的ContentR则需要设置成300-15*2=270px; 
HTML代码:
<div id="Content">
    <div id="ContentL">此处为左边ContentL</div>
    <div id="ContentR">此处为左边ContentR</div>
</div>

CSS代码:
#Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*为什么都要左侧浮动,如果不明白就去看第二节*/
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentR{width:270px; background:#d3e7f2;}
页面效果:
2天驾驭DIV+CSS!第五课(上)-div css
内容部分我们就先做到这里,最后我们再布局里面的具体元素,下面接着来布局版权模块(Footer)
【第六步 Footer布局】
这部分结构比较简单,大家只需要知道怎么布局就OK了 
HTML代码:
<div id="Footer">
    <p>CSS学习 alixixi.com整理</p>
    <p>CSS学习 alixixi.com整理</p>
</div>
CSS代码:
#Footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}
目前效果如下:
2天驾驭DIV+CSS!第五课(上)-div css<a href=教程">
本节到这里的全代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="CSS/css.css"/>
<title>CSS学习 alixixi.com整理</title>
</head>

<body>
<div id="Logo">
 <a href="#" id="logoLink"></a>
</div>
<div id="Nav">
 <ul>
     <li><a href="#">HOME</a></li>
        <li><a href="#">PHOTOS</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">LINKS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</div>
<div id="Banner"></div>
<div id="Content">
 <div id="ContentL">此处为左边ContentL</div>
    <div id="ContentR">此处为左边ContentR</div>
</div>
<div id="Footer">
    <p>CSS学习 alixixi.com整理有</p>
    <p>CSS学习 alixixi.com整理</p>
</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:0 auto;}
/*头部logo区域*/
#Logo{
 height:80px;
}
#logoLink{
 display:block;
 width:173px;
 height:46px;
 background:url(../Images/logo.gif) no-repeat;
 float:left;/*为了让ie6和ff显示效果一样,如果不加上这句话,后面的margin-top:20px;两个浏览器解析不一样,大家可以去掉这句话,看看两者显示效果差别*/
 margin-top:20px;
}
/*导航条*/
#Nav{height:42px;}
#Nav ul{
 height:42px;
 list-style:none;
 background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
 display:block;/*转化成块状元素,因链接是内链元素,若想给它定义下面的属性,必须将它转化成块状元素,*/
 height:42px; 
 color:#FFF;
 padding:0 10px;
 line-height:42px;
 font-size:14px;
 font-weight:bold;
 font-family:Arial;
 text-decoration:none;/*去除链接样式,默认是有下划线的,加上这句就没有任何样式,下划线也没有了*/
 float:left;
}
#Nav ul li a:hover{background:#68acd3;}

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

/*Content*/
#Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*为什么都要左侧浮动,如果不明白就去看第二节*/
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentR{width:270px; background:#d3e7f2;}

/*Footer*/
#Footer{
 text-align:center;
 background:#68acd3;
 padding: 10px 0;
 font-size:12px;
 font-family:Arial, Helvetica, sans-serif;
 color:#fff;
 line-height:20px;
}
本文来自www.cssxuexi.cn *尊重他人劳动成果,转载请自觉注明出处! 



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索布局 , 代码 , background , px , content height 2天驾驭div css、一堂课学会div css、div css课件、div css、div css教程,以便于您获取更多的相关知识。

css-CSS选择器的问题:.class.class{}

...式的 第三个是有id1 id2样式的 第四个是有id2 id1样式的 第五个是有id1样式的子节点有id2样式的 从演示代码可以看到,第三第四个的结果是一样的,说明.id1.id2中两个样式的顺序没有关系。也就是class="id1 id2"和class="id2 id1"对于.id...

JavaScript驾驭网页-获取网页元素_javascript技巧

推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪。只是不用收拾列羹剩肴,但也没有办法享受美味的成果。 不过,你将能完整网页内容的HTML构成要素:更重要的...

【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器兼容

...用坐标。 n  内层元素设置绝对定位。配合着定位坐标。 第五节 限时抢 第六节 margin合并的问题 n  margin,上下合并(大吃小),左右叠加 第七节 常见布局 第八节 浏览器兼容性 浏览器市场份额:http://tongji.baidu.com/data/browse...

Linux服务器上的MySQL数据库宕掉的原因

...删除一些文件,腾出可用空间 rm:是否删除普通文件"5-10第五课创业方式选择故事5专家点评.rar"。y rm:是否删除普通文件"5-1第五课创业方式选择故事1教学案例.rar"。y rm:是否删除普通文件"5-2第五课创业方式选择故事1专家点评.r...

[JQuery] JQuery第五课

说明 本文转自JQuery/jquery-animate.html">菜鸟教程。 JQuery动画 JQuery animate()方法用于创建自定义动画,其语法如下: $(selector).animate({params}, speed, callback); 必须的params参数定义形成动画的CSS属性,可选的 speed 参数规定效果的时长。它...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备