基礎(chǔ)web前端主講教師傳智.神龍教主

主講教師：.神龍教播客PHP學(xué)院htt 發(fā)回1、十六進(jìn)制和十進(jìn)制的轉(zhuǎn) 十進(jìn)制位的權(quán)重是10，從右向左是100次方，10的一次方，10的二次方…，同理16進(jìn)制位的權(quán)重是16，從右向左是160次方，16的一次方，16的二次方…,16進(jìn)制有16個(gè)數(shù)，（0-9，A，B，C，D，E，練2、關(guān)于顏色的介光的三原色是RGB，R（red紅色）G(green綠色)B（blue藍(lán)色），所有的光線都是由這三種顏色組成，每種顏色分為256等分（0-255），如果用10進(jìn)制表示顏色，顏色的位數(shù)可能是1位，可能是2位，也可 是3位，這樣表示容易產(chǎn)生歧義，10進(jìn)制轉(zhuǎn)成16進(jìn)制表示，用兩位的十六進(jìn)制數(shù)表示顏色。比如#112233，這個(gè)顏色是 3、如果指定寬高，超出的部分隱如果沒有指定寬高，而且子元素浮動(dòng)，overflow:hidden可以觸haslayout屬性4、margin后面參數(shù)詳解 上下左margin:10px 上下——左margin:10px20px30px;margin:1px2px3px4px;marginpadding的規(guī)則是一樣5、圓角表傳統(tǒng)的方法：切6、定位（position）絕對(duì)定位以頁面的左上角為圓不保留自己的占要以父級(jí)的左上角為圓點(diǎn)：父級(jí)相對(duì)，子級(jí)絕Z-index用來調(diào)整圖層的順相對(duì)定位以自己的左上角為圓保留自己的占z-index調(diào)整圖層的順固定定位固定的頁面的某個(gè)地方靜態(tài)定位（static）這是一個(gè)默認(rèn)的定位方作完整代碼如下<style<style*{/*}background:url(images1/banner1_bg.jpg)repeat-}list-style-background:url(images1/button1_bg.jpg)repeat-}#daohangbackground:url(images1/button1.jpg)no-font-text-line- /*光標(biāo)移動(dòng)上去變成手型}#daohang /*當(dāng)鼠標(biāo)移動(dòng)到li上的時(shí)候background:url(images1/button2.jpg)no-}<divid="banner"><imgsrc="images1/banner1_left.jpg"<ul<li>首頁導(dǎo)讀 用戶<li>查詢網(wǎng)友 好友<li>好 <li>查看訊息csssprites技利用CSSSprites能很好地減少網(wǎng)頁的http請(qǐng)求，從而大大的提高頁面的性能，這也是CSSSprites最大的優(yōu)點(diǎn)Sprites技術(shù)利用的背景的定位來實(shí)現(xiàn)的。將很多小圖拼接成一張大圖，然后通過css定位來實(shí)現(xiàn)不同的盒子使用不同的背景。這樣能減少http請(qǐng)求的次數(shù)。例題絕對(duì)定位盒子居第第一步絕對(duì)定位，距左距離為50%,距上距離為具體代碼如下<style<styletype="text/css">background- /*距左 /*距上margin-left:-100px;/*向左移動(dòng)-margin-top:-100px;/*向上移動(dòng)-}<div綜合例為了切片準(zhǔn)確，可以跳出標(biāo)尺，通過標(biāo)尺拉出輔助線，F(xiàn)W中，顯示/隱藏標(biāo)尺快捷鍵是ctrl+alt+R。將整個(gè)公用的css樣式寫在外部樣式在頁面中，寫當(dāng)前頁面的樣基線介布局總能不用絕對(duì)定位和相對(duì)定位解決的事情，就不要用定能用標(biāo)準(zhǔn)流解決就盡量用標(biāo)準(zhǔn)流解決標(biāo)準(zhǔn)流不能解決就用浮動(dòng)前兩者如果都不能解決在選擇定位方式什么概念：HTML5草案的前身名為WebApplications1.0，是作為下一代互聯(lián)網(wǎng)標(biāo)準(zhǔn),用于取代html4與xhtml1的新一代標(biāo)準(zhǔn)版本,所以叫html5。它增加了新的和屬性，加強(qiáng)了網(wǎng)頁的標(biāo)準(zhǔn)、語義化與web表現(xiàn)性能，同時(shí)還增加了本地?cái)?shù)據(jù)庫等Web應(yīng)用的功能。廣義概念：HTML5代表瀏覽器端技術(shù)的一個(gè)發(fā)展階段。在這個(gè)階段，瀏CSS3，Javascript，API在內(nèi)的一套技術(shù)組合HTML5發(fā)展時(shí)間目前支持HTML5的瀏覽 獵 遨 海 HTML5的特更簡(jiǎn)語義語法更寬多設(shè)備跨平自適應(yīng)網(wǎng)頁設(shè)從頭說起——文檔從頭說起——簡(jiǎn)化了字符標(biāo)準(zhǔn)的改變—松散的語不允許寫結(jié)束符的：(單 、、、 可以省略結(jié)束符的可以完全省略的html、head、body、colgroup、HTML5支持松散的語法極大地兼容了編程人員的不規(guī)范代碼，同時(shí)保證HTML5是向下兼容新增的結(jié)構(gòu)標(biāo) 文 HTML5的標(biāo)記最大的變化就是 文 如果瀏覽器不識(shí)別這些標(biāo)記，全部當(dāng)成練習(xí)<styletype="text/css"><styletype="text/css">border:#000solidmargin:5px}border:#000solidmargin:3px0px0px}}<header>頭<nav>導(dǎo)航<aside>側(cè)邊欄<article>文章<footer>腳表單元素新增的三個(gè)屬HTML5表單的變HTML5的表單元素可以不放在表單域中，可以通過id關(guān)聯(lián)起新增inpu元 郵件：<input "：<inputtype="url"：<input 紅色：<inputtype="range"min="0"max="255" 顏色：<input 年月日：<input 年月：<input 年周：<input 時(shí)間：<input 年月日時(shí)間：<inputtype="datetime- <optgroup <option>東城區(qū)<option>西城區(qū) <optgroup <option>閔行區(qū)<option>黃埔區(qū) 搜索：<inputtype="text"<datalist<option>奧迪<option>奧拓<option>奧妙<option>奧利奧<inputtype="submit"value="提交音方法一<audiosrc="music/music.mp3"controlsautoplay="autoplay">不支持此格Autoplay：自動(dòng)如果不支持頻格式，顯示<audio>的內(nèi)容<audiocontrols<source<source如果不支持第一個(gè)音頻 下一個(gè)方法一 /movie.mp4"controls 方法二 controls<source <source <source 偽對(duì)象選擇:before在盒子的前面插入（內(nèi)部的前面:after在盒子的后面插入（內(nèi)部的后面<styletype="text/css">content:'鋤禾日當(dāng)午display:inline-background-}content:'誰知盤中餐<styletype="text/css">content:'鋤禾日當(dāng)午display:inline-background-}content:'誰知盤中餐background-}<divid='shi'>偽對(duì)象例<styletype="text/css">border:#000solid1px;margin:100pxauto;}#conmargin:0px#conmargin:0px}content:'';content:'';/*content也要寫background:url(images13/tu1.png)background:url(images13/tu1.png)no-display:inline-display:inline-vertical-vertical-}display:inline-background:url(images13/tu2.png)display:inline-background:url(images13/tu2.png)no-vertical-}<divid="con"><inputtype="text"value="搜索我 垂直居中的<style<styletype="text/css">border:#000solidmargin:100px}border:#F00solidtext-vertical-display:table-}<div<divid