重庆信息技术职业学院校园网络规划设计

重庆信息技术职业学院校园网络规划设计内容摘要：

)。 box{ display:block。 //可以为内嵌元素模拟为块元素 display:inline。 //实现同一行排列的的效果 diplay:table。 5 IE与宽度和高度的问题IE不认得min这个定义，但实际上它把正常的width和height当作有min的情况来使。 这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用minwidth和minheight的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。 要解决这个问题，可以这样：box{ width: 80px。 height: 35px。 }htmlbody box{ width: auto。 height: auto。 minwidth: 80px。 minheight: 35px。 }6 页面的最小宽度minwidth是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。 但IE不认得这个，而它实际上把 width当做最小宽度来使。 为了让这一命令在IE上也能用，可以把一个div 放到 body 标签下，然后为div指定一个类：然后CSS这样设计：container{minwidth: 600px。 width:e?xpression( 600? “600px”: “auto” )。 }第一个minwidth是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。 它实际上通过Javascript的判断来实现最小宽度。 7 清除浮动.hackbox{display:table。 //将对象作为块元素级的表格显示}或者.hackbox{clear:both。 }或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。 这种的最麻烦的……box:after{content: “.”。 display: block。 height: 0。 clear: both。 visibility: hidden。 }8 DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.box{float:left。 width:800px。 }left{float:left。 width:50%。 }right{width:50%。 }*html left{marginright:3px。 //这句是关键}HTML代码DIV id=boxDIV id=left/DIVDIV id=right/DIV/DIV9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)p[id]{}div[id]{}p[id]{}div[id]{},FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.10 IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对layout使用lineheight属性 或者给layout使用固定高和宽。 页面结构尽量简单。 11 高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。 例：div id=”box”pp对象中的内容/p/divCSS：box {backgroundcolor:eee。 }box p {margintop: 20px。 marginbottom: 20px。 textalign:center。 }解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px。 overflow:hidden。 }或者为DIV加上border属性。 屏蔽IE浏览器（也就是IE下不显示）*:lang(zh) select {font:12px !important。 } /*FF,OP可见*/select:empty {font:12px !important。 } /*safari可见*/这里select是选择符，根据情况更换。 第二句是MAC上safari浏览器独有的。 仅IE7识别*+html {…}当面临需要只针对IE7做样式的时候就可以采用这个HACK。 IE6及IE6以下识别* html {…}。 其它浏览器不识别。 html/**/ body select {……}这句与上一句的作用相同。 仅IE6不识别select { display /*IE6不识别*/:none。 }这里主要是通过CSS注释分开一个属性与值，流释在冒号前。 仅IE6与IE5不识别select/**/ { display /*IE6,IE5不识别*/:none。 }这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。 仅IE5不识别select/*IE5不识别*/ { display:none。 }这一句是在上一句中去掉了属性区的注释。 只有IE5不识别盒模型解决方法selct {width:。 voicefamily :}。 voicefamily:inherit。 width:正确宽度。 }盒模型的清除方法不是通过!important来处理的。 这点要明确。 清除浮动select:after {content:.。 display:block。 height:0。 clear:both。 visibility:hidden。 }在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。 截字省略号select { otextoverflow:ellipsis。 textoverflow:ellipsis。 whitespace:nowrap。 overflow:hidden。 }这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。 只是目前Firefox并不支持。 只有Opera识别@media all and (minwidth: 0px){ select {……} }针对Opera浏览器做单独的设定。 以上都是写CSS中的一些HACK，建议遵循正确的标签嵌套(div ul li 嵌套结构关系)，这样可以减少你使用Hack的频率，不要进入理解误区，并不是一个页面就需要很多的hack来保持多浏览器兼容)，很多情况下也许一个Hack都不用也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。 这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。 ，@media tty {i{content:。 /* */}} @import 39。 39。 /*。 }}/* */IE5/MAC的过滤器，一般用不着/**//*/@import。 /**/下面是IE的条件注释，个人觉得用条件注释调用相应 Hack是比较完美的多浏览器兼容的解决办法。 把需要hack的地方单独放到一个文件里面，当浏览器版本符合的时候就可以调用那个被Hack的样式，这样不仅使用起来非常方便，而且对于制作这个CSS本身来讲，可以更严格的观察到是否有必要使用hack，很多情况下，当我本人写CSS如果把全部代码包括Hack都写到一个CSS文件的时候的时候会很随意，想怎么Hack就怎么Hack，而你独立出来写的时候，你就会不自觉的考虑是否有必要Hack，是先Hack CSS。 还是先把主CSS里面的东西调整到尽可能的不需要Hack。 当你仅用很少的Hack就让很多浏览器很乖很听话的时候，你是不是很有成就感呢。 你知道怎么选择了吧～～呵呵IE的if条件Hack 自己可以灵活使用参看这篇IE条件注释Only IE 所有的IE可识别Only IE + 仅IE6可识别Only IE 7/ Only IE 7/ 仅IE7可识别Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的hack，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕。 而他们看似复杂的模版下面使用的Hack 少得可怜。 其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。 不要你认为发现了hack的办法，你就掌握了一切，我们并不是Hack的奴隶。 div ul li 的嵌套顺序今天只讲一个规则。 就是divulli的三角关系。 我的经验就是div在最外面，里面是ul，然后再是li，当然li里面又可以嵌套div什么的，但是并不建议你嵌套很多东西。 当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是div里面放li，而不用ul的时候，你会发现你的间隙十分难控制，一般情况下，IE6和IE7会凭空多一些间距。 但很多情况你来到下一行，间隙就没了，但是前面的内容又空了很大一块，出现这种情况虽然你可以改变IE的Margin，然后调整Firefox下面的Padding，以便使得两者显示起来得效果很相似，但是你得CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来Hack它们，但是你会烦得要命。 具体嵌套写法遵循上面得嵌套方式，divulli/li/ul/div 然后在CSS 里面告诉 ul {Margin:0px。 Padding:0px。 liststyle:none。 }，其中liststyle:none是不让li标记的最前方显示圆点或者数字等目录类型的标记，因为IE和Firefox显示出来默认效果有些不一样。 因此这样不需要做任何手脚，你的IE和IEFirefox显示出来的东西(外距，间距，高度，宽度)就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的差别，但那已经很完美了，不需要你通过调整大片的CSS来控制它们的显示了，你愿意，你可以仅仅hack一两个地方，而且通常这种hack可以适应各种地方，不需要你重复在不同的地方调试不同的Hack方式–减轻你的烦恼。 , , {xxx:xxxx}的方式方便的整理出你要hack的地方，而统一Hack。 尝试一下吧，再也不要乱嵌套了，虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套，但是按照上面的规律你将轻松很多，从而事半功倍。 第四节 个人总结的关于CSS+DIV布局的八条学习方法CSS网页布局，说难，其实很简单。 说它容易，往往有很多问题困扰着新手，介绍了非常多的技巧，这些小技巧与知识能事半功倍的给大家以帮助。 然而更多的时候，我们往往被一些小问题缠着不能轻松。 今天向大家介绍八个技巧，这些技巧显得很有用。 一、若有疑问立即检测　　在出错时若能对原始代码做简单检测可以省去很多头痛问题。 W3C对于XHTML与CSS 都有检测工具可用，请见。 请注意，在文件开头的错误，可能。