CSS大美集

细节1………………………………………………………………………………

一、当文字与图片在一行，需要将文字与图片底对齐，可以这样写：

或

二、当文字与图片在一行，需要将文字与图片居中对齐，可以这样写：

或

三、更改IE“查看源代码”菜单打开的编辑器

打开注册表编辑器，在开始-运行中输入regedit，

找到以下位置：HKEY_LOCAL_MACHINE"SOFTWARE"Microsoft"Internet Explorer"View SourceEditor"Editor Name"修改默认的数据为"D:"Program Files"EmEditor"EmEditor.exe"

切换到IE中查看源代码就可以看到效果了。

如果View Source Editor"Editor Name项没有,可以自己新建。

四、自动最大化窗口，在 <body> 与 </body> 之间加入：

setTimeout('top.moveTo(0,0)', 1000);

setTimeout('top.resizeTo(screen.availWidth, screen.availHeight)', 1000);

</script>

五、window.opener 实际上就是用window.open打开的窗体的父窗体。

比如在父窗体a.html里面通过window.open("b.html")，那么在b.html中window.opener就代表a.html，可以通过这种方式设置父窗体的值或者调用js方法。

1、window.opener.test(); //调用父窗体中的test()方法；

2、如果window.opener存在，设置a.html中stock的值。

if(window.opener && !window.opener.closed){

window.opener.document.stock.value = “symbol”;

}

六、刷新页面的方法

1    history.go(0)
2    location.reload()
3    location=location
4    location.assign(location)
5    document.execCommand('Refresh')
6    window.navigate(location)
7    location.replace(location)
8    document.URL=location.href

自动刷新页面的方法:
1 页面自动刷新：把<meta http-equiv="refresh" content="20">加入<head>区域中

2 页面自动跳转：把<meta http-equiv="refresh" content="20;url=http://www.baidu.com/">加入<head>区域中

3 JS自动刷新页面
<script type=”text/javascript”>
function myrefresh(){
window.location.reload();
}
setTimeout('myrefresh()', 1000); //指定1秒刷新一次
</script>

4 JS刷新框架

a) 刷新包含该框架的页面用
<script type=”text/javascript”>
parent.location.reload();
</script>

b) 子窗口刷新父窗口
<script type=”text/javascript”>
self.opener.location.reload();
</script>
(或<a href="javascript:opener.location.reload()">刷新</a>)

c) 刷新另一个框架的页面
<script type=”text/javascript”>
parent.frameId.location.reload();
</script>

七、“_”作为命名时的分隔符不规范

用过CSS hack应该知道，用下划线命名是一种hack，如使用“_style”这样的命名，可以让IE外的大部分浏览器忽略这个样式的定义，所以使用“_”做为命名时的分隔符是不规范的。在做CSS检查时会出现错误提示。

八、IE条件注释写法

九、CSS Hack 写法

第一种：
.div {
background:orange;
*background:green !important;
*background:blue;
}
第二种：
.div {
margin:10px;
*margin:15px;
_margin:15px;
}
第三种：
#div { color:#333; }
*+html #div { color:#999; }
* html #div { color:#666; }

细节2………………………………………………………………………………

一、IE6及以下不识别a 标签外的:hover伪类，在火狐，IE7里能正确达到效果，解决办法：

#show li.s1{ border:1px solid #f90; background-color:#454242;}
#show li.s2{ border:1px solid #d9d8d8; background-color:#312e2e;}
<li></li>

二、为元素设置hasLayout

很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决，最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然，zoom也可以用，但这不是CSS的一部分)。比如设置为height:1%。如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。

三、IE6下字符重复出现

确保浮动元素设置了 display:inline;

在浮动元素中使用 margin-right:-3px;

四、样式优先级

1 内联样式 [1.0.0.0]
2 ID选择器 [0.1.0.0]
3 类，属性，伪类选择器 [0.0.1.0]
4 元素标签，伪元素选择器 [0.0.0.1]

五、一个元素垂直居中的css写法

#exm {
position:absolute; left:50%; top:50%; width:200px; height:100px; margin-left:-100px; margin-top:-50px;
}

六、zoom : normal | number

设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承，但是它会影响对象的所有子对象( children )。

七、图片跟文字并排时，要实现图片文字垂直居中：

1 将line-height设置成图片的高度，或者图片父元素的高度
2 再将图片的CSS设置vertical-align:middle;

八、li 元素中包含 a img 元素的时候，IE6下出现空白

解决方法一

使 li 浮动，并设置 img 为块级元素

解决方法二

设置 ul 的 font-size:0;

解决方法三

设置 img 的 vertical-align: bottom;

解决方法四

设置 img 的 margin-bottom: -5px;

细节3………………………………………………………………………………

一、被点击访问过的超链接样式不在具有hover和active

解决方法：改变CSS属性的排列顺序: L-V-H-A

二、FF下连续长字段不能自动换行

解决方法：word-wrap:break-word; overflow:hidden;

三、FF下父容器高度不能自适应

解决办法：清除子元素的浮动

四、IE下图片下方产生空隙

解决办法：定义img为display:block;或vertical-align为top/bottom/middle/text-bottom;

定义父容器的字体大小为零，font-size:0;

五、IE6下浮动元素和它相邻的非浮动元素之间有3px空隙

解决办法：相邻的非浮动元素也设置浮动；浮动元素相对IE6定义_margin-right:-3px;

六、LI内容超长后以省略号显示

解决办法： white-space:nowrap;(文本不换行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

七、文本不能垂直居中

解决办法：行高和容器高度相等line-height=height；

八、文本输入框和相邻的文本不能对齐

解决办法：设置文本输入框vertical-align:middle;

九、IE设置滚动条样式

解决办法：

body {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}

十、IE6无法定义高度为1px的容器

解决办法：overflow:hidden; zoom:0.8; line-height:1px

细节4………………………………………………………………………………

一、让层显示在flash之上

解决办法：给flash设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />

二、使一个层垂直居中浏览器中

解决办法：使用百分比绝对定位，与外补丁负值的方法。

div {

position:absolute; top:50%; left:50%; width:200px; height:200px; margin-left:-100px; margin-top-100px;

}

三、加入收藏夹

解决办法：

window.sidebar.addPanel(title, url,"");

}
else if(window.opera && window.print){
var mbm = document.create_r_rElement_x('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();

}
else if(document.all){

window.external.AddFavorite( url, title);

}
}
// ]]>

</script>
<a href="javascript:bookmark()">加入收藏夹</a>

细节5………………………………………………………………………………

一、常见新闻列表的写法：

二、IE实现页面背景渐变（firefox及chrome不支持）

从上到下：
body { filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000); }
左上至右下：
filter:Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= 100,startY=50,finishY=100); background-color: skyblue; }
从左至右
body { filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000); }
从上到下
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"

三、a hover的样式实现多种效果，可以灵活运用

#outer a { border:1px solid #069; }
#outer a:hover { border:1px dashed #c00; }

四、border:none;与border:0;的区别

理论上的性能差异:
border:0;把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。border:none;把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
兼容性差异：
兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。当border为“none”时似乎对IE6/7无效边框依然存在,当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏，
如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可

五、CSS实现多列等高布局，正内边距与负外边距

给每个需要实现等高的列应用样式：.e { padding-bottom:32767px; margin-bottom:-32767px; }

六、position:relative;特殊用法？？？
* { margin:0; padding:0; font:normal 12px/25px "宋体"; }
body { background:#f8f8f8; }
ul { list-style:none; width:300px; height:25px; margin:20px auto; }
li { float:left; width:86px; height:25px; text-align:center; margin:0 -5px; display:inline; }
a { color:#fff; float:left; width:86px; height:25px; top:0; left:0; background:url(xxx.gif) center center no-repeat; }
a:hover { color:#000; background:url(xxx.gif) 0 0 no-repeat; width:86px; position:relative; }

细节6………………………………………………………………………………

一、innerText：从起始位置到结束位置的内容，不包含标签     innerHTML
   outerHTML:包含 innerHTML和标签
     <div id="test"><span>test1</span>test2</div>
     test.innerText:test1 test2
     test.innerHTML:<span>test1</span>test2
      test.outerHTML:<div id="test"><span>test1</span>test2</div>

二、Number()：任何包含非数字字符的字符串做参数时，结果为NaN。parseInt()：从左到右尽可能多的把字符串转化为数字，直到遇到一个非数字时停止。isNaN()：参数不是一个数字时，返回true。

三、a=23.50abc

typeof(a)=string
parseFloat(a)=23.5
parseInt(a)=23
Number(a)=NaN

4。JS变量名包含数字字母美元符下划线，不能以数字开头

5。getElementsByTagName_r()需要等文档加载完毕后才能获取到

6。nodeType：共12种，1表示元素节点，3表示文本节点
     nodeName：表示节点名称，如果是文本节点，则表示#text
     nodeValue：表示节点的值
eg: 获取tagname为li的节点if(obj.nodeName.toLowerCase()=='li'){}
      改变P的文本内容  document.getElementsByTagName_r('p')[0].firstchild.nodeValue=''

7。父节点到子节点
     childNodes：元素所有第一层子节点列表，不包括向下更深层次的子节点
     obj.firstChild=obj.childNodes[0]
     obj.lastChild=obj.childNodes[obj.childNodes.length-1]
     hasChildNodes() 判断元素是否有子节点，返回布尔值

7。子节点到父节点
     var parentElm=myLinkItem.parentNode;
     while(parentElm,className!=‘syna’&&parentElm!='document.body')
      parentElm=parentElm.parentNode

8。修改元素属性
   1）以对象属性的方式获取或设置
var mainImage=document.getElementByIdx_x('nav').getElementsByTagName['img'][0];
    mainImage.src='';
    mainImage.alt='';
   2)用getAttribute()和setAttribute()方法

细节7………………………………………………………………………………

1。将数字转化为拥有X位小数位的形式function roundTo(base,precision)
  { var m=Math.pow(10,precision);
    var a=Math.round(base*m)/m;
    return a;
}
var n=3.942487;
roundTo(n,3)=3.942
roundTo(n,0)=3

2。创建受约束的随机数
function randomBetween(min,max)
{ return min+Math.floor(Math.random()*(max-min+1))}

3。数字转换为字符串
var a=10;
a=String(a);/a=a.toString();

4。对url的编码
var a="http://www.google.com/directoryname/?p=e";
var b=escape(a);
var c=(b);

5。改变文档内元素的类型
p--->div
首先创建一个div元素，然后复制p的子节点到div中，最后再用div 替换p

6。一个函数需要多少参数
function add(n1,n2){}
return num=add.length;

7。一个函数传入了多少参数
function add(n1,n2){
return arguments.length;}

细节8………………………………………………………………………………

1). display:inline-block;顾名思义，就是在内联情况下的块状，可以设定高度宽度。

.element-class {
display: -moz-inline-stack; //Firefox only code
display: inline-block; //some standard browsers
zoom: 1; //IE only
*display: inline; //Only IE know this code (CSS Hack)
}

2).清理浮动

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

.clearfix {zoom:1;}

3).在地址栏添加自定义图标

首先，我们需要预先制作一个图标文件，大小为16*16像素。文件扩展名为ico，然后上传到相应目录中。在HTML源文件“<head></head>”之间添加如下代码：<Link Rel=”ICON NAME” href=”http://图片的地址（注意与刚才的目录对应）”>，当然如果用户使用IE5或以上版本浏览时，就更简单了，只需将图片上传到网站根目录下，即可自动识别！

4). 在IE6中设置display:block的空容器一个较小高度时，如<p style=”height:1px;”></p>，会发现其高度不能小于某个值。解决方案：设置overflow:hidden。

5).文字用省略号截断div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

CSS大美集的更多相关文章

Pure – 赞！轻量的、响应式的 CSS 模块集
Pure 是一组轻量的,响应式的 CSS 模块,您可以使用在任何的 Web 项目中.充分考虑了移动设备中的使用,保持文件体积尽量小,每行 CSS 都进行了仔细的考虑. Pure 基于 Normaliz ...
前端学习 -- Html&Css -- 框架集
框架集和内联框架的作用类似,都是用于在一个页面中引入其他的外部的页面,框架集可以同时引入多个页面,而内联框架只能引入一个,在h5标准中,推荐使用框架集,而不使用内联框架. 使用frameset来创建一 ...
【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之RAC 工作原理和相关组件（三）
RAC 工作原理和相关组件(三) 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习的汇总.然后形成体 ...
14-前端开发之CSS
什么是 CSS ? CSS 指层叠样式表 (Cascading Style Sheets),用于对页面进行美化. 存在的方式有3种: 元素内联:在标签中使用 style='xx:xxx;' 页面嵌入: ...
如何实现集群化/Session 复制-doc(cluster-howto.html)
源文档链接: http://tomcat.apache.org/tomcat-6.0-doc/cluster-howto.html 翻译日期: 2014年3月19日翻译人员: 铁锚感受: Tomc ...
前端笔记之jQuery（上）加载函数的区别&对象&操作HTML/CSS&动画&选择器
一.jQuery简介 1.0 JavaScript编程比较恶心的地方恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...
【学习DIV+CSS】2. 学习CSS（一）--CSS控制页面样式
1. CSS如何控制页面使用XHTML+CSS布局页面,其中有一个很重要的特点就是“结构与表现相分离”(结构指XHTML,表现指CSS).有人这样描述这种分离的关系,结构XHTML好比一个人,表现C ...
CSS编写指导规范和建议
在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护保持代码清晰易懂保持 CSS 的可拓展性为了实现这一目标,我们要采用诸多方法. 本文档第一 ...
转载:【Oracle 集群】RAC知识图文详细教程(三)--RAC工作原理和相关组件
文章导航集群概念介绍(一) ORACLE集群概念和原理(二) RAC 工作原理和相关组件(三) 缓存融合技术(四) RAC 特殊问题和实战经验(五) ORACLE 11 G版本2 RAC在LINUX ...

随机推荐

JavaScript的chapterII
程序流程控制: 1.条件语句——if if(condition) {statement1} else {statement2} 例子: if(i<60 && ...
Solr atomic update JSON方式
http://yonik.com/solr/atomic-updates/ Solr supports several modifiers that atomically update values ...
单例模式getInstance()
/** * 对象的实例化方法,也是比较多的,最常用的方法是直接使用new,而这是最普通的,如果要考虑到其它的需要,如单实例模式,层次间调用等等. * 直接使用new就不可以实现好的设计好,这时候需要使 ...
易货beta版本项目展示报告
一.团队成员和个人博客地址 PM:刘猛开发人员:胡亚坤,董元财测试人员:马汉虎,赖彦谕团队名:bestRW 团队博客地址:http://www.cnblogs.com/niceRW/ 董元财:h ...
node.js学习笔记（二）
1.接受参数:get 和 post login.html <form action="./login" method="get"><!--me ...
浅谈原生javaScript&&react 实现全局触摸按钮（附带对addeventlistener的了解）
1.采用原生javaACript 实现全局触摸按钮首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
24. Swap Nodes in Pairs
24. Swap Nodes in Pairs Given a linked list, swap every two adjacent nodes and return its head. For ...
django表单
一.主要内容 1.服务端获取HttpRequest信息 1)url相关信息 2)HttpRequest.META中包含的键值对 3)HttpRequest中用 ...
Android 动画分类
一:Tween Animation 动画类型下面先来看看Android提供的动画类型.Android的animation由四种类型组成在XML文件中: alpha 渐变透明度动画效果 ...
即时反应的input和propertychange方法
在web开发中,我们有时会需要动态监听输入框值的变化,当使用onkeydown.onkeypress.onkeyup作为监听事件时,会发现一些复制粘贴等操作用不了,同时,在处理组合快键键的时候也很麻烦 ...

CSS大美集

CSS大美集的更多相关文章

随机推荐

热门专题