艺灵设计

全部文章
×
当前位置：首页 >> div + css>>轻松学会div+css10练习css浮动布局

轻松学会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个宫格，我们可以写12个li！注意是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

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

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

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2016-06-01/407.html

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

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

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

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

相关文章

轻松学会div+css13字体font-family轻松学会div+css12练习position定轻松学会div+css11position定位属轻松学会div+css09css浮动和清除浮轻松学会div+css08分析网页布局结轻松学会div+css07css属性练习轻松学会div+css06css选择符和调用轻松学会div+css05初步了解css样式轻松学会div+css04练习常用html标轻松学会div+css03常用html标签及

评论区

我要评论

近期更新

权限破解之一键复制某sdn上的代码块 浅聊某sdn是如何实现未登录时屏蔽复制的 bug复盘之如何优雅的实现表格跨页勾选 记一次APP内调起微信支付时首次成功唤醒，后面 记一次注销联通卡的吐血经历 2023年敬业福获取方法 bug复盘之除数为0会怎样？ Vite2项目优化之线上功能有异常，如何快速排查 bug复盘之Vite2项目在线上报错，修复后却意外发 工具分享之图片压缩

热门标签

微信小程序 小程序 用户体验 uni-app gulp教程 @vuecli3 vue.js 路由守卫 vuex vue项目实战 路由 自动化构建 破解 网站管理系统 ajax php二次开发 在线生成 京东装修 破解淘宝css权限 jquery插件制作 淘宝店铺装修教程 ie6 bug jquery特效 css3 注册插件 源码分享 悬浮代码 视频教程 全屏模板框架 footer-more-trigger 鼠标滑过特效 sn-simple-logo 淘宝店铺装修经验汇总 喜欢代码 弹出层 宝贝分享代码 购物车代码 登陆插件 宝贝收藏代码 详情页全屏 天猫关注带数字 导航特效 遮罩层特效 修改淘宝销量 flash动画 模块下10px问题 二级下拉菜单 轮播特效 京东店铺装修 插件下载 淘宝漏洞 鼠标跟随 隐藏的店招/模块 css3边框阴影 赚积分

点击排行

为了抓包某app,我折腾了10天,原来他是这样防抓包的纯css实现超宽图片全屏居中（兼容淘宝店铺）css3边框阴影效果淘宝店内搜索框代码生成器淘宝天猫pc端宝贝转无线端链接工具全屏海报如何开启HBuilder的javascript语法错误提示功能淘宝天猫店铺装修问题与技巧性经验汇总Vue.js实例之v-show用法Vue.js实例之v-bind:style用法

站长推荐

在线生成软件帮助文档实现淘宝基础版详情页导航全屏背景的方法第二期:玩转淘宝店铺装修网站部分文章更新动态一览表淘宝天猫店铺装修问题与技巧性经验汇总淘宝Widget库中轮播特效从入门到精通曝淘宝网往期改销量多处漏洞淘宝卖家有无必要开通css纯css实现超宽图片全屏居中（兼容淘宝店铺）鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)
关于艺灵网站地图艺灵团队
Copyright © 2012 - 2022 艺灵设计, all rights reserved. 技术支持：艺灵设计 网站备案：豫ICP备13015019号
特别申明：本站内容仅供个人学习参考，不做其它用途。