web開發(fā)日志css定義與JS

1、項(xiàng)目1類的應(yīng)用divwidth:60px;height:60px;background-color: #7FFF00;border-radius: 50%; float:left; margin-left: 10px;/div顯示出來前面的不能加./類定義前面加.boxwidth:372px; height:494px ;overflow: hidden;position: relative;top: 60px;left:50%/box是盒子只能放一張圖片 overflow 多余超出隱藏 position 相對(duì)父級(jí)移動(dòng)的位置 圖片的位置居中.click span float:left;marg

2、in-left: 10px;margin-right: 10px; width:10px;height: 10px;background-color: red;border-radius: 50%;overflow: hidden;position: relative;top: 60px;left:50%;/span是點(diǎn).click span定義了一個(gè)類 也是一個(gè)框架框起來作用 margin-left right 是相對(duì)于頁(yè)面的上下左右的變化彼此之間的距離/div 和span 加上浮動(dòng)都是一樣的標(biāo)簽 /一個(gè)父級(jí)框起來可以一起定義效果$(img).hide()/一開始沒有圖像$(span:eq(

3、0).click(function()$(img:eq(0).show()$(img:eq(0).siblings().hide()$(this).css(backgroundColor:yellow)$(this).siblings().css(backgroundColor:red)/this相對(duì)應(yīng)的是最外面（）里的span)$(span:eq(1).click(function()$(img:eq(1).show()$(img:eq(1).siblings().hide()$(this).css(backgroundColor:yellow)$(this).siblings().css(

4、backgroundColor:red)$(span:eq(2).click(function()$(img:eq(2).show()$(img:eq(2).siblings().hide()$(this).css(backgroundColor:yellow)$(this).siblings().css(backgroundColor:red)$(span:eq(3).click(function()$(img:eq(3).show()$(img:eq(3).siblings().hide()$(this).css(backgroundColor:yellow)$(this).sibling

5、s().css(backgroundColor:red)$(span:eq(4).click(function()$(img:eq(4).show()$(img:eq(4).siblings().hide()$(this).css(backgroundColor:yellow)$(this).siblings().css(backgroundColor:red)項(xiàng)目2 Css的應(yīng)用.text1 background-color:white;.text1 figcaption padding:20px;.text1 figcaption pbackground-color:#FFF;margin

6、 3px;text-align: center; padding:0 10px; transform: translate(-120px,0px);.text1 p:nth-of-type(1)transition-delay:0.3s;.text1 p:nth-of-type(2)transition-delay:0.8s;.text1 p:nth-of-type(3)transition-delay:1.3s;.text1:hover ptransform: translate(0,0);.text1:hoverimgopacity:0.5;transform:translate(-50p

7、x,0);/css層疊樣式 引用一個(gè)text類定義就包括了所有的動(dòng)效/text1 是聲明 這些是寫在body里面的第一標(biāo)題 圖片注解 圖片注解 圖片注解/figure是父級(jí)包括了figcaption.box5background-color:blanchedalmond ;.boxheight: 100px;.box2background-color:blanchedalmond ;.box3 font-size:50px;.box5background-color:blanchedalmond ;文字$(.box5).css(color:red,fontSize: 34)/新定義css樣式項(xiàng)

8、目3$(div).width();/width寬度（）沒寫是捕獲 寫了是設(shè)置document.title=$(div).width()/document 頭部?jī)?nèi)容是用來檢測(cè)變化的$(div).height();/height 高度document.title=$(div).height() helloworld/padding 內(nèi)邊距 padding-top 從上往下 hin 細(xì)線 medium 中粗線 thick 粗線 邊框類型 none 無邊框 dotted 點(diǎn)組成 dashed 由短線 solid 實(shí)線 double 雙線 groove 3d溝槽 顏色$(div).outerHeight

9、();/包含填充padding 和邊框document.title=$(div).outerHeight()heoworld/margin 外邊距 margin “20px 40px” top bottom20px right left 40px 20 40 60 80 top right bottom left$(div).outerHeight(true);/true 填充 邊框 邊界都包含document.title=$(div).outerHeight(true) helloworld$(div).innerHeight(true);/innerHeight 帶padding值的高度d

10、ocument.title=$(div).innerHeight(true)項(xiàng)目4/JS 聲明類型 不需要調(diào)用庫(kù) 直接輸出就可以 用于if語(yǔ)句 輪播 函數(shù)類型 var i=1/ VAR 和變量之間要有空格 var 變量名=數(shù)值i=i+1document.title=ialert(hello)/彈窗var a=confirm(are your sure?)/布爾 TRUE falsedocument.title=a;var b=prompt(please input your name, 0);/可輸入文本 字符用引號(hào)包含document.title=your name are+b;/運(yùn)行從上往

11、下 變量運(yùn)算 + - * / 比較運(yùn)算 = != =項(xiàng)目5alert(hello)var a=confirm(are your sure?)var b=prompt(please input your chronically age)if(b=18)/if （布爾值 true會(huì)顯示 false 不會(huì)顯示）document.title=you are + b+ years old/空格在引號(hào)中elsedocument.title=you are too young /語(yǔ)句后不能加分號(hào) 分號(hào)在外可以加項(xiàng)目6document.getElementById(box).style.height=100p

12、xdocument.getElementById(box).style.width=100pxdocument.getElementById(box).style.backgroundColor=blanchedalmond#boxwidth: 372px;height: 494px;/必須定義style盒子圖片 捕獲樣式/類調(diào)用var i=prompt(請(qǐng)輸入你的對(duì)象,0)if(i=1)document.getElementById(box).style.backgroundImage=url(img/p_1.png)/if（）兩個(gè)= style 相當(dāng)于調(diào)用css js圖片必須有url 顯示

13、在彈出的窗口 捕獲屬性樣式else if(i=2)document.getElementById(box).style.backgroundImage=url(img/p_2.png)/圖片的順序必須一致else if(i=3)document.getElementById(box).style.backgroundImage=url(img/p_3.png)/if 語(yǔ)句結(jié)尾不能有冒號(hào)else if(i=4)document.getElementById(box).style.backgroundImage=url(img/p_4.png)else if(i=5)document.getEle

14、mentById(box).style.backgroundImage=url(img/p_5.png)elsealert(輸入錯(cuò)誤定義)/最后的else 沒有（）小括弧imgdisplay: none;/背景有大小才顯示var a=prompt(input you favorite number,0)document.getElementsByTagName(img).item(a-1).style.display=block/駝峰寫法 a-1表示第一個(gè) 捕獲標(biāo)簽 每個(gè)都要加.var a=prompt(input you favorite number,0)/prompt 中的a變量就是鍵盤

15、輸入的文本if(a=5)document.getElementsByTagName(img).item(a-1).style.display=blockelsealert(worry number)項(xiàng)目7var use=new Array();/定義一個(gè)數(shù)組盒子use0=土豆use1=胡蘿卜use2=西紅柿use3=白菜use4=芹菜var who=Math.floor(Math.random()*5);/Math.floor 只取整數(shù)Math.random取隨機(jī)數(shù)0-1之間 5是范圍document.title=今天吃 + usewho/數(shù)組盒子包著變量項(xiàng)目8imgdisplay: none

16、;/用js要事先聲明function appear(a) function直接跟括號(hào) 沒有符號(hào)document.getElementsByTagName(img).item(a-1).style.display=block/ var a=prompt(input you favorite number,0) 原來的函數(shù)名 appear 是類型 函數(shù)的事件 js比JQfunction（）中多了函數(shù)名appear(3)/只用于檢測(cè) 相當(dāng)于 a=3 省略了/JS的定義onclick 單擊 onblur 失去焦點(diǎn) onmousemove鼠標(biāo)移入 onkeyup 按鍵彈起function dianji()/可以多次回調(diào)alert(這個(gè)類型不能用)/事件dianji()/不能是click 和庫(kù)重復(fù)項(xiàng)目9imgdisplay: none;function tanchu(