随笔分类 - div+css
摘要：负margin技术及其应用在margin所有的实际应用中，负margin技术是我学习css路上最重要一课之一，许多高级应用和页面上的疑难杂症都可以用负margin技术来实现。IE6中双边距Bug：发生场合：当给父元素内第一个浮动元素设置margin-left（元素float:left）或margin-right（元素float:right）时margin加倍。解决方法：是给浮动元素加上display:inline;CSS属性；或者用padding-left代替margin-left。原理分析：块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况
阅读全文
摘要：(4). 多重阴影效果box-shadow可以同时使用多次，我们来个四色的阴影。img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green}
阅读全文
摘要：<table>是表格的基本标记<tr>代表表格的行<td>代表表格的列
阅读全文
摘要：标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:{height:auto!important;height:200px;min-height:200px;}
阅读全文
摘要：1.IE6下图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.2.IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。3.DIV浮动IE文本产生3象素的b
阅读全文
摘要：被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-ACode:<style type="text/css"><!--a:link {}a:visited {}a:hover {}a:active {}--></style>
阅读全文
摘要：CSS Sprites优点CSS Sprites为什么突然爆火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；个人认为CSS Sprites能减少图片的字节，我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。CSS Sprites缺点诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点。在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必
阅读全文
摘要：#box {margin-top:5px;margin-bottom:4px;margin-left:8px;margin-right:5px;float:left;border-left-style:solid;border-left-border:1px;border-left-color:#000000;border-right-style:solid;border-right-border:1px;border-right-color:#000000;border-bottom-style:dashed;border-bottom-border:1px;border-bottom-co
阅读全文
摘要：
阅读全文
摘要：1、HTML 元素透明 其实本身，CSS 实现元素透明是件容易事儿。直接上代码：1. opacity:.5取值为 0~1 之间，1 表示完全不透明，0 表示完全透明。 不过 IE 有滤镜，可以帮助我们拐弯抹角地搞定不透明度：2. filter:alpha(opacity=50);注：事实上会碰到透明背景层，而 opacity 属性是会继承的，避免这个问题，需要结合定位来实现2、背景图片透明直接上代码：3. _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mangguo.pn
阅读全文
摘要：请看这张http://www.xinran001.com专业DIV+CSS培训首页一、页面中链接色用的最多的设为默认链接样式; 大家观察这个页面上也就是黑色的链接色用的最多了, 我个人是把网页中用到的最多的链接色做为网站的默认链接色来设置， a:link { color:#333; text-decoration: none; } a:visited { color:#333; text-decoration: none; } a:hover { color:#FF0000; text-decoration: underline; }二...
阅读全文
摘要：在进行页面的DIV CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。1、将图片转换为块级对象即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。2、设置图片的垂直对齐方式 即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。 如本例中增加一组CSS代码：“#sub img {vertical-align:top;}”。3、设置父对象的文.
阅读全文
摘要：display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。目前支持的浏览器有：IE8、Firefox3、Opera、Safari方案一：先定义 display:inline-block 触发 layout ，再将 display 设回 block 或 inline，layout 不会消失，两个 display 要先后放在两个 CSS 中声明才会有效果，这是 IE 的一个经典 BUG 。.inline-block { display:inline-block; /* 触发块元素的 layout */}.inlin...
阅读全文
摘要：<param name="wmode" value="transparent" /> 到 <object>…</object> 之间意思是设置Flash背景透明。wmode="transparent" 到 <embed>…</embed>之间,意思是使Flash背景在Firefox下透明…
阅读全文
摘要：这里推荐先写显示属性，再写自身属性，再写文字属性；并不代表非得按这个顺序写，但这种写法可以使css结构更清晰易读，修改起来比较方便。而且在团队项目中能更好地提高效率。//显示属性display<转换元素>list-styleposition<定位>float<浮动>clear//自身属性width<宽>height<高>margin<外边距>padding<里边距>border<边框>background<背景>//文本属性color<颜色>font<文字>tex
阅读全文
摘要：本篇文章适合css新手学习，对于已经掌握了css的朋友们也可以通过本片文章来复习知识。 作者通过实践，认为在有些情况下css的代码是可以更加简洁的，多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的。 精简的代码对于网页是有莫大的好处的，对于浏览者访问速度会有一定的提升，另外对于搜索引擎也更加可以抓取网页关键内容。废话不说了，下面就看看笔者总结的可以精简的代码 1.Margin & Paddingdiv { margin-top:10px; margin-right: 5px; margin-bottom:30px; margin-left:0px; } 精简...
阅读全文
摘要：CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一， 通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别， 因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。 应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误：1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有 无错误。2. 检查CSS是否正确 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼 ...
阅读全文
摘要：互联网提供了很多种“将广告始终定位到网页右下角”的解决方案，大多会用javascript，其实仅调用样式表就可以实现该效果。以下万恶的代码主要是写给IE6的，在IE7和FF浏览器中，只需要position:fixed就可以将图层定义到网页的任意位置。 必要元素： DOCTYPE声明 、 html标签 、body标签 、 一个ID为test的div。 相关样式： body{margin:0;border:0;height:100%;overflow-y:auto;} #test{display:block; bottom:3px; right:3px; width:130p...
阅读全文
摘要：写三句代码来控制一个属性，区别Firefox，IE7，IE6： background:orange; *background:green !important; *background:blue; 说明：这段代码会使在Firefox中，背景呈橙色；IE7中为绿色；IE6中为蓝色。道理如下，Firefox不能识别*，所以后面两句都不执行，直接执行第一句；IE7三个都能识别，但是由于有第二句important的作用，所以就执行了第二句代码；IE6不能识别!imprtant，按照最新原则，那就理所当然的执行了最后一句。 background:orange; *bac...
阅读全文
摘要：我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如： ID方法：#test{color:#333333}，在页面中调用<div id="test">内容<div> CLASS方法：.test{color:#333333}，在页面中调用<div class="test">内容<div> id一个页面只可以使用一次，class可以多次引用。 有网友问，id和class好象没什么区别，我在页面中用了多个id在IE中显示也正常， 用多个id有什么影响吗？ 回答：第一影响就是不能通过W3的校验
阅读全文
浙公网安备 33010602011771号