css&js

时间 2020-04-21

标签 css&js css 栏目 CSS 繁體版

原文原文链接

1.为页面某区域内某标签有一些操做，能够先用div包括这些区域，而后经过ID或得，再进一步得到里面的标签。eg,var ff=document.getElementById('xx');
var dds=ff.getElementsByTagName('a');
jquery click自动完成循环。css

$(document).ready(function(){html

  $("a").click(function() {
        alert("Hello world!");
         });jquery

});浏览器

2.CSS可控制超连接样式-css连接样式以下
a:link是超级连接的初始状态
a:hover是把鼠标放上去时悬停的情况
a:active 是鼠标点击时
a:visited是访问事后的状况ide

1)、一般对全站超连接样式化方法
a{color:#333;text-decoration:none; } //对全站有连接的文字颜色样式为color:#333;并当即无下划线text-decoration:none;
a:hover {color:#CC3300;text-decoration:underline;}//对鼠标放到超连接上文字颜色样式变为color:#CC3300;并文字连接加下划线text-decoration:underline;ui

2)、经过连接内设置类控制超连接样式css方法
案例超连接代码<a href="http://www.divcss5.com/" class="yangshi">CSS</a>
对应CSS代码
a.yangshi{color:#333;text-decoration:none; }
a.yangshi:hover {color:#CC3300;text-decoration:underline;}
经过这样的设置能够控制连接内的css类名为“yangshi”超连接的样式firefox

3)、经过对应超连接外的父级的css类的css样式来控制超连接的样式
案例超连接代码<div class="yangshi"><a href="http://www.divcss5.com/">CSS</a></a>
对应CSS代码
.yangshi a{color:#333;text-decoration:none; }
.yangshi a:hover {color:#CC3300;text-decoration:underline;}指针

3.CSS中鼠标指针设置为手型有两种写法：cursor:hand和cursor:pointer.
cursor:pointer应该是符合W3C标准的。xml

4.1)flaot浮动形成IE6下面双倍边距问题:
margin-left:10px!important;/*IE7,IE8,FF下是10PX*/;margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10pxhtm

2)在属性前面加符号如：*、&，￥，#，@，—，+，加过符号的属性只有IE的浏览器才识别，而FF不识别，方法以下(注意有符号的属性和没符号的属性的顺序)
height:100px;/*FF下显示100的高*/
+height:120px;/*IE678下显示120高*/

3)清除浮动
在设置过浮动的那个DIV下面加一个DIV，CSS面写个clear:both;以下
(1).<divstyledivstyle="float:left;height:100px;width:500px;">
(2).<divstyledivstyle="clear:both;">
(3).<divstyledivstyle="height:100px;width=300px">

4)页面居中两要素：(1）大盒子 (2）绝对宽度

5)经过兼容性实现IE六、七、8下三种不一样效果：
如IE6下背景红色，IE7下蓝色FF下绿色
（注意顺序，能够好好理解一下）。
7L&t-o7k-a1I
red; /*FF里显示的红色*/
+blue!important; /*IE7下面显示的蓝色*/
+background:green;/*IE6下面显示的绿色*/

6)<metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/> 把这段代码放到<head>里面，在IE8里面的页面解析起来就跟IE7如出一辙的了，因此，基本上能够无视IE8，剩下的代码只须要这样写就能够了
1）.background:#ffc;/*对firefox有效*/
2）.*background:#ccc;/*对IE7有效*/
3._background:#000;/*只对IE6有效*/

firefox能解析第一段，后面的两个由于前面加了特殊符号“*”和“_”,firefox认不了，因此只认background:#ffc，看到的是×××；
IE7前两短都能认，以最后的为准，因此最后解析是background:#ccc，看到的是灰色；
IE6三段都能认，并且“_”这个只有IE6能认，因此最后解析是_background:#000，看到的是黑色

若是你发现按我这样写仍是有问题的话，请查看一下你的html头，看看<head>以前的内容是否是这样的标准写法
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
这个是如今比较规范的写法，非这种规范写法的，兼容性不能保证。

7)Css代码
<style type=”text/css”>
#body { border:2px solid #00f; /*ff的属性*/
border:2px solid #090\9;   /* IE6/7/8的属性 */
border:2px solid #F90\0;     /* IE8支持 */
_border:2px solid #f00;     /*IE6的属性*/ }

</style>
-----
Html代码

<div id=”body”>
<ul>  <li>FF下蓝边</li>
<li>IE6下红边</li>
<li>IE7下绿边</li>
<li>IE8下黄边</li>
</ul>
</div>  注:css顺序不能写错，由于ff不认识\9,\0,_写法,因此为蓝边;\9是IE6，7，8的属性,下面代码并无重写IE7的代码，因此IE7下绿边;同理,\0为ie8属性，至关于重写了颜色，因此IE8下为黄边,_是ie6的属性,重写颜色为红边.

8)IE6里DIV错位的问题采用”FLOAT：LEFT“的DIV在IE八、IE七、都没问题，IE6下却向下移动，出现空白。这是由于，IE6采用的内核默认把DIV之间的距离增长了3~5个PX，因此，试试是将下移的DIV的STYLE里增长"margin-left:-5px;"或者更小。

4.css hack

1)下划线hack
IE 6 及如下的版本能够识别带有下划线前缀的属性，而其它的浏览器会忽略它。所以，一个属性前面加上下划线或者连字符，就成为了IE6及如下版本浏览器的专有属性。
(hack使用了无效的CSS，不推荐使用）

2)星号hack
(hack使用了无效的CSS，不推荐使用）
(适用于IE7如下版本)

　　除了下划线和连字符，版本7及如下的IE能够识别以非字母字符为前缀的属性，而其它浏览器会忽略。

3)星号 HTML hack
(适用于IE4-6)
* html p {font-size: 5em; }
这个HACK使用了彻底有效的CSS。

4)星号加号HACK
(适用于IE7)
*:first-child+html p { font-size: 5em; }
或者：
*+html p { font-size: 5em; }

5)否认伪类HACK
(可区分IE和非IE)
IE的全部版本都不支持CSS3 : not() 伪类。有一种变异的HACK使用 : root 伪类，此伪类也一样不被IE识别。

6)！Important 怪僻(适用于IE8如下版本)IE8及如下版本有一些和!imporant有关的怪僻，它容许一个赋值优先级更高。IE7及更早版本接受任意字符串替代important，而且会正常处理该值，而其它浏览器则会忽略。