老话长谈，css的不固定适应布局 不管是面试还是在平时的工作中，这样的布局形式一直都在用着，很常见，所以今天我就拿出来在唠叨一下， 既是给自己一个备忘存储，也是一个学习巩固的参考，知道大家都会，还是要记忆一下，不为其他，就为打好基础。 话说太多， 直接上代码，一看就能明白。 也许你会不屑一顾的说简单，可是我就喜欢写一些。。。。。。作为一个菜鸟，就要从基础努力学习才行。 方法多种， 你有新的方法可以补充说明...
一、CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动随浏览器显示宽度而变宽变窄）。随着发展，越来越多的电脑用户显示屏分辨率越来越高，但有的用户还是使用1024px的分辨率的显示屏（根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少，但我们C...
方法一： 别的不多说，直接上代码，或者参考在线DEMO，下面所有的DEMO都有HTML和CSS代码，感兴趣的同学自己慢慢看吧。 HTML Markup Left Sidebar Main Content CSS Code * { margin: 0; padding: 0; } html { height: auto; } body { margin: 0; padding: 0; } #container { background: #ffe3a6; } #wrapper { display: inline-block; border-left: 200px solid #d4c376;/*==此值等于左边栏的...
原理：利用a标签和i标签各自一个背景组合成为按钮，达到自适应。 .btn a{text-decoration:none;} .btn{display: inline-block; background: url(s_btn.png) no-repeat 0 0; height: 22px; line-height: 22px; color: #666; vertical-align:top;} .btn i{display:block;font-style: normal; font-size: 12px; padding: 0 10px; background:url(s_btn.png) no-repeat right -22px; ...
1 2 < html xmlns ="http://www.w3.org/1999/xhtml" > 3 < head > 4 < title > div + css左右高度自适应测试 </ title > 5 </ head > 6 < body > 7 < div class ="MainCenterDiv" > ...
一个客户说要用DIV+CSS布局，两列，其中导航列宽度不确定（由里面的TreeView控件确定），而与它并列的内容列宽度要做到自适应，也就是 内容列宽度+导航列宽==固定值（总宽度） 但是，内容列宽度 和 导航列宽 都没有一个定值，而网上的大多自适应列宽代码都是基于一个定值的 无奈，我写Winform出身的对CSS+DIV知之甚少，只能通过JavaScript来完成了，效果还可以，IE7.0和Firefox2.0测试通过 下面的代码中，...
哈哈 body{ margin:0px; padding:0px; } .content_box{ width:900px; margin:auto; overflow:hidden; } .content_left{ width:300px; float:left; background-color:#f2f2f2; } .content_right{ width:540px; float:right; } .warp{ padding-bottom:20000px; margin-bottom:-20000px; } im is a zongzi im is a zongzi im ...
近日查看了一些资料自己研究写了一个网站布局，采用高度自适应，css样式表如下： * { margin:0; padding:0; } BODY { font-size: 12px; font-family: "Verdana" , "Arial" , "细明体" , "sans-serif"; text-align: center; background-image: url(../images/bg.gif); } table { FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "Arial", "细明体", "sans-serif"; } /*空行*/ .space10{ height:10px; float:left; width:100%; } /*实现...
转 这几天用div+css写网站，样子 上中下，中间是个左中右3列，可这3列不是等高偏巧有不同颜色的背景，结果就是ie、firefox...这些浏览器无一例外的现实的效果都是长短不齐，如何让这3列可以自适应高度？ 调试了半天，搜索了一番，终于找到解决办法了，采用 Div + CSS 进行三列或二列布局时，事先不知道具体高度，只能根据内容的增减自适应高度，要使两列（或三列）的高度相同，用 Table 很容易实现，但采用 Div + CSS 就显得比...
长话短说，用 DIV + CSS 做液态布局（宽度自适应），具体用到“负值外补丁”的方法 （negative margins）。 下面我们来做一个三栏液态布局（three-column liquid layout） 首先 Body 和 外框 的代码： body{margin:0;padding:0px;text-align:center;} #wrap{margin:0 auto;text-align:left;} 三栏的代码分别如下： /*左边栏，固定宽度*/ .wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150p...
相信很多人都非常喜欢用div+css布局,无论你是前端开发者，还是后台程序员，因为它的好处实在太多，可以用很少的代码来控制布局，然后用CSS表现其形态，表现和样式分离。而且在SEO方面，它还能提供30%的优化，我们何乐而不为呢。 很多人都会碰到如题的布局问题，解决方案很多，可以用背景图来填充，或用js来控制，但终不是最佳方案，最好还是从DIV,CSS本身来考虑: 以下为三行两列的的经典模式，还可以演变成多种布局，有待大家修...
自适应高度的问题，采用 Div + CSS 进行三列或二列布局时，由于事先不知道具体高度，只能根据内容的增减自适应高度，很多情况下要求两列（或三列）Div的高度相同，以前用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。一般的做法，大都采用背景图填充或 JS 脚本控制的方法使各Div高度相同，这里看到一个解决方法，记录如下： 它主要是采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合方式，示例代码如下： ...
注：转自zctya's blog 在用CSS+DIV的布局中，经常会发现，当一个DIV float之后，如果他的高度超过了其父DIV的高度时，其父DIV的高度并不会相应的进行调整。要解决这个问题（也叫做闭合(清除)浮动），我们有四种办法： 1. 额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需 要额外的（而且通常是无语义的）标签...
Header 分析： 最外层的wrapper把所有内容都嵌套在里边，整体相对定位。max min已经很好的控制了最窄最宽值，但对IE没有作用。如果没有其他布局的穿插，这一层其实写在body内就可以，少一层嵌套。 #wrapper{ width:auto; border:1px solid #000; min-width:776px; max-width:1000px; text-align:left; margin-left:auto; margin-right:auto; position:relative;} wrapper 下级的 outer ...
长话短说，用 DIV + CSS 做液态布局（宽度自适应），具体用到“负值外补丁”的方法 （negative margins）。下面我们来做一个三栏液态布局（three-column liquid layout）首先 Body 和 外框 的代码： body{margin:0;padding:0px;text-align:center;} #wrap{margin:0 auto;text-align:left;} 三栏的代码分别如下： /*左边栏，固定宽度*/ .wrap_l{float:left;background:#FF0000;margin-right:-150px;width:1...