给大家带来网页计划技能代码:HTML代码、CSS代码和javascript代码
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。破洛洛文章简介：网页计划技能代码:HTML代码、CSS代码和javascript代码.
细节1………………………………………………………………………………
1、当笔墨与图片在一行，必要将笔墨与图片底对齐，必要如许写：
<li>记着暗码与</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前提正文写法
<!-->除IE外都可辨认<!-->
<!-->一切的IE可辨认<!-->
<!-->只要IE5.0能够辨认<!-->
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;}
破洛洛文章简介：网页计划技能代码:HTML代码、CSS代码和javascript代码.
细节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，内联款式
2，ID选择器
3，类，属性，伪类选择器
4，元素标签，伪元素选择器
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;
破洛洛文章简介：网页计划技能代码:HTML代码、CSS代码和javascript代码.
细节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
破洛洛文章简介：网页计划技能代码:HTML代码、CSS代码和javascript代码.
细节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>
破洛洛文章简介：网页计划技能代码:HTML代码、CSS代码和javascript代码.
细节5………………………………………………………………………………
1.罕见旧事列表的写法：
<ulclass="list">
<li><span>2006年6月6日</span><ahref="http://www.52css.com/#">旧事题目01</a></li>
<li><span>2006年6月6日</span><ahref="http://www.52css.com/#">旧事题目02</a></li>
<li><span>2006年6月6日</span><ahref="http://www.52css.com/#">旧事题目03</a></li>
<li><span>2006年6月6日</span><ahref="http://www.52css.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;}
破洛洛文章简介：网页计划技能代码:HTML代码、CSS代码和javascript代码.
细节6………………………………………………………………………………
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>
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).firstchild.nodeValue=
7。父节点到子节点
childNodes：元素一切第一层子节点列表，不包含向下更深条理的子节点
obj.firstChild=obj.childNodes
obj.lastChild=obj.childNodes
hasChildNodes()判别元素是不是有子节点，前往布尔值
7。子节点到父节点
varparentElm=myLinkItem.parentNode;
while(parentElm,className!=‘syna’&&parentElm!=document.body)
parentElm=parentElm.parentNode
8。修正元素属性
1）以工具属性的体例猎取或设置
varmainImage=document.getElementByIdx_x(nav).getElementsByTagName;
mainImage.src=;
mainImage.alt=;
2)用getAttribute()和setAttribute()办法
破洛洛文章简介：网页计划技能代码:HTML代码、CSS代码和javascript代码.
细节7………………………………………………………………………………
1。将数字转化为具有X位小数位的情势functionroundTo(base,precision)
{varm=Math.pow(10,precision);
vara=Math.round(base*m)/m;
returna;
}
varn=3.942487;
roundTo(n,3)=3.942
roundTo(n,0)=3
2。创立受束缚的随机数
functionrandomBetween(min,max)
{returnmin+Math.floor(Math.random()*(max-min+1))}
3。数字转换为字符串
vara=10;
a=String(a);/a=a.toString();
4。对url的编码
vara="http://www.google.com/directoryname/?p=e";
varb=escape(a);
varc=(b);
5。改动文档内元素的范例
p--->div
起首创立一个div元素，然后复制p的子节点到div中，最初再用div交换p
6。一个函数必要几参数
functionadd(n1,n2){}
returnnum=add.length;
7。一个函数传进了几参数
functionadd(n1,n2){
returnarguments.length;}
破洛洛文章简介：网页计划技能代码:HTML代码、CSS代码和javascript代码.
细节8………………………………………………………………………………
1).display:inline-block;望文生义，就是在内联情形下的块状，能够设定高度宽度。
.element-class{
display:-moz-inline-stack;//Firefoxonlycode
display:inline-block;//somestandardbrowsers
zoom:1;//IEonly
*display:inline;//OnlyIEknowthiscode(CSSHack)
}
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>”之间增加以下代码：<LinkRel=”ICONNAME”href=”http://图片的地点（注重与方才的目次对应）”>，固然假如用户利用IE5或以上版本扫瞄时，就更复杂了，只需将图片上传到网站根目次下，便可主动辨认！
4).在IE6中设置display:block的空容器一个较小高度时，如<pstyle=”height:1px;”></p>，会发明其高度不克不及小于某个值。办理计划：设置overflow:hidden。
5).笔墨用省略号截断
div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</p>
提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 学Dreamweaver技术的过程其实是一个增加信心的过程。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.
页:
[1]