艺灵设计

全部文章
×

轻松学会div+css10练习css浮动布局

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2016-06-01 23:51:07 - 阅: - 评:0 - 积分:0

摘要:
  这是艺灵带你轻松学会div+css的第十节课:练习css浮动布局。这节主要带着同学们做两个关于浮动的案例,同时会引入新知识点ul及如何去除ul自带的小黑圆点样式......

第十节:练习css浮动布局

在上一节的课程轻松学会div+css09css浮动和清除浮动中,我们主讲了:css浮动知识及什么场合下需要浮动,并对浮动的副产物给出4种可选方案。而这节课,是对我们前两节课的一个总结,反正就是以实例练习为主!如果只理论,不动手,说再多,看再多仍不会!

在第八节的课程中,我们简单的给一个页面划分出:头部、主体、页尾这三部分。今天我们的第一个小案例是在这个的基础上对主体部分进行多栏划分。同学们准备好了吗?准备好了咱们就开始码代码,一起愉快的玩耍吧!

1、复原第八节课的demo案例

1.1、完整源码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>08分析网页布局结构--艺灵设计</title>
  6. <meta name="Keywords" content="div+css教程,div+css布局,html视频教程,网页布局,公开课,页面重构" />
  7. <meta name="author" content="www.yilingsj.com">
  8. <!--嵌入式样式表-->
  9. <style type="text/css">
  10. /*页面简单重构*/
  11. *{
  12.  margin:0;/*外补丁=0像素*/
  13.  padding:0;/*内补丁=0像素*/
  14. }
  15. /*添加边框属性,便于前台页面看效果*/
  16. div{
  17.  border:1px solid #f00;/*边框=宽1像素,实线,红色*/
  18. }
  19. /*头部*/
  20. .header{
  21.  height:70px;/*高度=70像素*/
  22. }
  23. /*主体*/
  24. .content{
  25.  height:500px;/*高度=500像素*/
  26.  width:1190px;/*宽度=1190像素*/
  27.  margin:10px auto;/*外补丁,上下10像素,左右自动(即居中)*/
  28. }
  29. /*尾部*/
  30. .footer{
  31.  height:70px;/*高度=70像素*/
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <!--html部分-->
  37. <div class="header">头部</div>
  38. <div class="content">主体</div>
  39. <div class="footer">尾部</div>
  40. </body>
  41. </html>

1.2、需求一:将主体部分修改成两列布局

需求配图:三栏两列布局从图中可以看出,我们得向上一节课那样添加两个子div,并且需要设置浮动,别忘记清除浮动哦~

1.2.1、先添加清除浮动样式

  1. /*伪对象法清除浮动*/
  2. .clearfix{*zoom:1;/*兼容ie6~ie7*/}
  3. .clearfix:after{content:"";clear:both;display:table;height:0;font-size:0;overflow:hidden}

接下来是调用及修改html代码了。

1.2.2、修改html

  1. <!--html部分-->
  2. <div class="header">头部</div>
  3. <!--在主体部分添加两个div,相当于两列布局-->
  4. <div class="content clearfix">
  5.  <div class="content-left">左半部分</div>
  6.  <div class="content-right">右半部分</div>
  7. </div>
  8. <div class="footer">尾部</div>

此时的效果配图: 显示,与我们的需求还差很多,怎么办呢?继续添加代码,比如:调整宽度、高度、设置外补丁等。

1.2.3、添加浮动让其在同一行显示

  1. /*主体子内容*/
  2. .content-left,.content-right{
  3.  float:left;/*浮动=左浮动*/
  4. }

此时,已经可以在同一行显示了,配图: 接下来调整宽、高度。这个需要用到数学知识了,检验同学们数学老师是否挂的早的时刻到了!

常识问题:如果一个元素设置了边框属性,那么在计算元素宽度或高度时,需要减去2倍边框宽度才是元素实际的宽度或高度。

可能会有很多同学疑惑为什么是2倍宽度或为什么要减去边框,还是容艺灵配图一张吧,同学们慢慢领悟下。配图:元素宽高度计算公式后面提到的2倍外补丁、3倍外补丁都可按照此图进行辅助理解。

所以,我们此时就知道了.content-left的宽度值为:190-2*1=188像素了。.content-right的宽度值为:总宽度 - 左半边的宽度(算边框) - 3倍的外补丁

1.2.4、添加宽度、高度

  1. /*主体子内容*/
  2. .content-left,.content-right{
  3.  height:478px;/*高度=500-2*(10+1),即:高度=478像素*/
  4. }
  5. /*主体左半边*/
  6. .content-left{
  7.  width:188px;/*宽度=190-2*1,即:宽度=188像素*/
  8. }
  9. /*主体右半边*/
  10. .content-right{
  11.  width:968px;/*宽度=1190-190-2*1-3*10,即:宽度=968像素*/
  12. }

此时我们再刷新页面后可以看到基本完工了,配图: 接下来是最后一道工艺了-- 外补丁

1.2.5、添加外补丁

  1. /*主体子内容*/
  2. .content-left,.content-right{
  3.  margin:10px;/*外补丁=10像素(上右下左均为10)*/
  4. /*主体左半边*/
  5. .content-left{
  6.  _display:inline;/*转换成内联对象,避免ie6中出现双倍边距*/
  7. }
  8. /*主体右半边*/
  9. .content-right{
  10.  margin-left:0;/*左外补丁=0,因为.content-left已经设置了右间距了并且值为10*/
  11. }

好,大功告成!配图一张: 

小窗演示:如果想看全屏效果,点此进入demo全屏界面

怎么样,有没有一种成就感?历经艰辛,终于看到了效果。对于实现同一种效果来说,方法可以有很多种!如果同学们想练下手,可以思考下如实用浮动继续实现这个布局。这里就不再讲了,我们再做一个小案例。

1.3、需求二:实现淘宝右侧的12宫格布局

配图一张:淘宝首页右侧12宫格布局此图是剁手党常爱逛的淘宝首页右侧版块的一部分。练习这个布局主要是继续加强同学们对浮动知识的了解及应用,原来这个布局是这样做的。

思路分析:对于此类布局,通常使用ul>li来进行布局,当然也可以使用div等等。而我们接下来会用ul>li来实现这个布局,主要原因是想带着同学们了解下ul及如何去除ul默认样式的小圆点

进一步思路分析:由于是12个宫格,我们可以写12li!注意是12个li而不是12个ul。我们只需要打好外框架,剩下填写内容即可。

1.3.1、html代码

  1. <!--ul实现12宫格-->
  2. <ul>
  3.  <li>1</li>
  4.  <li>2</li>
  5.  <li>3</li>
  6.  <li>4</li>
  7.  <li>5</li>
  8.  <li>6</li>
  9.  <li>7</li>
  10.  <li>8</li>
  11.  <li>9</li>
  12.  <li>10</li>
  13.  <li>11</li>
  14.  <li>12</li>
  15. </ul>

来张配图吧: 是不是惊呆了???怎么多出这么多小黑点?我明明没有写这个点呀!!!

莫急,莫慌!这个小黑点是该元素自带的默认样式。还记得我们一开始为什么要清除元素的外间距吗?与这个是同理的,就是因为很多时候我们并不需要这个小圆点。今天这个案例就是不需要小圆点的,所以我们要去掉。

1.3.2、去掉元素自带的小圆点样式

  1. /*去掉自带的小圆点样式*/
  2. ul{
  3.  list-style:none;/*去掉小圆点*/
  4. }

配图: 虽然现在没有小圆点了,但没有像淘宝那样横向展示,怎么办呢?--- 浮动

1.3.3、浮动让其横向展示

  1. /*浮动让其横向展示*/
  2. li{
  3.  float:left;/*浮动=向左浮动*/
  4. }

此时再刷新页面可以看到这样的效果,配图: 这12个数字全横向展示了,但距离挨的也太近了点吧!怎么办呢?-- 设置宽高呀!

1.3.4、添加宽高属性

  1. /*添加宽高属性*/
  2. li{
  3.  width:50px;/*宽度=50像素*/
  4.  height:50px;/*高度=50像素*/
  5. }

效果配图: 此时不那么挤了,但还是看不到更明显的效果,怎么办呢?-- 加边框

1.3.5、添加边框属性

  1. /*添加边框属性*/
  2. li{
  3.  border: 1px solid #f00;/*边框=宽1像素,实线,红色*/
  4. }

此时再刷新即可直观看到效果了,配图: 虽然越来越有感觉了,但淘宝是一行展示4个,而我们的一行展示完了,怎么办呢?-- ul限宽度

1.3.6、限宽控制

  1. /*添加宽度属性*/
  2. ul{
  3.  width:205px;/*宽度=4个li的宽度+5个单边框,即:4*(50+1)+1像素*/
  4. }

效果配图: 越来越有感觉了,但出现了重边呀!怎么办呢?-- 负外补丁解决。这是首次将外补丁的值设置成负的案例。

1.3.7、负值去重边

  1. /*负值去重边*/
  2. li{
  3.  margin:0 -1px -1px 0;/*外补丁=上0,右-1,下-1,左0*/
  4. }

效果图: 搞定了吧。剩下里面图片的此处就省略了,我们只要写出大的框架,然后向框架中添加内容即可。

小窗演示:如果想看全屏效果,点此进入demo全屏界面

好了,本节课到此结束。

2、录制视频

标题:艺灵带你轻松学会div+css10练习css浮动布局

视频备用地址:
淘宝:http://cloud.video.taobao.com/play/u/759415648/e/1/t/1/p/1/39036351.swf
优酷:http://player.youku.com/player.php/sid/XMTU3OTg2MTU4NA==/v.swf
土豆:http://www.tudou.com/v/acJjLroPoRE/v.swf
腾讯:http://static.video.qq.com/TPout.swf?vid=s0301wb4r8v&auto=0

如果看官想看更多视频,可在优酷、土豆、腾讯视频中搜索下:艺灵设计哦~

----------完----------

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/div/2016-06-01/407.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: div+css教程 div+css布局 html视频教程 网页布局 清除浮动 浮动布局 ul圆点 公开课

上一篇: 轻松学会div+css09css浮动和清除浮动   下一篇: 轻松学会div+css11position定位属性

评论区