• 思缘论坛首页
  • 论坛搜索
  • 下载记录
  • 每日签到
  • 设计软件,PS下载
  • VIP素材区预览
  • VIP素材区下载
  • 缘分币充值
 40 1234
发新话题
打印

[CSS教程] DIV+CSS基础教程:浮动(float)页面布局

DIV+CSS基础教程:浮动(float)页面布局

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

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



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



这样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



一般网站都会做到点击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的区域已经写完,如果自己做不出来,就来下载源代码: SY_float1.rar (7.36 KB)

【第三步 布局导航栏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;}
源代码下载: SY_float2.rar (7.69 KB)

【第四步 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;
}
源代码下载: SY_float3.rar (73.79 KB)

怎么样做到这里比较简单吧,好,接着来

【第五步 内容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;}
页面效果:



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

【第六步 Footer布局】
这部分结构比较简单,大家只需要知道怎么布局就OK了

HTML代码:
引用:
<div id=Footer>
    <p>版权归CSS学习(www.cssxuexi.cn)所有</p>
    <p>CSS交流QQ群:5505810/87951377/73513641/72263578</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;
}
目前效果如下:



就这样我们页面的整体结构基本出来了,剩下的工作就是内容板块内部元素的具体布局了,我将在下节课接着讲~

本节到这里的全代码如下:
引用:
<!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>
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{
height:80px;
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;
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{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}

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

#Footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}


作者:kwoojan  出自:CSS学习论坛

图怪兽

TOP

【第七步 内容左侧板块(ContentL)布局】

我们分析一下他的结构,主要包括标题和文章内容两块,并且标题和内容之间有一条虚线,而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。
好~!既然搞清楚结构了,后面我们布局就容易了
我打算标题用<h1>标签,为什么这么用呢,原因如下

第一:<h1>标签本身字体就是加粗的这样CSS里面就不用再定义字体粗细
第二:如果标题用<h1>的话,搜索引擎会首先抓取<h1>里面的内容,然后提取关键词,这样别人在搜索引擎中输入关键词,会更容易找到你的网站哟~然后流量就唰唰滴~^_^

对于文章内容,我们就放到<p></p>中就OK了,相应的代码如下:

HTML代码:
引用:
<div id=ContentL>
        <h1>CSS学习互动社区欢迎您!</h1>
        <p>我们是一群热爱页面前端技术并热衷于推广W3C标准的热心好友,如果您想学或者正在学DIV+CSS布局页面,加入我们!您会很快驯服并驾驭这匹烈马!虽然我们的论坛正在起步,但是这里的每个人都很热爱页面前端技术并热衷于推广W3C标准在中国的运用,只要你有问题就可以问,一定会有人帮你解答!我们可能不是高手,但是我们都是很乐于帮助,乐于钻研。我们都很热心!</p>
</div>
CSS代码:
引用:
#Content #ContentL h1{
height:40px;
line-height:40px;/*设置行距,目的是保证h1中的文字垂直居中*/
font-size:16px;
color:#054d73;
border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/
margin-bottom:10px;/*设置外边距,让h1和下面的内容区域p保持10像素的距离*/
}
#Content #ContentL p{
font-size:12px;
line-height:20px;
text-indent:2em;/*这句话的目的就是为了让文章第一行缩进两个汉字,记住这句话就OK了*/
}
效果如下:



源代码: SY_float5.rar (74.55 KB)

到这里我们第一篇文章已经布局完毕,下面布局一下第二篇文章,估计大家早就注意到了,两篇文章唯一区别就是第二篇文章的内容的左侧有一张图片,哈哈,这就好办了,把第一篇文章的代码复制过来,替换标题和文章内容,然后再文章内容里面插入一张图片就OK了,代码如下:

HTML代码:
引用:
<h1>跟KwooJan学习DIV+CSS只需2天</h1>
<p>
        <img src=Images/1.gif />群上很多朋友在刚接触DIV+CSS的时候,很迷茫,不知道从何学起,看网上的教程吧,理论性的东西太多,越看越糊涂,再说时间上也不允许,也没有那个耐心,其实KwooJan也不喜欢看这种视频教程,很枯燥,很乏味,即使耐着性子看完收获也不大,实用性不大,群上的一些朋友告诉我,他们学习DIV+CSS没有思路,不知道怎么去学,如何去学,希望KwooJan能带着他们一步一步走,从今天开始我将写个教程,打算以例子为主,帮主大家更轻松的驾驭DIV+CSS。好了,在这里我必须要给大家纠正一个错误,我们平时说的DIV+CSS其实是一种错误的说法,是中国人自己发明的,并不准确,不能够将所谓的页面布局思想说的很确切,其实应该说XHTML+CSS才对。
</p>
但是如果我们预览效果的话,确是这样子的



不但图片没有靠左边,而且文字的上方还有一大片空白,应该怎么做呢?很容易,只要我们给图片左侧浮动(float:left;)就可以了,CSS代码如下:
引用:
#Content #ContentL p img{
float:left;
}
效果如下,很接近了吧,只不过图片的左侧和文字靠的太接近了



不但图片没有靠左边,而且文字的上方还有一大片空白,应该怎么做呢?很容易,只要我们给图片左侧浮动(float:left;)就可以了,CSS代码如下:
引用:
#Content #ContentL p img{
float:left;
}
效果如下,很接近了吧,只不过图片的左侧和文字靠的太接近了



这个很好解决,设置图片的右外边距(margin-right)嘛~,CSS代码如下:
引用:
#Content #ContentL p img{
float:left;
margin-right:10px;
}
这下效果一样了吧~!~!~!
OK!到这里ContentL板块布局搞定!

【第八步 内容右侧板块(ContentR)布局】
有了ContentL板块布局的经验,右侧就会很容易,标题加入我们!当然还是用<h1>标签喽,好~!开工!
标题区域代码如下

HTML代码:
引用:
<h1>加入我们!</h1>
CSS代码:
复制内容到剪贴板
代码:
#Content #ContentR h1{
height:40px;
line-height:40px;/*设置行距,目的是保证h1中的文字垂直居中*/
font-size:16px;
color:#900;
border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/
margin-bottom:10px;/*设置外边距,让h1和下面的内容区域p保持10像素的距离*/
}
而内容的第一句CSS学习互动社区QQ群:的代码如下

HTML代码:
引用:
<strong>CSS学习互动社区QQ群:</strong>
CSS代码:
复制内容到剪贴板
代码:
#Content #ContentR strong{
display:block;/*只有把strong标签,转化成块状元素,margin-bottom:5px;才会起作用,才能使<strong>与下面的元素维持一定距离*/
font-size:12px;
color:#333;
margin-bottom:5px;
}
好~!第一行搞定!
下面的两行红色的QQ群信息怎么做?其实这个有很多办法
复制内容到剪贴板
代码:
方法一:ul、li或者dl、dt、dd来布局
方法二:表格(Table)来布局
方法三:用单纯的标签来布局比如<p>、<span>、<div>等标签
其实在这里,我最推荐第二种方法,可能大家看到这里挺想不透的,或者觉着用Table很丢人,好似没有什么技术含量似的,其实这时候如果你不用Table,反而认为你的技术含量低,自己给自己找麻烦,为什么这么说呢
首先你必须知道DIV和Table的诞生目的不一样,DIV的诞生就是用来布局页面,而Table的诞生就是为了放数据,大家看KwooJan所有写的代码,只有布局页面大板块的时候才用,还记得上节课一开始布局页面板块的时候代码么
引用:
<div id=Logo></div>
<div id=Nav></div>
<div id=Banner></div>
<div id=Content></div>
<div id=Footer></div>
整个页面就这5个DIV,其他地方一般不用,因为DIV的使命就是布局页面!

大家经常会进入一个误区,会认为在Web2.0时代,只要页面中用了Table就是没有技术含量,就是丢人,要是页面中没有一个table,所有元素全部用DIV做,那就是牛人!大家注意了,要是某人对你说,我的整个网站没有应用一个Table,这时候你就可以认为这个人做页面没有什么技术含量,并且CSS代码相当庞杂,根本不能算是一个高手,顶多是一个DIV的狂热分子,做的页面也能说是标准,很多用Table就可以简简单单实现的效果,非要用DIV去实现,不仅使CSS文件相当的臃肿,而且使页面加载速度变慢。
所以在这里KwooJan提醒大家,一定一定要走出这个误区!

好了说了这么多,这块的代码如下:

HTML代码:
复制内容到剪贴板
代码:
<table width=100% border=0 cellpadding=0 cellspacing=0>
        <tr>
            <td width=36% height=20>1群:5505810</td>
            <td width=64%>2群:87951377</td>
        </tr>
        <tr>
            <td height=20>3群:73513641</td>
            <td>4群:72263578</td>
        </tr>
</table>
CSS代码:
复制内容到剪贴板
代码:
#Content #ContentR table{
font-size:12px;
color:#900;
}
最后一句话就更简单了,代码如下

HTML代码:
引用:
<span>希望有强烈进取精神和互助精神的朋友请加入!一块探讨一块交流一块学习!</span>
CSS代码:
复制内容到剪贴板
代码:
#Content #ContentR span{
font-size:12px;
}
至此我们每个版块均以布局完毕,但是却有两点瑕疵:
1)IE6和FF中有一点却显示的却不一样,底部版权在FF中却跑到了的右侧ContentR的下面,如图:



产生原因:是因为id为Content的div,没有自动适应里面ContentL的高度
解决方法:最简便的方法是设置Content的CSS属性overflow:hidden;
怎么样问题解决了吧~
2)因为ContentR的高度没有ContentL的高度高,所以在ContentR的下面留有一块空白,如图:



解决方法:只需要把Content的背景颜色设置成和ContentR背景颜色一样就OK了
这个问题也解决了吧~
最终效果



至此,整个页面算是布局完成了,感觉怎么样?有不懂的就回复帖子告诉我,顺便说一下:最终代码其实还可以进行精简,这个算是给大家一个思考题了

本节课最终代码:
复制内容到剪贴板
代码:
<!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>无标题文档</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>
  <h1>CSS学习互动社区欢迎您!</h1>
        <p>我们是一群热爱页面前端技术并热衷于推广W3C标准的热心好友,如果您想学或者正在学DIV+CSS布局页面,加入我们!您会很快驯服并驾驭这匹烈马!虽然我们的论坛正在起步,但是这里的每个人都很热爱页面前端技术并热衷于推广W3C标准在中国的运用,只要你有问题就可以问,一定会有人帮你解答!我们可能不是高手,但是我们都是很乐于帮助,乐于钻研。我们都很热心!</p>
        <h1>跟KwooJan学习DIV+CSS只需2天</h1>
        <p><img src=Images/1.gif />群上很多朋友在刚接触DIV+CSS的时候,很迷茫,不知道从何学起,看网上的教程吧,理论性的东西太多,越看越糊涂,再说时间上也不允许,也没有那个耐心,其实KwooJan也不喜欢看这种视频教程,很枯燥,很乏味,即使耐着性子看完收获也不大,实用性不大,群上的一些朋友告诉我,他们学习DIV+CSS没有思路,不知道怎么去学,如何去学,希望KwooJan能带着他们一步一步走,从今天开始我将写个教程,打算以例子为主,帮主大家更轻松的驾驭DIV+CSS。好了,在这里我必须要给大家纠正一个错误,我们平时说的DIV+CSS其实是一种错误的说法,是中国人自己发明的,并不准确,不能够将所谓的页面布局思想说的很确切,其实应该说XHTML+CSS才对。</p>
    </div>
    <div id=ContentR>
      <h1>加入我们!</h1>
        <strong>CSS学习互动社区QQ群:</strong>
        <table width=100% border=0 cellpadding=0 cellspacing=0>
        <tr>
            <td width=36% height=20>1群:5505810</td>
            <td width=64%>2群:87951377</td>
        </tr>
        <tr>
            <td height=20>3群:73513641</td>
            <td>4群:72263578</td>
        </tr>
        </table>
        <span>希望有强烈进取精神和互助精神的朋友请加入!一块探讨一块交流一块学习!</span>

  </div>
</div>
<div id=Footer>
    <p>css学习 alixixi.com 整理</p>
    <p>css学习 alixixi.com 整理</p>
</div>
</body>
</html>
CSS代码:
复制内容到剪贴板
代码:
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl,strong{margin:0;padding:0;}
#Logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}

#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;}
#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{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}

#Content{overflow:hidden; background:#d3e7f2;}
#Content #ContentL,#Content #ContentR{float:left; padding:15px;}
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentL h1{
height:40px;
line-height:40px;
font-size:16px;
color:#054d73;
border-bottom:1px #969696 dashed;
margin-bottom:10px;
}
#Content #ContentL p{
font-size:12px;
line-height:20px;
text-indent:2em;
}
#Content #ContentL p img{
float:left;
margin-right:10px;
}
#Content #ContentR{width:270px; background:#d3e7f2;}
#Content #ContentR h1{
height:40px;
line-height:40px;
font-size:16px;
color:#900;
border-bottom:1px #969696 dashed;
margin-bottom:10px;
}
#Content #ContentR strong{
display:block;
font-size:12px;
color:#333;
margin-bottom:5px;
}
#Content #ContentR table{
font-size:12px;
color:#900;
}
#Content #ContentR span{
font-size:12px;
}

#Footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}

TOP

非常好,学习。

TOP

认真学习下,估计两天还真能学的差不多。。。。不错不错。。。很好,楼主辛苦了

TOP

太好了........... abc::01 abc::01

TOP

太好了,我正缺少这个,虽然学了CSS很久了,但是一直没有学透,到了实际写代码的时候,才发现乱了套。、
而现在这个时代,还不得不考虑兼容的问题。

我想我学三天就能把我以前的难题都解决了。

TOP

非常感谢楼主的无私分享,对于我们这种想学习网站布局,还不知道从哪儿下手的新人 ,是一个很好的学习、实践的小练习,对于以后的页面布局分析很有引导作用。

大学没毕业,已经在工作

TOP

希望楼主多发这样的优秀文章。

大学没毕业,已经在工作

TOP

努力学习。。。

TOP

楼主万岁!!!

TOP

 40 1234
发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz Copyright © 2005-2019 www.MissYuan.com All rights reserved.