教育ui設(shè)計課件-編寫代碼html_第1頁
教育ui設(shè)計課件-編寫代碼html_第2頁
教育ui設(shè)計課件-編寫代碼html_第3頁
免費預(yù)覽已結(jié)束，剩余4頁可下載查看

下載本文檔

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

文檔簡介

一、HTML：超文本標(biāo)記語言（HyperTextMarkupLanguage）WWW：網(wǎng)（worldwideweb）W3C：網(wǎng)（worldwidewebconsortium）：.等形式，具有唯一性二、網(wǎng)頁結(jié)構(gòu)分逐級劃分、1像素原則 PS工具：切片工保存24位png格式，三劍客+s保存時選僅限圖像、選中的切片補充切片時不要點開images文件夾三、新建HTML文1的盤/case(案例responsive，拖入images文件、3、保存 首頁命名四、HTML標(biāo)記（ 空2~31、HTML 2、head<head 3、meta<meta/>----網(wǎng)頁的元信 編4、tittle<tittle></ 5、body<body></body>網(wǎng)頁的、瀏覽器窗口顯示的所有內(nèi)容都在這里6、div---div盒<div></ 7、h系列-------網(wǎng)頁的標(biāo)<h1></h1>~~~<h6></h6>h2開始用快捷鍵Ctrl+對應(yīng)的數(shù)字（1~6）特征：具有div的全部特征，自帶字體大小，自帶加粗、自帶8、p段落------<p>段落文字 具有div的全部特10、<i></i>----傾斜字體，把需要傾斜的文字放在i內(nèi)10、span萬能----<span>特殊樣式11、img前景圖---<imgsrc=”路徑”/>----寫在結(jié)構(gòu)body中的背景圖是樣式，寫在style中，前景圖是結(jié)構(gòu)，寫在body前景圖可以加，有點擊效12、單：<img/><br雙 12、ulliUlli具有div的全部特征，ul自帶列表符，去掉默認(rèn)的列表符Ul{list- 13、a---<ahref=””>文字或</a> 取消a自帶的下劃線a{text-A屬于行級，不可設(shè)寬高，如果需要設(shè)寬高，要轉(zhuǎn)塊行級：aimg塊級：divh1~h6pulli寬度100%，獨占一行，可設(shè)寬高 常制定A：導(dǎo)航---文字的樣式一般都加在a上，如果范圍需要擴(kuò)大，需要給a轉(zhuǎn)塊導(dǎo)航的制作，要么等寬li{width：124px；}，要么等留白li{padding:0絕對路徑------站外 相對路徑------站內(nèi)/打開../返回上郵件---<a 技 頁內(nèi)跳①在要跳轉(zhuǎn)的位置<aname=”名”>②在跳轉(zhuǎn)處<ahref=”#名”>跳轉(zhuǎn)點擊跳轉(zhuǎn)，即可跳到名那 src=”地址”controlsautoplay></> autoplay：自動<audiosrc=”音頻地址”controlsautoplay></audio> autoplay：自動15、Form表 <Inputtype=“text”value=“請輸入文字 <inputtype="password"value=“請輸入”/>---<inputtype="radio單選框name=<inputtype=”checkbox”/>---多選 <inputtype=”submit”value=”提交” <inputtype=”reset”value=”重置” HTML注釋---結(jié)構(gòu)中 CSS注釋----樣式中 JS注釋-----js中 五、選擇器（命名，找對象 空11、選擇器----針對當(dāng)前頁面所有此名稱的都起作用樣式中div{2、ID選擇 結(jié)構(gòu)中<div3、class選擇器-----二級及以上的盒命名，調(diào)用時結(jié)構(gòu)中<div建議：子盒和父盒錯位一個tab鍵或4個空格，方便結(jié)構(gòu)的管理選擇器名規(guī)范：特殊符號只能用-減號4、通配符選擇器*-------指代頁面中所有的取消自帶的外間距和內(nèi)填 公共樣5、后代選擇器選擇器A選擇器B{選擇器A中的所有B都生選擇器 Class選擇器ID選擇器：100 Style內(nèi)聯(lián)：10007、偽類選擇器選擇器A:hover{樣式:值 8、親子選擇器：A>B用>把父子選擇器，A里面只生效兒子輩的BUl>lili>a√ ul>a×應(yīng)該寫：ul>li>a六、樣式--- CTRL+H代碼提1Style內(nèi)聯(lián)樣式：style=”樣式：值內(nèi)部樣式：在head內(nèi)部，</head>之前，應(yīng)用下面的語<styletype=”text/css”>樣式外部樣式：內(nèi)轉(zhuǎn)外更利于保新建css文件并保存到的 將style對閉合，剪切到css文件中，同時刪除style將新保存的css文件到當(dāng)前的html中：在</head>之前右鍵---css樣式---附加樣式表---找到css文件---確定更新背景圖：在css中Ctrl+f查找，添加../替2、height：高單位 3width：200px200像4background-color：#000000；背景顏色，用#色值或顏色的英文單詞red、green、blue5盒居中margin:06、Float浮動float：left；左浮 7margin盒子的外間margin-top：上留白margin-bottom：下留白margin-left：左留白margin-right：右留白 四周都留10像素的白margin：10px20px；---上下10px左右margin：10px20px30px---10px左右20pxmargin：10px20px30px paddingpadding-top：上填充padding-bottom：下填充padding-left：左填充padding-right：右填充padding合寫 四周都留10像素的padding：10px20px；---上下10px左右20pxpadding：10px20px30px---上10px左右20px下30pxpadding：10px20px30px40px； margin當(dāng)父盒有背景或邊框時會出現(xiàn)bug，優(yōu)先用注意：padding會撐開盒子，導(dǎo)致盒子變大，所以想要保持盒子大小不變用padding時，要減掉相應(yīng)的寬或高8、背景 No-repeat不重復(fù)丨repeat-x水平重復(fù)丨repeat-y垂直重Background-position：背景定位：xy X：left丨center丨right Y:top丨center丨bottomX的數(shù)值：距左邊的距 Y的數(shù)值：距頂部的距離負(fù)值往盒外Background-size：寬高；---寬高可隨意設(shè)置，默認(rèn)的是原始大小，單位 css3樣前景圖的尺寸：只需對img設(shè)置寬或高一項即可，會等比例縮補充：如果img被a包含，會生成淡藍(lán)色邊框，取消img的邊 背景合寫：background：colorimgrepeatposition，colorimgrepeatposition，colorimgrepeatposition，colorimgrepeatposition； css3樣9 公共：body設(shè)置微軟雅Font-size：20pxText-align：left丨center丨 Font-weight：bold加粗丨normal正 text-decoration文本裝飾noneunderline下劃線丨overline上劃線丨刪除線line-throughText-transform文字的大小寫轉(zhuǎn)換：uppercase全大寫丨lowercaseCapitalize 邊框border:1pxredsoliod;1像素的紅色直線邊框 線型dashed虛線 position----網(wǎng)頁中出現(xiàn)覆蓋的情況時，要用固定定位A、固定定位元素不占位，寬度變?yōu)樽赃m應(yīng)B(窗口)的四個角為原點進(jìn)行定位C、固定定位不會隨頁面的下拉而滾動相對定位relative:相對于本身（該出現(xiàn)的位置）進(jìn)行定位A（參照物）依然占位，只是作為參照標(biāo)準(zhǔn)B、絕對定位盒就是以相對定位盒為參照測量數(shù)據(jù)的C、相對定位盒需要有固定尺絕對定位absolute：默認(rèn)以文檔的左上角為原點定通過left丨right，topbottom進(jìn)行定位①把要定位的盒子放到參照盒內(nèi)②對參照盒設(shè)置 ③對定位盒設(shè)置：position：absolute；用left丨right，topbottom進(jìn)行精確定 透明顏色rgba（0,0,0,0.5）---a指 css3樣 opacity：0~1----把盒子本身設(shè)置----css3樣式 A、只對定位元素有 設(shè)置了position的元B、Z-index的值越大，疊放次序越 優(yōu)先顯CZ-index的數(shù)值為自然數(shù)，無單位 box-shadow：abcdcolor；5個參邊邊框>內(nèi)陰影>背 >背景顏色 此樣式為css3樣式---兼容ie9以上瀏覽 盒圓角border-radius：20px；---css3樣 精靈技術(shù)：用一代替多的顯示效果 display：none隱藏丨block顯示 overflow溢出內(nèi)容的顯示方hidden隱藏丨visible顯示（默認(rèn)）丨scroll deg度數(shù)單位web交互技術(shù)一、web標(biāo)準(zhǔn)網(wǎng)頁制作技術(shù)

jQuery類 二、jQuery將jQuery類庫拷貝到下的js文件夾在</head>之前應(yīng)用：<scripttype=”text/javascript”src=”jq文件路徑”></script>二、JS的運行機(jī)制 小圖點擊 三、js的書寫位置 JS代四、jQuery函數(shù)功能解釋---.隔$(‘選擇器’)---找到選擇器對應(yīng)的Function(){js代碼} }選擇ID名為box Attr()-----屬性控制函數(shù)attr(‘屬性名’,’值 關(guān)于jQuery類庫插件的應(yīng)用步1、先引入jQuery類庫，再引入第插2插件對DOM結(jié)構(gòu)的要求搭3插件對CSS的要求并執(zhí)行，可以補充但不能遺4調(diào) Stop()----停止正在運行的所有動畫$(‘選擇

溫馨提示

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

評論

0/150

提交評論