方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup Left sidebar Main Content
CSS Code 上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“marg...
分类:
Web程序 时间:
2015-04-29 08:37:55
阅读次数:
1362
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。本文非常基础,老鸟可以略过。 负边距在普通文档流中的作用和效果-影响元素在文档流中的位置 那些没有脱...
分类:
Web程序 时间:
2015-04-29 08:37:34
阅读次数:
140
何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单,在兼容浏览器方面也稍微复杂一些。 布局思路 在IE7+及chrome、firefox等浏览器中,高度自...
分类:
Web程序 时间:
2015-04-29 08:37:06
阅读次数:
172
第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法。 代码如下: 这是右侧的内容 固定宽度 这是左侧的内容 固定宽度 中间内容,自适应宽度 第二种:左右两侧采用绝对定位 中间同样采用margin-left margin-right方法: 第三种负的margin...
分类:
Web程序 时间:
2015-04-29 08:37:03
阅读次数:
128
一直都想认真的学习一下Bootstrap,但是由于种种原因,一直没有行动,虽然期间有使用过Bootstrap,但是都没有系统的学习过。最近工作室(学校老师的工作室)安排了一个前端任务让我跟进,主要是根据已有的美工图,用html+css布局出页面,要求使用Bootstrap。正好可以系统的学习一下.....
分类:
其他好文 时间:
2015-04-28 11:07:23
阅读次数:
170
原文出处:front-Thinking欢迎分享原创到伯乐头条如果你写过CSS或者你接触过CSS,相信你一定对盒子模型一点都不陌生。CSS其中一个让人比较困惑的地方就在于它的盒子模型中关于高度和宽度的计算,别说那些初学者了,就是写过很久CSS的人也一样会有如此的感觉。CSS中的高度和宽度总是不那么直观...
分类:
Web程序 时间:
2015-04-28 09:28:35
阅读次数:
128
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。本文非常基础,老鸟可以略过。负边距在普通文档流中的作用和效果-影响元素在文档流中的位置那些没有脱离文...
分类:
其他好文 时间:
2015-04-27 23:22:29
阅读次数:
217
问题一:不同浏览器的标签默认的margin和padding不同解决方法:* { margin:0; padding:0;}问题二:IE6双倍margin(块属性+float+横向margin)说明:如div+css布局,,在IE6下显示会有margin-left:20px的距离解决方法:_displ...
分类:
其他好文 时间:
2015-04-27 15:03:28
阅读次数:
182
什么是等高布局?先来看一个案例:上图中的页面的主体内容是两列结构,左列是用来导航的,右列是用来显示内容的。我们看到它们有一个共同的边框,中间还有一条分隔线,左右两列的高度都是不固定的。这种情况下就需要两列的高度保持一致了,左边高度增加,右边也跟着增加,右边高度增加,左边同样也要增加,否则就会出现“断...
分类:
Web程序 时间:
2015-04-27 12:53:58
阅读次数:
164
此为用CSS实现的仿真扑克牌,别以为是使用了图片,实际上完全是由CSS实现的,就连牌面也是,CSS布局的水平如此之高,赶紧研究一番吧,如果你用CSS也能实现本效果,估计你也高手了。...
分类:
Web程序 时间:
2015-04-26 15:20:36
阅读次数:
144