第一天 XHTML CSS基础知识 http://www.aa25.cn/div_css/902.shtml 1.整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度。 第二天 一列布局 http://www.aa25.cn/div_css/903.shtml 1. css手册中说：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不...
脚本控制三行三列自适应高度DIV布局 function P7_colH(){ var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa; if(dA&&dA.length){ for(i=0;i dA[i].style.height='auto'; } for(i=0;i oh=dA[i].offsetHeight;h=(oh>h)?oh:h; } for(i=0;i if(an){ dA[i].style.height=h+'px'; }else{ P7_eqA(dA[i].id,dA[i].offsetHeight,h); } } if(an){ for(i=0;i hh=dA[i...
这种技巧的名称叫做CSS Sprite，基本原理就是利用CSS中图片background系列的 background-image、background-repeat、background-position等属性实现。通过这种方式达到图片显示 加速的关键，不是降低重量，而是减少个数。在通常情况下一张图片的传输时间，通常远小于请求等待的时间。 PS：特别制作了三个CSS Sprites实例演示，感兴趣的朋友可以看一看。 实例 比如google.cn现在首页的底部导航也是用这个方式实现的。 所用图片...
代码如下： Code 无标题文档 .scroll_div { width:660px; height:146px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff; margin-left:-6px; } .scroll_div img { width:128px; height:140px; border: 0; margin: auto 2px; border:3px #ccc solid; } #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul l...
开始学习网页的布局的时候经常遇到这个问题，现在网上copy人家的文章贴到这里来吧！希望能有帮助。 经常我们用DIV+CSS建站的时候，发现在IE6,IE7,Firefox里面显示经常一塌糊涂，而在外贸网站建设中，因为浏览着对象是国外，Firefox的市场份额很大，为了让我们的客户能看到一个完美专业的显示效果，所以Firefox必须考虑！ 以下是一些常见问题和解决方法 1、居中问题 div里的内容，ie默认为居中，而ff默认为左对齐。 使ff内容...
如果IE6和IE7显示都正常；火狐也没有问题；检查代码也没有误失；就试试加上这段代码IE8目前还不稳定，腾讯首页利用IE7的内核来渲染IE8，代码如下:
1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。 2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。 3、一个兼容性调整(IE和Mozilla)的笨办法： 初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，...
网页制作技巧之------DIV标签中应用CSS样式设计 你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="lef...
CSS代码如下： body{ text-align:center; margin:0px; padding:0px; } #father { position:relative; width:750px; text-align:center; } #banner{height:96px;background-color:#999;text-align:left; padding:0px;margin:0px;} #b-left{width:159px;margin:0px;padding:0px;float:left;} #b-center{margin:0px;float:left;} #b-right{ text-align:left; marign:0px; padding:0px...
CSS2.0盒模型层次平面示意图和3D示意图 3像素问题及解决办法 当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了，所以对布局精度要求高的话，请参考例29、31的解决方法。 上边容器浮动后，下边的容器跟着浮动，造成页面错乱 如以上例子中的footer必须要单独占一行，但当sidebar浮动后，content的高度小于sidebar的高度时，...
在用div+css做页面设计时，为了实现现跨流览器兼容，除了使用Hack技术之外。另一个重要的事情就是要统一所使用的字体。因为不同的浏览器可能会使用不同的默认字体，不同字体的文本字所占的页面宽度是不一样的，最终将导致不同浏览器显示效果出现差异。 以下是数字在不同浏览器的默认显示， 在firefox下 在ie下 由于默认字体，导致相同文字长度不同。
CSS两列布局，右侧固定，左侧自适应宽度 这是右侧的内容 这是左侧的内容，自适应宽度 CSS两列布局，左侧固定，右侧自适应宽度 这是左侧的内容 固定宽度 中间内容，自适应宽度 CSS三列布局，左右宽度固定，中间自适应宽度 这是右侧的内容 固定宽度 这是左侧的内容 固定宽度 中间内容，自适应宽度 overflow:auto; _display:inline-block; 是清除浮动的，_display:inline-block;针对IE6的。
使用DIV+CSS布局网页后，容器内的文字不可选择的解决方案，如无法选择DataList控件中的文字 痛苦了很久搜到一个有效方法，很简单。 加height:100%;就行，在css里面加也可以 html, body { height:100%;} div { position:absolute; top:100px; left:100px; width:200px; height:200px; border:1px solid red; } 定位后无法选择容器的内容解决方案 定位后无法选择容器的内容解决方案
1、*{} #zishu *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异，所以最终的网页效果在不同的浏览器中可能是不一样的，为了消除这方面的风险，设计者通常会在CSS的一个始就把所有标签的默认属性全部去除， 以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签； *{margin:0; padding:0} 如果这样写，页面中所有的标签的margin全是0；padding也是0； #zishu *{margin:0; padding:0}如果这样写，在...
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } ...