欢迎加入EUCMS官方QQ交流群,与更多EUCMS用户一起讨论,共同发财!

QQ群:1222386
> >> >>正文
div+css和javascript武艺和使用侧重事项
2020-12-30 1003 收藏
比来公司要求每一个同事都把新学到的和之前总结到的阅历都共享到公司网站下去
故此我这里给大家共享一些div+css使用武艺,包罗javascript使用武艺
好多是很经常使用的一些武艺,可以只需技术职员才干看的懂了。

以下是武艺内容:

IE:<param name="wmode" value="opaque" />
FF:<embed wmode="opaque" />

和flash透明一样:
IE:<param name="wmode" value="transparnet" />
FF:<embed wmode="transparnet" />


ie6中的双边bug处置案例:display:inline

js取得css中的float属性:(ie中用cssFloat,FF中用styleFloat)

ie中消除挑选---onselectstart=return false
ff中消除挑选---css中界说:* {-moz-user-select:none}

下面案例相比ie和ff中document.getElementsByName()的区别:
<input type="radio" name="aa" />
<input type="radio" name="aa" />
<input type="radio" name="aa" />
<div name="aa"></div>
<div id="aa"></div>
<div id="aa"></div>
<script type="text/javascript">
<!--
window.onload=function(){
    alert(document.getElementsByName("aa").length)
}
//-->
</script>----------ie中取得的是id的obj(但包罗name为radio checkbox等项),ff中取得的只是name项



这中思惟蛮不错的:
var w=100
low=true
if(low=true){
    w--
}
if(w<=10){
    w++
    low=false
}
if(w>=100){
    w--
    low=true
}
if(low=false){
    w++
}
js弹出链接文本内容
<script language="javascript">
function altername(evt){
    evt=evt?evt:window.event
    if(document.all){
        alert(evt.srcElement.innerHTML)
    }
    else{
        alert(evt.target.innerHTML)
    }
}
window.onload=function(){
var obj=document.getElementsByTagName("a")
for(i=0;i<obj.length;i++){
    obj[i].onmou搜索引擎优化ver=altername
}
}
</script>
<a href="">百度</a><br>
<a href="">谷歌</a><br>
<a href="">blueidea</a><br>
<a href="">crsky</a>
//主要视察event.srcElement和evt.target


js用for in 遍历全部数组:
for(i in aa){
    document.write(i)
}
js用toLocaleString()取得全部时分:
案例:
var qq=new Date()
qq.toLocaleString()
//或写法以下:
var qq=new Date()
var nian=qq.getFulllYear()
var yue=qq.getMonths()
var ri=qq.getDate()
var xingqi=qq.getDay()
var hour=qq.getHours()
var minute=qq.getMinutes()
var second=qq.getSeconds()
var millisecond=qq.getMilliseconds()
数组的界说 :
一维:
方案1:
var aa=new Array()
aa[0]=""
aa[1]=""
aa[3]=""
方案2:
var aa=new Array("","","")
方案3:
aa=["","",""]

二维:
var aa=["0","1","2"]
aa[0][0]=""
aa[0][1]=""
aa[1][0]=""
aa[1][1]=""
aa[2][0]=""
aa[2][1]=""

asp中界说数组:
dim aa(3)
aa(0)=""
aa(1)=""
aa(2)=""

IE:attachEvent
    例如在body中单击的时间弹出”你好“,咱们可以这么做
首先界说一个函数:
    function alert_hello(){
        alert("你好")
    }
绑定:
    document.body.attachEvent("onclick",alert_hello)
需求侧重的是:
    1:在绑定的时间必须不克不及何等写:alert_hello()
    2:最幸亏外部界说alert_hello这个函数
若是在外部界说则:document.body.attachEvent("onclick",function(){"alert('hello')"})

FF:addEventListener
    一样达到在IE中的效果的时间何等做便可:
界说:
    function alert_hello(){
        alert("你好")
    }
绑定:
    document.body.addEventListener("click",alert_hello,false)

以下为一个工具绑定:(ff和ie中都需求:div必须写在前面,若是是ie,这个时间把div放在前面的话,可以在声明语言的时间加入defer)
<div id="xx">hello</div>
<script language="javascript">
function aa(){
       alert("hello")
}
document.getElementById("xx").addEventListener("click",aa,false)
</script>

IE和FF中的区别:
1:若是要实验的函数不止一个,例如:
        document.body.attachEvent("onclick",aa1)
        document.body.attachEvent("onclick",aa2)
        document.body.attachEvent("onclick",aa3)
    即:body要同时绑定aa1,aa2,aa3这个三个函数,
这个时间,IE和FF中的诠释循序是纷歧样的,
    ie:aa1,aa2,aa3
    ff:aa3,aa2,aa1
2:在ie中是要写全时分名:例如,onclick,而ff中只需写click便可。。。
3:ie中绑定的时间比ff少一个参数,区别以下代码:
<style type="text/css">
#aa {
    width:500px;
    height:500px;
    background:red;
}
#qq {
    width:200px;
    height:200px;
    background:black;
}
</style>
<div id="aa">d
<div id="qq" >d</div>
</div>
<script language="javascript">
function al(){
       alert("hello")
}
document.getElementById("aa").addEventListener("click",al,true)
//尝尝false和true的区别
</script>



HTML页面规范排版:
body.style.padding---页面中body的padding(例如在body的style中写:padding:20px)
body.style.border---页面中body的border(例如在body的style中写:border:20px)
body.clientLeft---页面中body的(左)border宽度
body.clientTop---页面中body的(上)border宽度
body.clientWidth---页面中body的宽度
body.offsetWidth---页面中body的宽度+边框长度(即body.clientWidth+边框长度)
body.scrollWidth---页面中body泛起转动条时间的现实长度,当没有转动条的时间body.scollWidth和body.clientWidth是相等的
(IE和FF中二者是相反的看法)
body.clientHeight  //同上
body.offsetHeight  //同上
body.scrollHeight //同上

div.style.border---div中的border(有两个参数:width,height)
div.style.padding---div中padding的值
div.style.left---div距离页面左边的距离(这个参数有三个近似的写法:详细以下:(先要明确.style.left前往的值是一个字符串,若是没有,前往空串)
1:div.style.posLeft---就是将left的值转变为数值类型,而且是浮点型
2: div.style.pixelLeft---是数值,是将left的值(若是是空串则赋为0)转变为像素值
    侧重;parseInt(posLeft)==pixelLeft
3: div.offsetLeft---前往工具距离窗口左边的距离(带边框+padding)
ff中是没有1,2两个参数的,要使用的话普通同一用offsetLeft
offsetLeft一般常使用于取值,而left则使用于赋值计算
例如:先经由历程offsetLeft取到div距离页面的距离x,然后在经由历程div.style.left=x+10+"px"将div往右移动10个PX,而在现实使用的时间必须要加入"px"(由于left的前往值为字符串)
)
div.style.Top //同div.style.Left用法不异
div.offsetLeft//同div.offsetTop用法不异

侧重:div.style.left是div距离页面左边的距离(不附带padding)
      div.offsetLeft是div距离页面左边的距离(附带padding)

div.clientTop---前往div(上)border的高度
div.clientLeft---前往div(左)border的宽度

div.clientWidth---前往div宽度(包罗padding,不包罗border和转动条的宽度)
div.clientHeight---前往div高度(包罗padding,不包罗border和转动条的高度度)

div.scrollWidth---前往div中现实的高度(发动弹的高度)
div.scrollHeight---前往div中现实的高度(发动弹的高度)
---详细剖析见:
http://images13.51.com/18/a/f8/40/sarten/1192242772_0.70754000.jpg



IE:setCapture和releseCapture
FF:captureEvents和releaseEvents
setCapture主假定为某个工具或页面绑定一个事务,这个时分的主要目标就是为了能够在全部窗口下都可以起做用:比以下面的代码:
<script type="text/javascript" defer>
    document.getElementById("xx").setCapture()
</script>
<div id="xx">hello</div>
何等便可以在页面中任何部位单击一次便可以弹出hello。。。

ff下和ie下的相识纷歧样,可以何等相识:(用上案例教学)
ie是对某个特定工具xx中止全屏捕捉,当设定setCapture时间,便可以在全屏捕捉到xx。。。单击的时间也会实验xx设定的单击实验的事务(函数)。。。可以全屏取得鼠标的位置

而ff中只是window.captureEvents...熏染域是对全部页面(只是可以全屏取得鼠标的位置)



creatElement(为页面建设工具)
appendChild(为页面使用某个建设的工具)
案例1:在页面中建设一个table要求有一个单元格,一行,一个table文字
<script language="javascript" defer>
var tb=document.createElement("table")
var tbd=document.createElement("tbody")
var tr=document.createElement("tr")
var td=document.createElement("td")
var txt=document.createTextNode("table")
    td.appendChild(txt)
    tr.appendChild(td)
    tbd.appendChild(tr)
    tb.appendChild(tbd)
    document.body.appendChild(tb)//对应下面两行
</script>
<div id="tt"></div>//在指定的div中使用:document.getElementById("tt").appendChild(tb)

案例2:建设一个input工具radio,默许选中
<script type="text/javascript" defer>
var pt=document.createElement("input")
pt.type="radio"//写在工具建设以后
document.body.appendChild(pt)
pt.checked="checked"//pt.setAttribute("checked",true)
</script>
text/radio/checkbox/file/hidden/submit/button/reset的建设都是和上例差不多,
需求侧重的是:必须将.type写在紧跟工具建设以后,然后使用,在以后设置属性(也可以用setAttibute)

案例3:建设一个select工具
<script lanuguage="javascript" defer>
var se=document.createElement("select")
se.options[0]=new Option("123","123")
se.options[1]=new Option("456","456")
se.options[2]=new Option("789","789")
document.body.appendChild(se)
se.setAttribute("id","cre_se")
se.onchange=function(){
    alert(se.options[document.getElementById('cre_se').selectedIndex].value)
}
</script>



createPopup:建设一个提示框(也相对一个页面,当popup掉去中心的时间---popup消掉)
<script type="text/javascript" defer>
var pp=window.createPopup()
pp.document.body.style.background="#efefef"
pp.document.body.style.border="1px solid black"
pp.document.body.innerHTML="this is a popup"
pp.show(10,20,250,20,document.getElementById("popup_div"))
</script>
<div id="popup_div" style="width:500px;height:50px;position:absolote;top:50px;left:50px;background:red"></div>


ff下的增加加入收藏夹:
window.sidebar.addpanel("百度","http://www.百度.com","")
ie下的增加加入收藏夹
window.external.addfavorite("http://www.百度.com","百度")


转动到页面指定位置:scrollIntoView()
案例:
<a href="#" id="xx">内容</a><br>
<a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br>
<a href="javascript:document.getElementById('xx').scrollIntoView()">内容</a><br>

相当于:
<a name="top">top</a>
<a href="#top">go_top</a>


createTextRange()//ie专有
案例1:(主要声明:textrange.text和textrange.htmltext的区别)
<script language="javascript" defer>
function test()
{
var rng=document.body.createTextRange()
alert(rng.text)
}
function test1()
{
var rng=document.body.createTextRange()
alert(rng.htmlText)
}
</script>
<input type="button" value="text">
<input type="button" value="htmlText">
//若是为某个工具建设textrange的话,,,text和htmlText是没有区别的
若是是为全部body建设的话是有区别的(text表现文本内容,htmlText把全部页面代码输入)


案例2:取得指定文本框中的选中的文字:只照应第一个文本框
<script language="javascript" defer>
function test()
{
var o = document.getElementById("inp1").createTextRange()//改成inp2的话就不照应了
var r = document.selection.createRange()//为选中的文字建设一个虚礼空间存起来(也是一个工具)
if(o.inRange(r)){//在已建设的textrange中查找range工具(createtextRange.inRange(createRange))
    alert(r.text)//弹出createRange的文本createRange.text
    }
}
</script>
<input id="inp1" type="text" value="1234567890">
<input id="inp2" type="text" value="1234567890">
<input type="button" value="必须">


案例3:点击复制功用:
<script language="javascript">
function copyContent(obj){
    obj.select()
    var cont=obj.createTextRange()
    cont.execCommand("copy")
//或何等写:
//obj.select()
//obj.document.execCommad("copy")
}
</script>
<input type="text" value="what you want to copy !" >

iframe允许布景颜色为透明:
<iframe src="xx.html" allowtransparency="true">
//xx.html中必须何等写:<body bgColor="transparent">

ie:window.eval("ID")//用来取得页面中id的工具,相当于document.getElementById("id")
ff:window.eval("alert('xx')","javascript")//实验js代码,也可以实验asp代码
ie:window.execScript("alert('xx')","javascript")//实验js代码,也可以实验asp代码

文本框不自动提示:
<input type="text" autocomplete="off">

湮没按钮点击时的虚线:
<input type="button" hidefocus="hidefocus" value="按钮">
<input type="button" onfocus="this.blur()" value="按钮">

剧本永不提示堕落:
<script language="javascript">
window.onerror=function(){
    return false
}
</script>

事务工具前往值:
srcElement.returnVlaue="false/true"

经由历程id取得某个工具:
通用:document.getElementById("idname")
ie:window.eval("idname")

经由历程name取得工具
document.getElementsByName("name")

经由历程tagname取得工具
document.getElementsByTagName("tagname")

经由历程事务取得工具:
window.event.srcElement//是一个工具
window.event.srcElement.tagName//取失掉的工具的标署名

父标签:
obj.parentNode()(dom)
obj.parentElement(dhtml)
子工具:
obj.childNodes()

鼠标位置:
1:相对的body位置:
ie:event.clientX  event.clientY
ff:event.clientX  event.clientY

2:相对的body位置:
ie:event.x  event.y
ff:event.pageX  event.pageY

3:相对的鼠标body中停留的位置:
ie:event.offsetX  event.offsetY
ff:event.layerX  event.layerY

4:全部页面相对位置:
screen.x          screen.y

案例:静态取得鼠标在页面中的坐标位置

<script language="javascript">
function movemouse(evt){
    evt=evt?evt:window.event
    var x=evt.clientX
    var y=evt.clientY
document.getElementById("con").innerHTML="x: "+x+"y: "+y
document.getElementById("con").style.left=x+"px"
document.getElementById("con").style.top=y+"px"

}
document.onmousemove=movemouse
</script>
<div id="con" style="position:absolute;height:20px;width:100px;"></div>

近似:静态时分
<script language="javascript">
function aa(){   
    var te=new Date()
    document.body.innerHTML=te.toLocaleString()
    setTimeout("aa()",1000)
}
window.onload=aa
</script>

双击滚屏代码:
<script language="javascript">
scrollTo(0,0)
var st
function scroll_start(){
var x=document.body.scrollTop
window.scroll(0,++x)
st=setTimeout("scroll_start()",10)//不克不及写出var st=...
if(x!=document.body.scrollTop){
stop_scroll()
}
}
function stop_scroll(){
clearTimeout(st)
}
document.onmousedown=stop_scroll
document.ondblclick=scroll_start
</script>



事务按键
event.keyCode
event.shiftKey
event.altKey
event.ctrlKey

页面中鼠标操作:
oncontextmenu//右键
onselectstart//选中
oncopy//复制
onpaste//粘贴
oncut//剪切
ondragstart//拖动

窗体图画
document.images[索引]

窗体元素
document.窗体.elements[索引]

阅读器称谓
document.navigator.appName
document.navigator.plugins

转向制定页面:
window.navigate("")
window.location.href=""


相宜规范的去除链接虚线两种案例:
1:经由历程links(窗体链接)
<script type="text/javascript">
function aa(){
    for(i=0;i<document.links.length;i++){
        document.links[i].onfocus=function(){
            this.blur()
        }
    }
}
window.onload=aa
</script>
2:经由历程链接a工具
<script language="javascript">
aa=function(){
    var obj=document.getElementsByTagName("a")
    for(i=0;i<obj.length;i++){
        obj[i].onfocus=function qq(){
            this.blur()
    }
}
}
window.onload=aa
</script>


文本值改动的时间:
<input type="text" onpropertychange="alert('值改动了')">

窗口的父工具:
window.opener
框架的父工具:
window.parent

给文本增加加入链接:
<script language="javascript" defer>
var text="百度"
text=text.link("http://www.百度.com")
document.write(text)
</script>
////////////////////////////实例:
<script language="javascript" defer>
var pic="<img src=''>"
pic=pic.link("http://www.百度.com")
document.write(pic)
</script>


取得css样式表
document.stylesheets[索引].rules[索引]//取得第几个<style type="text/css"></style>里的第几个样式
document.stylesheets[索引].rules[索引].selectorText//取得css样式称谓
document.stylesheets[索引].rules[索引].style.cssText//取得css样式内容
案例:
<style>
body {color:red}
p {color:blue}
</style>
<style>
span {color:red}
table {color:blue}
</style>
<body >

页面z坐标(z-index)://工具的z-index坐标必须在absolute情形下才干起熏染
案例:
<style type="text/css">
#pagea {
    width:200px;
    height:200px;
    position:absolute;
    left:100px;
    top:100px;
    background:red
}
#pageb {
    width:200px;
    height:200px;
    position:absolute;
    left:200px;
    top:200px;
    background:black;
}
</style>
<script type="text/javascript">
var firstIndex=1
function zIndexChange(obj){
    document.getElementById(obj).style.zIndex=firstIndex
    firstIndex++
}
</script>
<div id="pagea" >页面a</div>
<div id="pageb" >页面b</div>

按住鼠标左键N秒实验:
<script language="javascript">
var timerAl
function al(){
    alert("您按住鼠标2秒没动!请抓紧,谢谢!")
}
document.onmousedown=function(){
    timerAl=setTimeout("al()",2000)//此处必须不克不及加var ,加了表现每次实验的时间都重新声明
}
document.onmouseup=function(){
    clearTimeout(timerAl)
}
</script>

当地完成图画现实:
<script language="javascript">
function getError(){
imgdiv.innerHTML=''
alert("名堂偏差或不存在这个文件")
}
function checkSize(obj){
var w=obj.clientWidth
var h=obj.clientHeight
if(w>164){
obj.width=164
obj.heigth=164/w*h
}
}
function showImg(filesrc){
imgdiv.innerHTML="<img id='tu' src='file:///"+filesrc+"' onerror='getError()' onload='checkSize(this)'>"
}
</script>

<input type="file" size=25 onchange="showImg(this.value)"><br><br><br><br>
<div id="imgdiv" align="center"></div>

表格的相关操作:
1:支配移动表格行:(表非分特殊)
<script language="javascript">
function tb1doTr(obj){
var tr=document.createElement("<tr bgColor='#efefef' onmou搜索引擎优化ver=this.bgColor='#efef00' onmou搜索引擎优化ut=this.bgColor='#efefef' onclick='tb2doTr(this)'></tr>")
var td1=document.createElement("<td align='center'></td>")
var td2=document.createElement("<td align='center'></td>")
var text1=document.createTextNode(obj.cells[0].innerHTML)
var text2=document.createTextNode(obj.cells[1].innerHTML)
td1.appendChild(text1)
td2.appendChild(text2)
tr.appendChild(td1)
tr.appendChild(td2)
document.getElementById("tb2_tbody").appendChild(tr)
document.getElementById("tb1").deleteRow(obj.rowIndex)
}

function tb2doTr(o){
    tr=document.getElementById("tb1").insertRow()
    tr.bgColor="#efefef"
    tr.onmou搜索引擎优化ver=function(){this.bgColor="#efef00"}
    tr.onmou搜索引擎优化ut=function(){this.bgColor="#efefef"}
    tr.onclick=function(){tb1doTr(this)}

    for(i=0;i<o.cells.length;i++){
        var td=tr.insertCell()
        td.innerHTML=o.cells[i].innerHTML
    }
    document.getElementById("tb2").deleteRow(o.rowIndex)
}
</script>

<table cellpadding="0" cellspacing="0" border="1" width="300" id="tb1" style="float:left;text-align:center">
<tr>
    <td bgcolor="#efefef" align="center">行</td>
    <td bgcolor="#efefef" align="center">值</td>
</tr>
<script type="text/javascript">
for(i=1;i<=20;i++){
    document.write("<tr bgColor='#efefef' onmou搜索引擎优化ver=this.bgColor='#efef00' onmou搜索引擎优化ut=this.bgColor='#efefef' onclick='tb1doTr(this)'><td align='center'>第"+i+"行</td><td align='center'>第"+i+"行的值</td></tr>")
}
</script>
</table>

<table cellpadding="0" cellspacing="0" border="1" width="300" id="tb2" style="text-align:center">
<tbody id="tb2_tbody">
<tr>
    <td bgcolor="#efefef" align="center">行</td>
    <td bgcolor="#efefef" align="center">值</td>
</tr>
</tbody>
</table>

2:移动表格行的位置(表格内)


单击文字保管图画:
<iframe height="0" width="0" src="偷拍的.jpg" id="saveImage"></iframe>
<a href="###" >Click Me</a>
//这里万万不克不及写出:document.getElementById('saveImage')


单元格颜色渐退:
<script type="text/javascript">
var m=60
function changeColor(){
    var obj=document.getElementById("tb1")
    obj.bgColor="rgb(100%,"+m+"%,100%)"
    m+=5
    var st=setTimeout("changeColor()",10)
    if(m>100){
        clearTimeout(st)
        m=60
        obj.bgColor="#efefef"
    }
}
</script>
<table cellpadding=0 cellspacing=0 width=100 border=0>
<tr><td bgcolor="#efefef" onmou搜索引擎优化ut="changeColor()" id="tb1">&nbsp;</td></tr>
</table>


知识:
<a href="#"></a>
<a href="html.exe"></a>
<a href="mailto:icyzhl@163.com?cc=icyzhl@126.com&subject='你好'&body='你好啊'"></a>
<a href="#ffff"></a>
<a name="ffff"></a>
<a href="javascript:alert('你好')"></a>
<a href="####"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(null)"></a>
<a href="javascript:;"></a>
<a href="#" ></a>
<span style="cursor:hand"></span>
a:link {font-size:12px;color:red;text-decoration:none;font-style:italic}
a:link {font-size:14px;color:red;font-weight:normal;text-decoration:underline;font-style:normal}
a:link {font-size:12px;font-family:华文行楷;font-weight:bolder;color:red;text-decoration:overline}
style="writing-mode:tb-rl"
style="writing-mode:lr-tb"
<form>
<select onchange="document.body.style.background=this.options[this.selectedIndex].value">
<option value=url(1.jpg)>布景1
<option value=url(2.jpg)>布景2
<option value=url(3.jpg)>布景3
</select></form>
挪用css
favicon  
<link href="" rel="shortcut icon">
<link href="" rel="bookmark">
<link href="css文件地址" rel="stylesheet">
<style type="text/css">
在此写css
</style>
<span style="css样式内容"></span>
<style style="text/css">
@import url("")
</style>
text-decoration:none
text-decoration:overline
text-decoration:underline
text-underline-position:above/below(IE专有属性)
text-decoration:line-through
text-transform:uppercase/lowercase/capitalize
font-size:大小
font-family:字体
font-style:normal/italic
font-weight:normal/bold/bolder/lighter
line-height:120%
writing-mode:tb-rl/lr-tb
text-indent:?px
综合   font:样式 变形 加粗 字号/行高 字体
  example----font:italic bold 12px/120% 华文行楷


            界说           挪用
           
            .css1 {}         class=css1
            #css2 {}         id=css2
            table {}         声明table 中的一切属性
            table#css1 {}    table中的一切css1都有这个属性   id=css1
            table.css1 {}    table中的一切css1都有这个属性   class=css1
            body,table,input {}   table和body和input都有这个属性       
            table #css1           table中其他标签具有的属性   <table>...<span id=css1
            table .css1           table中其他标签具有的属性   <table>...<span class=css1


image:
vaspace hspace width heigth dynsrc src lowsrc alt

form :
input type="text/password/radio/checkbox/sunmit/file/hidden/botton"
select option
textarea



font:
i b u strike &lt; &gt; &amp; &quot; &reg; &copy

在网页中加入html代码只需在代码前后加入:<xmp>和</xmp>便可以了

size color

basefont color:red;...       base href=""      base target="_top"

table td tr:
align=center/right/left   leftmargin   topmargin   cursor   oncontextmenu
ondragstart oncopy oncut onpaste onselectstart bgcolor background
width heigth id cellpadding cellspacing border

bgsound:
loop=-1/infinite   balance   volume   autostart  

marquee:
direction:up/down/left/right
align:center/right/left/right
behavior:scroll slide alternate
vspace hspace height width bgcolor
scrolldelay   scrollamount


<span title="你好">你好</span>
<span onmou搜索引擎优化ut="window.status=''" style="cursor:hand"></span>


favicon.icon      <link href="" rel="shortcut icon">

oncontextmenu="return false"
ondraystart="return false"
onselectstart="return false"
oncopy="return false"
onpaste="return false"
oncut="return false"


<meta name="description" content="内容"
<meta name="keywords" conternt="内容"
<meta name="author" content="张虹亮"
<meta http-equiv="page-enter" content="revealtrans(duration='3';transition='23')"
<meta http-equiv="page-exit" content="revealtrans(duration='3';transition='23')"
<meta http-equiv="content-type" content="text/html;charset=gb2312"

消除表单按下时的虚线
<input type=radio hidefocus=true name=sex>你好
<input type=radio name=sex onfocus="this.blur()">你欠好

加入收藏:
<form>
<input type="submit" ></form>


a的全写:anchor


<base target="_top">避免点击链接时新窗口都是在顶部掀开

<p><br>比<br><p>多一行


如何让网页中的广告自动封锁:
---在网页广告条的网页head和/head中加入:
<script language="javascript">

function close(){
setTimeout("self.close()",5000)
}//本网页自动在5秒钟封锁
</script>
或:
function close(){
self.close()
}
setinterval("close()",5000)
</script>

frameset frame iframe:
border bordercolor src name rows cols framespacing frameborder

flash透明:
<param name="wmode" value="transparent">

半透明的表格:
<table cellpadding=0 cellspacing=0 width=200 height=100><tr><td style="background-color:red;filter:alpha(opacity=20)">&nbsp;</td></tr></table>

阴影表格:
<div style="filter:shadow(color=red,direction=120);width=200;padding-right:10;padding-bottom:10">
<table cellpadding=0 cellspacing=0 width=200 height=100 bgcolor=red><tr><td>&nbsp;</td></tr></table></div>

特点的表单:
<form>
<input type="button" value="空的" disabled>
<input type="text" value="520" readonly>
<input type="text" size=30 style="border-top:1px shed red;border-bottom:1px shed black;border-right:1px shed blue;border-left:1px shed orange;"
</form>

<embed src="" width height>
<bgsound src="" loop=-1/infinite autostart=false/true>
<param name="wmode" value="transparent">

布景更换效果
<style type="text/css">
.css1 {background-image:url("1.jpg")}
.css2 {background-image:url("2.jpg")}
</style>
<table><tr><td onmou搜索引擎优化ut="this.className='css1'" >sage</td></tr></table>

封锁网页
<script language="javascript">
function closewindow(){
window.opener=null
window.close()
}
</script>
挪用:<form><input type="button" ></form>

鼠标指向时变布景颜色的表格
<table cellpading=0 cellspacing=1 bgcolor=red width=100 height=20><tr><td onmou搜索引擎优化ut="this.bgColor='#333333'" bgcolor="#ffffff"></td></tr></table>

细线表格1:
<table cellpading=0 cellspacing=1 bgcolor=red width=100 height=20><tr><td bgcolor="#fffff"></td></tr></table>

细线表格2:
<table border=1 bordercolor="#000000" width=100 height=20><tr bordercolor="#ffffff"><td></td></tr></table>

细线表格3:
<input type="text" size=12 readonly="readonly">
<input type="text" size=12 disabled="disabled">

凹下的平面表格:
<table width="100" border="1" cellspacing="1" cellpadding="0" bgcolor=red>
<tr><td bgcolor="#ff3333">&nbsp;&nbsp;</td><td bgcolor="#ff3333">&nbsp;&nbsp;</td></tr>
<tr><td bgcolor="#ff3333">&nbsp;&nbsp;</td><td bgcolor="#ff3333">&nbsp;&nbsp;</td></tr>
<tr><td bgcolor="#ff3333">&nbsp;&nbsp;</td><td bgcolor="#ff3333">&nbsp;&nbsp;</td></tr>
</table>

凸出的平面表格:
<table width="100" border="1" cellspacing="0" cellpadding="0" bordercolorlight=#333333 bordercolorrk=#efefef>
<tr><td bgcolor="#FF0000">&nbsp;&nbsp;</td><td bgcolor="#FF0000">&nbsp;&nbsp;</td></tr>
<tr><td bgcolor="#FF0000">&nbsp;&nbsp;</td><td bgcolor="#FF0000">&nbsp;&nbsp;</td></tr>
<tr><td bgcolor="#FF0000"">&nbsp;&nbsp;</td><td bgcolor="#FF0000">&nbsp;&nbsp;</td></tr>
</table>

有间距的表格:
<table width="100" border="1" cellspacing="5" cellpadding="0" bgcolor=gray>
<tr><td bgcolor="#999999">&nbsp;&nbsp;</td></tr>
</table>

<link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换资自己的图标

<link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

<input style="ime-mode:disabled"> 封锁中文输入法

避免他人frame你的网页:
<script language="javascript">
if(top.location!=self.location){
top.location=self.location
}
</script>

1. oncontextmenu="window.event.returnValue=false" 将全部樊篱鼠标右键
<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 消除拔取、避免复制

3. onpaste="return false" 禁绝粘贴

4. oncopy="return false;" oncut="return false;" 避免复制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换资自己的图标

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

7. <input style="ime-mode:disabled"> 封锁输入法

8. 永世城市带着框架

<script language="javascript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
// --></script>

9. 避免被人frame

<SCRIPT LANGUAGE=javascript><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>

10. 网页将不克不及被另存为

<noscript><iframe src=*.html></iframe></noscript>

11. <input type=button value=反省网页源代码
>

12.删除时确认

<a href='javascript:if(confirm("确切要删除吗?"))location="boos.asp?&areyou=删除&page=1"'>删除</a>
<a href="return confirm("确认删除吗?")"

13. 取得控件的相对位置

//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>

//VBScript
<script language="VBScript"><!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox "top="&t&chr(13)&"left="&l,64,"取得控件的位置"
end function
--></script>

14. 光标是停在文本框文字的最终

<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()">

15. 判断上一页的泉源

javascript:document.referrer

16. 最小化、最大化、封锁窗口

<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" VALUE="Close"></OBJECT>

<input type=button value=最小化 onclick=hh1.Click()>
<input type=button value=最大化 onclick=hh2.Click()>
<input type=button value=封锁 onclick=hh3.Click()>
本例适用于IE

17.樊篱功用键Shift,Alt,Ctrl

<script>
function look(){
if(event.shiftKey)
alert("避免按Shift键!"); //可以换成ALT CTRL
}
document.onkeydown=look;
</script>

18. 网页不会被缓存

<ME他/她 HTTP-EQUIV="pragma" CONTENT="no-cache">
<ME他/她 HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalite">
<ME他/她 HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或<ME他/她 HTTP-EQUIV="expires" CONTENT="0">

19.怎么让表单没有凹凸感?

<input type=text style="border:1 solid #000000">

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom: 1 solid #000000"></textarea>

20.<div><span>&<layer>的区别?

<div>(division)用来界说大段的页面元素,会发作转行
<span>用来界说同一行内的元素,跟<div>的唯一区别是不发作转行
<layer>是ns的标识表记标帜,ie不支撑,相当于<div>


21.让弹出窗口总是在最前面:

<body onblur="this.focus();">

22.不要转动条?

让竖条没有:
<body style='overflow:scroll;overflow-y:hidden'>
</body>
让横条没有:
<body style='overflow:scroll;overflow-x:hidden'>
</body>
两个都去掉落?更庞大了
<body scroll="no">
</body>

23.怎么去掉落图画链接点击后,图画附近的虚线?

<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>

24.电子邮件措置提交表单

<form name="form1" method="post" action="mailt****@***.com" enctype="text/plain">
<input type=submit>
</form>

25.在掀开的子窗口刷新父窗口的代码里如何写?

window.opener.location.reload()

26.如何设定掀开页面的大小

<body >
掀开页面的位置<body >

27.在页面中如何加入不是满铺的布景图画,拉动页面时布景图不动

<STYLE>
body
{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}
</STYLE>

28. 检查一段字符串是不是全由数字组成

<script language="javascript"><!--
function checkNum(str){return str.match(\/D\)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>

29. 取得一个窗口的大小

document.body.clientWidth; document.body.clientHeight

30. 怎么判断是不是是字符

if (/[^/x00-/xff]/g.test(s)) alert("包含汉字");
else alert("全是字符");

31.TEX他/她REA自顺应文字行数的几多

<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
</textarea>

32. 日期减去天数即是第二个日期

<script language=javascript>
function cc(dd,dd)
{
//可以加入偏差措置
var a = new Date(dd)
a = a.valueOf()
a = a - dd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("12/23/2002",2)
</script>

33. 挑选了哪个Radio

<HTML><script language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio" value="style" checked>Style
<INPUT name="radio1" type="radio" value="barcode">Barcode
<INPUT type="button" value="check" >
</BODY></HTML>

34.剧本永不堕落

<SCRIPT LANGUAGE="javascript">
<!-- Hide
function killErrors() {
return true;
}
window.onerror = killErrors;
// -->
</SCRIPT>

35.ENTER键可让光标移到下一个输入框

<input onkeydown="if(event.keyCode==13)event.keyCode=9">


window.event.returnvalue="false"
window.event事务可以前往值,,,
window.event.srcElement.returnValue=""
案例:<body ontextmenu="window.event.returnvalue='false'">//避免鼠标右键

判断上一页的泉源:javascript:document.referrer;

让网页不被他人 iframe:
<script>
    if(top.location!=self.location){
        top.location=self.location
    }
</script>

让页面掀开最大化:
<script>
window.resizeTo(screen.width,screen.height)
window.moveTo(0,0)

//相关函数:window.moveTo,window.moveBy,window.resizeTo,window.resizeTo
</script>

javascipt相关工具:
math.max(x,y)
math.min(x,y)
math.ceil(x)
math.floor(x)
math.sqrt(x)
math.round(x,y)
math.random()

var qq=new Date()
qq.getYear()
qq.getFullYear()
qq.getMonth()
qq.getDay()
qq.getDate()
qq.getHours()
qq.getMinutes()
qq.getSeconds()
qq.getMilliSeconds()
qq.getTime()

string.link()
string.fontsize()
string.fontcolor()
string.bold()
string.sup()/上标
string.sub()/下标
string.toUpperCase()
string.toLowerCase()
string.Indexof()
string.charAt()
string.charCodeAt()
string.substr()
string.substring()
string.fromCharCode()
string.search()


链接a的全写:anchor

在html和xml中相关字符征引:
'   &apos;
&   &amp;
"   &quot;
<   &lt;
>   &gt;

若是要在html网页中加入html标签代码(大量),加<xmp></xmp>


iframe控制父窗口:window.parent.
父窗口控制子页面:window.子页面称谓


用js爱护网页中邮箱:
<script>
name="icyzhl"
witch="163"
    document.write("<a href='mailto:"+icyzhl+"@"+witch+".com+"'>")
    docuemnt.write("</a>")
</script>




marquee标识表记标帜用法:
vspace;
hspace;
direction:up/left/right/down;
behavior:slide/scroll/alternate;
bgcolor;
scrolldelay;
scrollamount;

bgsound:infinite/loop=-1  autostart   src  


相宜规范的掀开新窗口
<script>
var anchors=document.getElementsByTagName("a")
for(i=0;i<anchors.length;i++){
    obj=anchors[i]
    if(obj.getAttribute("href") && obj.getAttribute("rel")=="external"){
        obj.target="_blank"
    }
}
</script>


textarea自动高度
<textarea style="overflow-y:visible">
sgdsg文字内容
</textarea>


湮没表单按下的虚线;
<input type="radio" hidefocus="hidefocus">
<input type="radio" onfocus="this.blur()">

只读文本:
<input type="text" value="xagd" disabled="disabled">
<input type="text" value="xagd" readonly="readonly">

文本值发作改动:
<input type="text" onpropertychange="alert('xx')">

不克不及为中文:
<input type="text" style="ime-mode:disabled">

收藏夹特性图标:
<link rel="ShortCut Icon" href="favicon.ico"////favorite


上述div+css武艺和javascript武艺若是大家有甚么定见可以联络我自己哈.
QQ:499375381

 

你觉得这篇文章怎么样?

0 0
参与讨论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
  • 注册会员
  • 选择网站模板
  • 免费开通试用
  • 绑定域名试用
  • 选择套餐
  • 付款转正
  • 域名正式生效
  • 网站正式上线
  • 分站: