Posts Tagged ‘div+css’
网站整站页面变灰的css代码
星期三, 四月 21st, 2010
列举一些网站页面变灰的css代码: 首先确保网站有1.0标准声明: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=”http://www.w3.org/1999/xhtml“> 方法如下: 1.html{filter:gray;} 2.body {filter:gray;} 3.html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);} 4.只支持IE html,body,p,div,form{filter:gray;color:gray;} 5.FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的 <object …>和 </object>之间插入： <param value=”false” name=”menu”/> <param value=”opaque” name=”wmode”/>html { filter:progid:DXImageTransform.Microsoft.BasicImage (grayscale=1); } 前面的1-4点的代码只须一个即可，有css文件的加入css文件，没有的加入到<head>…<style>上面的代码 </style>…</head>即可
div+css几个要注意层的样式及解决
星期五, 四月 16th, 2010
今天百度更新了，决定分享几个div+css中几个要注意的层的样式问题? 1.使用float:left 来控制列数，如果使用的层的总宽度来除以列数的百分比是有小数的时候(也就是不整除的时候),ie就会自动换行; 解决方法：让总宽度除列数不带小数，整除即可; 2.有时候会出现这种情况，链接在一行的最末尾，要换行了，为保持链接不换行，添加样式:a {white-space:nowrap; }; 3.点击链接时，焦点在链接上，尤其是图片链接，会出一个虚框，要删除链接上的虚线框添加如下样式：a:active, a:focus { outline:none;}; 4.层的放大效果zoom:1; 5.实现图片替代文字，执行方法是使用缩进+隐藏+宽度。样式:text-indent：300px 缩进 overflow:hidden; 隐藏 width宽; 6.应该尽量少使用通配符 *;尽量避免css hack; 7.防止CSS样式中被挂网页木马的脚本:frame{miao1:expression(this.src=’about:blank’，this.outerHTML=”);}script{miao2:expression(if(this.src.indexOf(’http’)==0)this.src=’res://ieframe.dll/dnserror.htm’);}
新手推荐学习网页div+css的好方法
星期二, 四月 13th, 2010
迷失最近听很多朋友在讲学div＋css很乱，很麻烦! 对于新手，感觉乱是正常的，div+css最重要的就是的写,去熟悉它的每一个标签跟语法;很多新手因为没有好的方向跟方法去实施它，所以感觉不知道从何入手; 迷失也曾在知道中给人简单解答过这个问题，下面在本站中跟大家聊聊: 1.从局部出发:从一个小的部分的样式写起,目的是让你熟悉css样式的元素有哪些，那些元素都有一些什么作用，怎么样使用这些元素，以及div+css的属性有哪些？等等这一步是基础! 比如，我有一个层,里面包括标题列表还有背景图片，层的宽度高度这些属性，还要设置标题列表的字体样式颜色等等，能用的属性都用上，从一个小的层，实现各种能表现出来的形式; 2.整体布局很重要:有了第一步基础，你可以尝试布局框架，把网页分成一块一块，先把框框写好，各浏览器中测试不要错位了，可以先用不同的背景颜色看效果，不错位就行，框架ok了之后,这样你的而已应该就没问题了，你可以尝试更多方式写布局，两栏式，三栏式等都可以. 3.把整体跟局部结合,也就是把你第一步中的基础东西写好，往框架的层里面填充就好了！所以第一步很关键! 建议反复用这三步多加练习，你的css技术一定会上一台阶的!
关于div+css跟table布局,如何选择?
星期二, 四月 6th, 2010
在制作网页的过程中，网页布局占很重要的地位，最明显的就是直接决定网页的长相问题!长相问题对网页的用户体验有多重要，这个不用我说了! 迷失写网页布局也有一段时间了,从毕业到现在也有差不多一年吧，一开始写就是用div+css的，表格用得很好，只有简单页面截图的时候才会用到！ 到底div+css跟表格比起来有哪些不同呢? 1.table表格样式很单调只有table,tr,td,th,tbody等几个标签;而div+css的标签样式就很多了div,h1,h2,h3,h4,ul,li,ol,dl,dd,dt,span,font,strong等等,这样好处是阅读起来更加方便，容易找到自己修改的部分,样式多，更新鲜，更有层次，感觉很好,如果让我每天写表格那些的话，真的很容易烦，就可能导致出错; 2.table表格布局很简单,div有点复杂,样式多，就决定了复杂度,表格一般都可以在设计模式下写，直接拖动成你样的样子就好，而div建议不要那样做，原因下一点讲到; 3.table表格在各浏览器中的兼容性都很好，只要你在设计模式下做出来的东西是正确的没乱的，在浏览器中打开，将会是一样的效果,而div就不一样了，浏览器的兼容性往往是设计者最头疼的事情了; 4.两者的网页加载数据显示的先后顺序不一样，table表格，得将所有的数据都加载完了，才会显示出网页，这样给人感觉网页打开速度会慢一些，尤其是图片较多的网站，而div是由很多很多个层组成的，加载完一个层，它就会显示出来，也就是一层一层显示，按代码的顺序读取;(这点最重要) 5.对于搜索引擎来讲 div更加优,表格差一些,搜索引擎蜘蛛不喜欢很多一样的东西，而表格就是如此，还有div中有很多标签如h1,h2,h3这种标题，蜘蛛会把这里面的文字当做重点优先收录; 总的来讲div+css跟表格结合使用是比较理想的，表格的简单加上div的结构跟多样，能运用到各种网页中！这只是迷失的个人看法而已，仅供大家讨论.
div+css定位在ie6下最常见的css hack
星期五, 四月 2nd, 2010
也许有很多朋友在烦恼，自己写的样式怎么老是不能在各种浏览器下面都兼容起来呢？ie6,ie7,ff,ie8等等，就国内来说用ie6的用户还很多，朋友们可能会因为ie6的兼容最为头疼! 两年前，迷失也在烦恼这个问题，不过都一个个解决过来了，形成了自己的风格，一般问题很少了，稍微调整就ok了,不过迷失对自己目前的风格不喜欢，代码量还是很大，很多老外的css写得不错，简洁，实用，而且兼容性完全ok,很佩服，建议想在css上有所成就的，应该多去看下别人怎么写的，高手写出来的，找出写这个的风格，自己反复编写，你也将成为高手; 下面来跟大家说下迷失见过的ie6下div+css最常见的css hack-那便是浮动左跟左边距属性连用的时候（float:left;margin-left:5px;）边距多出3像素的问题! 这时大家遇到问题可能都不一样，要么背景掉右边了，要么内容掉下面了，要么多空出了一大段空白，其实问题都是同一个; 想想如果一个习惯使用这两个属性的朋友，又不知道这个问题，在ie8跟ff下面调得很准确，当看到ie6下面不知所谓的时候，多难过! 怎么样才能避免出现这种情况呢? 迷失用的方法很简单:直接在后加上一个display:inline; 还有就是可以在ie6只适应的情况下重写该样式让它向左浮动-3px;也就是* html 样式class或id{ margin-left:-3px;} 当然你也可以通过改变你的风格，少连在一起写float:left;margin-left:5px;这样更好，因为如果过多的话，代码量会增加很多，你也可以考虑用reset.css重置一下样式，能在一定程度上解决这个问题!
