来谈谈：网页制造：CSS细节优化汇合

只看该作者 · 发表于 2015-1-15 23:14:23

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
<divclass="start">细节1………………………………………………………………………………

1、当笔墨与图片在一行，必要将笔墨与图片底对齐，必要如许写：
<li>记着暗码翻开注册表编纂器,在入手下手-运转中输出regedit<LIstyle="BORDER-TOP-WIDTH:0px;PADDING-RIGHT:0px;PADDING-LEFT:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;PADDING-BOTTOM:0px;MARGIN:0px0px0px30px;PADDING-TOP:0px;LIST-STYLE-TYPE:decimal;BORDER-RIGHT-WIDTH:0px">找到以下地位：HKEY_LOCAL_MACHINE"SOFTWARE"Microsoft"InternetExplorer"ViewSourceEditor"EditorName"修正默许的数据为"D:"ProgramFiles"EmEditor"EmEditor.exe"<LIstyle="BORDER-TOP-WIDTH:0px;PADDING-RIGHT:0px;PADDING-LEFT:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;PADDING-BOTTOM:0px;MARGIN:0px0px0px30px;PADDING-TOP:0px;LIST-STYLE-TYPE:decimal;BORDER-RIGHT-WIDTH:0px">切换到IE中检察源代码就能够看到效果了。

假如ViewSourceEditor"EditorName项没有,能够本人新建。
4、主动最年夜化窗口，在<body>与</body>之间到场：
<SCRIPTlanguage="javascript">
setTimeout(top.moveTo(0,0),5000);
setTimeout(top.resizeTo(screen.availWidth,screen.availHeight),5000);
</script>

5、window.opener实践上就是用window.open翻开的窗体的父窗体。
好比在父窗体parentForm内里经由过程window.open("subForm.html"),那末在subform.html中window.opener
就代表parentForm,能够经由过程这类体例设置父窗体的值大概挪用js办法。
1,window.opener.test();---挪用父窗体中的test()办法；
2,假如window.opener存在,设置parentForm中stockBox的值。
if(window.opener&&!window.opener.closed)
{
window.opener.document.parentForm.stockBox.value=symbol;
}
6、革新页面的办法
Javascript革新页面的办法：
1history.go(0)
2location.reload()
3location=location
4location.assign(location)
5document.execCommand(Refresh)
6window.navigate(location)
7location.replace(location)
8document.URL=location.href

主动革新页面的办法:
1.页面主动革新：把<metahttp-equiv="refresh"content="20">到场<head>地区中
2.页面主动跳转：把<metahttp-equiv="refresh"content="20;url=http://www.poluoluo.com">到场<head>地区中
3.js主动革新页面
<scriptlanguage="JavaScript">
functionmyrefresh()
{
window.location.reload();
}
setTimeout(myrefresh(),1000);//指定1秒革新一次
</script>
4.JS革新框架
a)革新包括该框架的页面用
<scriptlanguage=JavaScript>
parent.location.reload();
</script>
b)子窗口革新父窗口
<scriptlanguage=JavaScript>
self.opener.location.reload();
</script>
(　或　<ahref="javascript:opener.location.reload()">革新</a>)
c)革新另外一个框架的页面
<scriptlanguage=JavaScript>
parent.另外一FrameID.location.reload();
</script>

7、用过CSShack应当晓得，用下划线定名是一种hack，如利用“_style”如许的定名，可让IE外的年夜部分扫瞄器疏忽这个款式的界说，以是利用“_”做为定名时的分开符是不标准的。在做CSS反省时会呈现毛病提醒。

8、IE前提正文写法




9、CSSHACK写法

第一种：
.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………………………………………………………………………………

1、IE6及以下不辨认a标签外的:hover伪类，在火狐，IE7里能准确到达效果，办理举措：
#showli.s1{border:1pxsolid#ff9900;background:#454242;}
#showli.s2{border:1pxsolid#D9D8D8;background:#312E2E;}
<li></li>

2、为元素设置hasLayout
良多IE6（或IE7）的成绩能够用设置hasLayout值的办法来办理，最复杂的给元素设置hasLayout值的办法是给加上CSS的height或width(固然，zoom也能够用，但这不是CSS的一部分)。好比设置为height:1%。假如父元素没有设置高度，那末元素的物理高度其实不会改动，可是，已具有hasLayout属性。

3、IE6下字符反复呈现
确保浮动元素设置了display:inline;
在浮动元素中利用margin-right:-3px;

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

5、一个元素垂直居中的css写法
#exm{
position:absolute;
left:50%;
top:50%;
z-index:1;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-52px;
}

6、zoom:normal|number
设置或检索工具的缩放比例。设置或变动一个已被呈递的工具的此属性值将招致围绕工具的内容从头活动。固然此属性不成承继，可是它会影响工具的一切子工具(children)。

7、图片跟笔墨并排时,要完成图片笔墨垂直居中:
1>将line-height:设置成图片的高度,大概图片父元素的高度.
2>再将图片的CSS设置vertical-align:middle;

8、li元素中包括aimg元素的时分，IE6下呈现空缺
办理办法一
使li浮动，并设置img为块级元素
办理办法二
设置ul的font-size:0;
办理办法三
设置img的vertical-align:bottom;

办理办法四
设置img的margin-bottom:-5px;

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

1、被点击会见过的超链接款式不在具有hover和active
办理办法：改动CSS属性的分列按次:L-V-H-A

2、FF下一连长字段不克不及主动换行
办理办法：word-wrap:break-word;overflow:hidden;

3、FF下父容器高度不克不及自顺应
办理举措：扫除子元素的浮动

4、IE下图片下方发生清闲
办理举措：界说img为display:block，或vertical-align为top/bottom/middle/text-bottom
界说父容器的字体巨细为零，font-size:0

5、IE6下浮动元素和它相邻的非浮动元素之间有3px清闲
办理举措：相邻的非浮动元素也设置浮动；
浮动元素绝对IE6界说_margin-right:-3px;

6、LI内容超长后以省略号显现
办理举措：white-space:nowrap;(文本不换行)text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;

7、文本不克不及垂直居中
办理举措：行高和容器高度相称line-height=height；

8、文本输出框和相邻的文本不克不及对齐
办理举措：设置文本输出框vertical-align:middle;

9、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;
}

10、IE6没法界说高度为1px的容器
办理举措：overflow:hidden
zoom:0.8
line-height:1px

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

1、让层显现在Flash之上
办理举措：给FLASH设置通明<paramname="wmode"value="transparent"/>大概<paramname="wmode"value="opaque"/>

2、使一个层垂直居中扫瞄器中
办理举措：利用百分比相对定位，与外补钉负值的办法。
position:absolute;
top:50%;
left:50%;
margin:-100pxautoauto-100px;
width:200px;
height:200px;

3、到场保藏夹
办理举措：<scripttype="text/javascript">
//<![CDATA[
functionbookmark(){
vartitle=document.title
varurl=document.location.href
if(window.sidebar)window.sidebar.addPanel(title,url,"");
elseif(window.opera&&window.print){
varmbm=document.create_r_rElement_x(a);
mbm.setAttribute(rel,sidebar);
mbm.setAttribute(href,url);
mbm.setAttribute(title,title);
mbm.click();}
elseif(document.all)window.external.AddFavorite(url,title);
}
//]]>
</script>
<ahref="javascript:bookmark()">到场保藏夹</a>

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

1.罕见旧事列表的写法：
<ulclass="list">
<li><span>2006年6月6日</span><ahref="http://www.poluoluo.com/#">旧事题目01</a></li>
<li><span>2006年6月6日</span><ahref="http://www.poluoluo.com/#">旧事题目02</a></li>
<li><span>2006年6月6日</span><ahref="http://www.poluoluo.com/#">旧事题目03</a></li>
<li><span>2006年6月6日</span><ahref="http://www.poluoluo.com/#">旧事题目04</a></li>
</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.ahover的款式完成多种效果，能够天真使用
#outera{border:1pxsolid#069;}
#outera:hover{border:1pxdashed#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:normal12px/25px"宋体";}
body{background:#f8f8f8;}
ul{list-style:none;width:300px;height:25px;margin:20pxauto;}
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)centercenterno-repeat;}
a:hover{color:#000;background:url(***.gif)00no-repeat;width:86px;position:relative;}

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

<SPANclass=Apple-style-spanstyle="COLOR:rgb(70,70,70);FONT-FAMILY:simsun"><SPANstyle="WORD-BREAK:normal;FONT-FAMILY:Tahoma,Verdana;WORD-WRAP:normal"><SPANclass=Apple-style-spanstyle="FONT-FAMILY:simsun">1。innerText：从肇端地位到停止地位的内容，不包括标签innerHTML
outerHTML:包括innerHTML和标签
<divid="test"><span>test1</span>test2</div>
test.innerText:test1test2
test.innerHTML:<span>test1</span>test2
test.outerHTML:<divid="test"><span>test1</span>test2</div>

<DIVstyle="FONT-SIZE:14px;LINE-HEIGHT:21px">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()必要等文档加载终了后才干猎取到

只看该作者 · 发表于 2015-1-17 20:53:04

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

只看该作者 · 发表于 2015-1-22 08:04:28

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-1-31 05:11:57

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-2-6 17:41:37

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-2-17 23:39:03

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

只看该作者 · 发表于 2015-3-6 00:14:08

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

只看该作者 · 发表于 2015-3-12 16:45:47

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-3-20 01:12:42

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来谈谈：网页制造：CSS细节优化汇合

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子