如何使整个页面内容居中，如何使高度自适应内容自动伸缩，这是学习CSS布局最常见的问题。 下面给出一个实际的列子，附详细说明。 首先可以将下列代码复制到html文件中运行一下，在mozilla、opera和ie浏览其中，均可达到居中且自适应高度的要求。 body { background:#999; text-align:center; color:#333; font-family:Arial, Verdana, Sans-serif; } #header { wid...
自动换行问题，正常字符的换行是比较合理的，而连续的数字和英文字符常常将容器撑大，挺让人头疼，在52CSS.com中不乏这方面的文章，现在总结一下CSS如何实现换行的方法，只要在CSS中定义了如下句子，可保网页不会再被撑开了。 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 Example Source Code [www.52css.com] htm...
前不就公司项目要求做一个比较蛋疼的布局，类似于window xp桌面图片布局方式，而且要求尽量不要用嵌入js脚本，用纯div+css布局，在不断探索和摸索下也只现实了IE8+,firfox, chrome浏览器，别的不多说，直接上代码。 1 2 3 4 5 window xp桌面图标布局 6 7 html,body{ margin:0; border:0; padding:0; width:100%; height:100%; } 8 .parent{ display:block; background:gray; width:100%; height:100%; } 9 .parent{10 ...
首先，三栏等高布局，顾名思义，可以概括为以下特征： 1、3列（白痴也知道） 2、这3列高等相等 3、这3列的高度不是固定不变，而是随着内容的变化而变化 Step 1: xhtml代码： ＜div id="header"＞#header＜/div＞ ＜div id="container"＞ ＜div id="main" class="column"＞#main＜/div＞ ＜div id="left" class="column"＞#left＜/div＞ ＜div id="right" class="column"＞#right＜/div...
单行一列以下是引用片段：body { margin: 0px; padding: 0px; text-align: center; } #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 两行一列以下是引用片段：body { margin: 0px; padding: 0px; text-align: center;} #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} #content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;} ...
div+css页面布局练习*{margin:0px; padding:0px;}#top,#nav,#mid,#footer{ width:500px; margin:0PX auto;}#top{height:80px; background-color:#F0F;}#nav{height:25px; background-color:#0FF;}#mid{height:300px;}#left{width:98px; height:298px; border:1px solid #FF0; background-color:#00F; float:left;}#right{ height:298px; background-color:#900;}.content{width:98px; height:148px; background-color:#030; borde...
布局 注意：mainbody中的div顺序是左、右、中；颠倒之后害死人阿
圣杯布局：两栏固定-中列浮动-中列div排在前面，好处是当网速慢的时候，内容列能首先显示出来 一个额外的DIV包含着我们的三个层,这样的结构符合我集中内容上一体的标记为一体的习惯 样式很也简单,左边侧栏是200PX,右边是150,为了简便标示用LC,RC,CC分别代表左边,右边和中间,样式如下: body { min-width: 550px; /* 2x LC width + RC width */ } #container { padding-left: 200px; /* LC width */ pa...
简介 如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？ 类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。 这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不...
写在前面的话：由于个人兴趣爱好，学习Web编程一些知识，自己做一些笔记来记录学习的过程。如果大家哪里不懂或者是有错误的地方，欢迎指正。同时乐意同大家相互交流编程的一些经验。 笔记正式开始：在很早的网页编程中，人们编程用到的网页布局一般是table式的布局。但是由于table布局的一些缺点，慢慢的table这种布局被DIV+CSS的布局方式所代替。但是table并未被废除，而是融合到了DIV+CSS的布局方式中去，因为table在显示数据的...
学习了div+css布局以后，总会出现跨浏览器测试页面差异太大的问题，学习了这章之后，知道了差异的来源。 部分css属性在不同的浏览器解析的结果会有差异，是由于个别浏览器的开发商对一些css属性的解析没有按w3c的标准设计，可以使用的浏览器有很多种，但通常在页面布局调试时，将其划分为IE和非IE两类即可。主要原因是微软公司的IE浏览器没有按W3C的标准设计，而非IE的浏览器几乎都是符合W3C标准的，另外，更令人发恼的死IE还有很...
无标题 1* { margin: 0; padding: 0;}body { margin:30px; font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体, sans-serif;}.main { overflow: hidden; width: 500px; margin: 0 auto;}.left { float: left; width: 250px; overflow: hidden;}.right { float: right; width: 245px; overflow: hidden;}.bor_top { height:1px; background:#FB9D51; overflow:hidden;}.equal { padding-bottom: 32767px; margin-bottom: -32...
#head{height:40px;background-color:#0033CC;margin:0;}#content{background:#CCCCCC;height:200px;margin:0;}#left{width:20%;height:200px;background:#CCCC66;float:left;margin:0;}#c{width:60%;height:200px;background:red;margin:0;float:left;}#right{width:20%;height:200px;background:#339966;float:right;margin:0;}#foot{background:#0099CC;height:40px;margin:0;}head left content rigthfoot
1.用display:none来隐藏元素的时候不会保留元素本来的位置，用visibility:hidden则不会 2.用margin:auto可以使一个元素居中显示 3.当元素宽度超过浏览器宽度时浏览器会出现水平滚动条，此时可是使用max-width代替width，max-width可以自适应浏览器宽度，支持IE7+及其他主流浏览器 4.当在计算元素宽度的时候，边框的长度和内边距也会被计算在内，这样的话做起来会比较麻烦，用以下这段代码可以解决这个问题 *{ -webki...
DIV+CSS常用的Html网页布局代码http://school.21tx.com 2008年04月11日 网页教学网 单行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center; } #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 两行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center;} #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} ...