<ins id="nhtrr"><th id="nhtrr"></th></ins>

<cite id="nhtrr"><track id="nhtrr"></track></cite>

        <b id="nhtrr"><output id="nhtrr"><thead id="nhtrr"></thead></output></b><delect id="nhtrr"></delect>
          <delect id="nhtrr"></delect>

            歡迎加入EUCMS官方QQ交流群,與更多EUCMS用戶一起討論,共同發財!

            QQ群:1222386
            > 資訊中心 >> 建站技術 >>正文
            div+css和javascript武藝和使用側重事項
            2020-12-30 39 0
            比來公司要求每一個同事都把新學到的和之前總結到的閱歷都共享到公司網站下去
            故此我這里給大家共享一些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設定的單擊實驗的事務(函數)。。??梢匀寥〉檬髽说奈恢?br />
            而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"http://寫在工具建設以后
            document.body.appendChild(pt)
            pt.checked="checked"http://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"http:////favorite


            上述div+css武藝和javascript武藝若是大家有甚么定見可以聯絡我自己哈.
            QQ:499375381

             

            你覺得這篇文章怎么樣?

            0 0
            參與討論
            請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
          1. 注冊會員
          2. 選擇網站模板
          3. 免費開通試用
          4. 綁定域名試用
          5. 選擇套餐
          6. 付款轉正
          7. 域名正式生效
          8. 網站正式上線
          9. 分站:
            免費做網站 整形網 德國王牌建材
            Copyright@2003-2021 EUCMS智能建站平臺版權所有 Powered by EUCMS-v6.3 | 網站地圖 蘇ICP備13022644號
            噗呲噗呲捣出白沫蜜汁