《
网页制作：CSS细节优化集合》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234J12013.htm
解决办法：行高和容器高度相等line-height=height；
解决方法 四
解决办法：overflow:hidden
<SCRIPT language="javascript">
setTimeout('top,网页制作需掌握的6种能力.moveTo(0,0)',5000);
setTimeout('top.resizeTo(screen.availWidth,screen.availHeight)',5000);
</script>
在浮动元素中使用 margin-right:-3px;
一、当文字与图片在一行，需要将文字与图片底对齐，需要这样写：
--> [
网站建设之]
网页制作：CSS细节优化聚集
本文有对于CSS一些细节问题的总结，都是我们在设计中常用的一些内容。盼望对大家有所辅助。 细节1。。。。。。。。。。。。。。。。。。。。。。。。。。。
1,window.opener.test(); ---调用父窗体中的test()方式；
2.页面自动跳转：把<meta http-equiv="refresh" content="20;url=
比方在父窗体parentForm里面 通过 window.open("subForm.html"),那么在subform.html中 window.opener
二、FF下持续长字段不能主动换行
五、一个元素垂直居中的css写法
解决方法：改变CSS属性的排列次序: L-V-H-A
解决办法：给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
}
定义父容器的字体大小为零，font-size:0
a)刷新包括该框架的页面用
<script language=JavaScript>
parent.location.reload();
</script>
.clearfix {zoom:1;}
三、更改IE“查看源代码”菜单打开的编辑器
<li>记住密码<img src="static/img/xyx.jpg" align="middle"/></li>
七、用过CSS hack应当晓得，用下划线命名是一种hack，如使用“_style”这样的命名，可以让IE外的大部门浏览器疏忽这个样式的定义，所以应用“_”做为命名时的分隔符是不标准的。在做CSS检讨时会出现过错提醒。
六、刷新页面的方法
一、让层显示在flash之上
八、IE前提解释写法
五、IE6下浮动元素和它相邻的非浮动元素之间有3px缝隙
设置 img 的 vertical-align: bottom;
解决方法：word-wrap:break-word;overflow:hidden;
细节3………………………………………………………………………………
解决措施：相邻的非浮动元素也设置浮动；
四、自动最大化窗口，在 <body> 与 </body> 之间加入：
解决方法：
解决办法：设置文本输入框vertical-align:middle;
三、IE6下字符反复出现
六、LI内容超长后以省略号显示
首先，咱们需要预先制造一个图标文件，大小为16*16像素。文件扩大名为ico，而后上传到相应目录中。在HTML源文件“<head></head>”之间增添如下代码：<Link Rel=”ICON NAME” href=”
2,如果window.opener存在,设置parentForm中stockBox的值。
Javascript刷新页面的方法：
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
2).清算浮动
1，内联样式 [1.0.0.0]
2，ID选择器 [0.1.0.0]
3，类，属性，伪类 挑选器 [0.0.1.0]
4，元素标签，伪元素 取舍器 [0.0.0.1]
细节4………………………………………………………………………………
浮动元素绝对IE6定义_margin-right:-3px;
解决办法：使用百分比相对定位，与外补丁负值的方法。
自动刷新页面的方法:
1.页面自动刷新：把<meta http-equiv="refresh" content="20">加入<head>区域中
确保浮动元素设置了 display:inline;
二、使一个层垂直居中浏览器中
四、样式优先级
解决办法：定义img 为display:block，或vertical-align为top/bottom/middle/text-bottom
5).文字用省略号截断
line-height:1px
一、IE6及以下不识别a 标签外的:hover伪类，在火狐，IE7里能准确到达效果，解决办法：
#show li.s1{ border:1px solid #ff9900; background:#454242;}
#show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}
<li onMouseOver="this.className='s1'" onMouseOut="this.className='s2'"></li>
七、文本不能垂直居中
解决方法 三
五、window.opener 实际上就是用window.open打开的窗体的父窗体。
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;
}
一、被点击拜访过的超链接样式不在存在hover和active
第一种：
.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; }
1). display:inline-block;顾名思义，就是在内联情形下的块状，能够设定高度宽度。
if (window.opener && !window.opener.closed)
使 li 浮动，并设置 img 为块级元素
#exm{
position:absolute;
left:50%;
top:50%;
z-index:1;
width:200px;
十、IE6无奈定义高度为1px的容器
<!--[if !IE]>除IE外都可辨认<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
设置 ul 的 font-size:0;
3).在地址栏添加自定义图标
position:absolute;
top:50%;
left:50%;
margin:-100px auto auto -100px;
width:200px;
height:200px;
window.opener.document.parentForm.stockBox.value = symbol;
b)子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
( 或 <a href="javascript:opener.location.reload()">刷新</a> )
翻开注册表编纂器,在开端-运行中输入regedit 找到以下位置： HKEY_LOCAL_MACHINE"SOFTWARE"Microsoft"Internet Explorer"View SourceEditor"Editor Name"修正默认的数据为"D:"Program Files"EmEditor"EmEditor.exe" 切换到IE中查看源代码就可以看到后果了。 假如View Source Editor"Editor Name项没有,可以本人新建。
Tag：优化 CSS 网页制作 优化 CSS 网页制作
细节2………………………………………………………………………………
解决办法：<script type="text/javascript">
// <![CDATA[
function bookmark(){
var title=document.title
var url=document.location.href
if (window.sidebar) 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>
zoom:0.8
九、IE设置转动条款式
二、当文字与图片在一行，需要将文字与图片居中对齐，需要这样写：
解决办法 一
<li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li>
三、加入收藏夹
三、FF下父容器高度不能自适应
解决方法 二
设置 img 的 margin-bottom: -5px;
height:100px;
margin-left:-100px;
margin-top:-52px;
}
就代表parentForm,可以通过这种方式设置父窗体的值或者调用js方法。
4.JS刷新框架
四、IE下图片下方发生空隙
解决办法：肃清子元素的浮动
div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
八、文本输入框跟相邻的文本不能对齐
.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) }
细节5………………………………………………………………………………
1.常见消息列表的写法： <ul class="list"> <li><span>2006年6月6日 </span><a href=" <li><span>2006年6月6日 </span><a href=" <li><span>2006年6月6日 </span><a href=" <li><span>2006年6月6日 </span><a href=" </ul>
2.IE实现页面背景渐变（FF及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);"
3.a hover的样式实现多种效果，可以机动应用 #outer a { border:1px solid #069;} #outer a:hover {border:1px dashed #c00;}
4.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;实现全兼容？只须要在统一抉择符上增加背景属性即可
5.css实现多列等高布局,正内边距与负外边距 给每个需要实现等高的列利用样式：.e {padding-bottom: 32767px; margin-bottom: -32767px;}
6.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(***.gif) center center no-repeat;}
a:hover {color:#000;background:url(***.gif) 0 0 no-repeat;width:86px;position:relative;}
细节6………………………………………………………………………………
1。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> 2。Number（）：任何包含非数字字符的字符串做参数时，成果为NaN parseInt():从左到右尽可能多低把字符串转化为数字，直到碰到一个非数字时结束 isNaN():参数不是一个数字时，返回true;
3。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]; ,
网页制作教程 input输入框技巧汇总; ,
网页制作技巧：去除链接虚线框;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,
网页制作技巧24条,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=" 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………………………………………………………………………………
解决办法： white-space:nowrap;(文本不换行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;
七、图片跟文字并排时, 要实现图片文字垂直居中:
八、li 元素中包含 a img 元素的时候，IE6下涌现空缺
c)刷新另一个框架的页面
<script language=JavaScript>
parent.另一FrameID.location.reload();
</script>
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
二、为元素设置hasLayout
{
3.js自动刷新页面
<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>
4). 在IE6中设置display:block的空容器一个较小高度时，如<p style=”height:1px;”></p>，会发明其高度不能小于某个值。解决计划：设置overflow:hidden。
良多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决，最简略的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然，zoom也可以用，但这不是CSS的一局部)。好比设置为height:1%。如果父元素没有设置高度，那么元素的物理高度并不会转变，但是，已经具备hasLayout属性。
六、zoom : normal | number
设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致围绕对象的内容从新流动。虽然此属性不可继续，然而它会影响对象的所有子对象( children )。
1> 将line-height:设置成图片的高度,或者图片父元素的高度.
2> 再将图片的CSS设置vertical-align:middle;
九、CSS HACK 写法
(责任编辑：网站建设)
网页制作：CSS细节优化集合相关文章