-
设计创作
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
安安
2017-10-18
来源 ：网络
阅读 1233
评论 0
摘要：本篇网站设计案例教程将为大家讲解网站设计的知识点，看完这篇文章会让你对网站设计的知识点有更加清晰的理解和运用。
本篇网站设计案例教程将为大家讲解网站设计的知识点，看完这篇文章会让你对网站设计的知识点有更加清晰的理解和运用。
在网页设计中，分栏布局是常用的布局手法，一般有两栏布局，三栏布局。这其中又以部分栏固定，部分栏自适应的方式最为常见。下面我们先以常见的三栏布局开始，描述一下常用的几种实现方案。
三栏布局
三栏布局最常见的就是左右定宽，中间自适应的方式，我们就先以这种方案开始讲述。
首先我们先假设页面的高度固定为100像素，下面先快速地看一遍，五种布局方案的实现方法。
浮动布局
https://jsfiddle.net/chenfeng...点击预览
绝对定位的布局
https://jsfiddle.net/chenfeng...点击预览
表格布局
https://jsfiddle.net/chenfeng...点击预览
flex布局
https://jsfiddle.net/chenfeng...点击预览
网格布局
https://jsfiddle.net/chenfeng...点击预览
没有了高度之后
这几种布局方案，表面上看起来没有什么问题，但是这是在我们假设固定了高度的情况下，如果高度是不固定的，这几种布局方案就会带来一系列的问题：
浮动布局
https://jsfiddle.net/chenfeng...点击预览
因为jsfiddle嵌入在文章里面的原因，在预览界面看不到问题所在，点开链接后看到的页面如下图所示：
这个时候，我们可以看到，页面的布局已经乱了，至于为什么会乱，做过“首字下沉”效果，或者“图文混排”效果的同学，应该知道这其中的原因，是因为在CSS的浮动机制中，当容器中存在一个浮动的元素时，紧随其后的元素的内容，会紧贴该元素的右边框进行排列，如果超出该元素的高度后，则会紧贴父元素的最左边框进行排列（右浮动则相反）。
要解决这个问题，有很多种方案：
给中间的元素增加左右各100像素的padding值，如果使用这种方法，需要自己想办法处理背景的问题：
2. 创建BFC，为中间元素创造块格式上下文，最常见的做法就是设置 overflow 为 hidden（也有人用 auto ）：
希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标网站设计频道都能找到!
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
