web開發(fā)日志css定義與JS_第1頁
web開發(fā)日志css定義與JS_第2頁
web開發(fā)日志css定義與JS_第3頁
web開發(fā)日志css定義與JS_第4頁
web開發(fā)日志css定義與JS_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、項(xiàng)目1類的應(yīng)用<style>divwidth:60px;height:60px;background-color: #7FFF00;border-radius: 50%; float:left; margin-left: 10px;</style><meta charset="UTF-8"><title></title></head><body><div></div>/div顯示出來前面的不能加.<div></div><div>&l

2、t;/div><div class="div"></div>/類定義前面加.<html><head><script src="jquery.js"></script><style>.boxwidth:372px; height:494px ;overflow: hidden;position: relative;top: 60px;left:50%/box是盒子只能放一張圖片 overflow 多余超出隱藏 position 相對(duì)父級(jí)移動(dòng)的位置 圖片的位置居中.cl

3、ick span float:left;margin-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ì)于頁面的上下左右的變化彼此之間的距離</style><meta charset="UTF-8&quo

4、t;><title></title></head><body><div class="click span"><span ></span><span></span><span></span><span></span><span></span>/div 和span 加上浮動(dòng)都是一樣的標(biāo)簽</div> /一個(gè)父級(jí)框起來可以一起定義效果<br /><div class

5、="box"><img src="img/p_1.png"/><img src="img/p_2.png" /><img src="img/p_3.png" /><img src="img/p_4.png" /><img src="img/p_5.png" /></div><script>$("img").hide()/一開始沒有圖像$("span:eq(0

6、)").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()$(&qu

7、ot;img:eq(1)").siblings().hide()$(this).css(backgroundColor:"yellow")$(this).siblings().css(backgroundColor:"red")$("span:eq(2)").click(function()$("img:eq(2)").show()$("img:eq(2)").siblings().hide()$(this).css(backgroundColor:"yellow"

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

9、lick(function()$("img:eq(4)").show()$("img:eq(4)").siblings().hide()$(this).css(backgroundColor:"yellow")$(this).siblings().css(backgroundColor:"red")</script></body>項(xiàng)目2 Css的應(yīng)用.text1 background-color:white;.text1 figcaption padding:20px;.text1 figc

10、aption pbackground-color:#FFF;margin 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:hoverimg

11、opacity:0.5;transform:translate(-50px,0);/css層疊樣式 引用一個(gè)text類定義就包括了所有的動(dòng)效<figure class="text1">/text1 是聲明 這些是寫在body里面的<img src="img/t017db5f348ce54f090.jpg"/ ><figcaption><h3>第一標(biāo)題</h3><p> 圖片注解</p><p> 圖片注解</p><p> 圖片注解</p&

12、gt;</figcaption></figure>/figure是父級(jí)包括了figcaption.box5background-color:blanchedalmond ;<head><style>.boxheight: 100px;.box2background-color:blanchedalmond ;.box3 font-size:50px;.box5background-color:blanchedalmond ;</style><script src="jquery.js"></scr

13、ipt><meta charset="UTF-8"><title></title></head><body><div class="box5">文字</div><script>$(".box5").css(color:"red",fontSize: 34)/新定義css樣式</script></body>項(xiàng)目3<!DOCTYPE html><html><head

14、><script src="jquery.js"></script><meta charset="UTF-8"><title></title></head><body><div style="background-color: blanchedalmond;"></div><script>$("div").width();/width寬度（）沒寫是捕獲 寫了是設(shè)置document.title

15、=$("div").width()/document 頭部?jī)?nèi)容是用來檢測(cè)變化的</script></body></html><body><div style="background-color: blanchedalmond;"></div><script>$("div").height();/height 高度document.title=$("div").height()</script></body>&

16、lt;body><div style="background-color: blanchedalmond;padding-top: 15PX; border: 1px solid saddlebrown;"> helloworld</div>/padding 內(nèi)邊距 padding-top 從上往下 hin 細(xì)線 medium 中粗線 thick 粗線 邊框類型 none 無邊框 dotted 點(diǎn)組成 dashed 由短線 solid 實(shí)線 double 雙線 groove 3d溝槽 顏色<script>$("div&qu

17、ot;).outerHeight();/包含填充padding 和邊框document.title=$("div").outerHeight()</script></body><body><div style="background-color: blanchedalmond;padding-top: 15PX; border: 1px solid saddlebrown; margin: 10px;">heoworld</div>/margin 外邊距 margin “20px 40px” t

18、op bottom20px right left 40px 20 40 60 80 top right bottom left<script>$("div").outerHeight(true);/true 填充 邊框 邊界都包含document.title=$("div").outerHeight(true)</script></body><body><div style="background-color: blanchedalmond;padding-top: 15PX;"&

19、gt; helloworld</div><script>$("div").innerHeight(true);/innerHeight 帶padding值的高度document.title=$("div").innerHeight(true)</script></body>項(xiàng)目4<body><script type="text/javascript">/JS 聲明類型 不需要調(diào)用庫 直接輸出就可以 用于if語句 輪播 函數(shù)類型 var i=1/ VAR 和變量之間

20、要有空格 var 變量名=數(shù)值i=i+1document.title=i</script></body><body><script type="text/javascript">alert("hello")/彈窗var a=confirm("are your sure?")/布爾 TRUE falsedocument.title=a;var b=prompt("please input your name", "0");/可輸入文本 字符用引號(hào)包含

21、document.title="your name are"+b;/運(yùn)行從上往下 變量運(yùn)算 + - * / 比較運(yùn)算 > < = != <= >=</script></body>項(xiàng)目5<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">alert("h

22、ello")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" /語句后不能加分號(hào) 分號(hào)在外可以加</script>

23、;</body></html>項(xiàng)目6<body><div id="box"></div><script type="text/javascript">document.getElementById("box").style.height="100px"document.getElementById("box").style.width="100px"document.getElementById(&quo

24、t;box").style.backgroundColor="blanchedalmond"</script></body><html><head><style>#boxwidth: 372px;height: 494px;/必須定義style盒子圖片 捕獲樣式</style><meta charset="UTF-8"><title></title></head><body><div id="box

25、"></div>/類調(diào)用<script type="text/javascript">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 顯示在彈出的窗口 捕獲屬性樣式else if(i=2)document.getElementB

26、yId("box").style.backgroundImage="url(img/p_2.png)"/圖片的順序必須一致else if(i=3)document.getElementById("box").style.backgroundImage="url(img/p_3.png)"/if 語句結(jié)尾不能有冒號(hào)else if(i=4)document.getElementById("box").style.backgroundImage="url(img/p_4.png)"

27、else if(i=5)document.getElementById("box").style.backgroundImage="url(img/p_5.png)"elsealert("輸入錯(cuò)誤定義")/最后的else 沒有（）小括弧</script></body></html><html><head><style>imgdisplay: none;/背景有大小才顯示</style><meta charset="UTF-8"

28、><title></title></head><body><img src="img/p_1.png" /><img src="img/p_2.png" /><img src="img/p_3.png" /><img src="img/p_4.png" /><img src="img/p_5.png" /><script type="text/javascript&q

29、uot;>var a=prompt("input you favorite number","0")document.getElementsByTagName("img").item(a-1).style.display="block"/駝峰寫法 a-1表示第一個(gè) 捕獲標(biāo)簽 每個(gè)都要加.</script></body></html><body><img src="img/p_1.png" /><img src="i

30、mg/p_2.png" /><img src="img/p_3.png" /><img src="img/p_4.png" /><img src="img/p_5.png" /><script type="text/javascript">var a=prompt("input you favorite number","0")/prompt 中的a變量就是鍵盤輸入的文本if(a<=5)document.g

31、etElementsByTagName("img").item(a-1).style.display="block"elsealert("worry number")</script></body>項(xiàng)目7<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript"

32、;>var 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ù)組盒子包著變量</script></body></html>項(xiàng)目8

33、<html><head><style>imgdisplay: none;</style><meta charset="UTF-8"><title></title></head><body><img src="img/p_1.png" /><img src="img/p_2.png" /><img src="img/p_3.png" /><img src="i

34、mg/p_4.png" /><img src="img/p_5.png" /><script type="text/javascript">/用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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論