前端基本功-第03天2016年3月11主導(dǎo)航、輪播部分小三角右側(cè)結(jié)構(gòu)京東快報(bào)生活服務(wù)今日推薦圖標(biāo)字體-1教學(xué)

火狐瀏覽器插件簡(jiǎn)單設(shè)計(jì)圖對(duì)比工具（Pixel保存網(wǎng)頁(yè)為（PearlCrescentPageSaver） 截圖的時(shí)候記得把頁(yè)面滑到最如果滑到最仍然截不全看看你是否啟用了硬件加谷歌瀏覽器介按F12能夠調(diào)出調(diào)試工在Settings中可以禁用緩存和JavaScript（cache建議禁用Javascript有需要的時(shí)候也可以禁用Fireworks介這里只介紹常用的其他的網(wǎng)上搜索一下有很多指針工具切片工具K滴管工具I手型工具H縮放工具ZK切VH小手Z縮放U圖形T文本I取色GCtrl空格小Ctrl+空格放大Ctrl+Alt+空格縮小Ctrl+加號(hào)或者滾輪放大Ctrl+減號(hào)或者滾輪縮小（不方便Ctrl+N新Ctrl+O打Webstorm介項(xiàng)目欄AltInsert插入文html文件AltF2調(diào)出瀏覽器選Ctrl+Alt+L Ctrl+Shift+/ Ctrl+D 項(xiàng)目切Alt+<-或- CtrlTab切換代碼選項(xiàng)卡（還要進(jìn)行一次選擇，效率差些Emmet語(yǔ)法(有時(shí)候打不開(kāi)可以看我的截圖整體順具體順結(jié)構(gòu)分結(jié)構(gòu)代碼html樣式代碼css樣式分析及書(shū)寫(xiě)順結(jié)構(gòu)屬位置positionz-indexdisplayfloat大小widthheightpaddingmargin背景background文字fontcolorline-heighttext-其該順序只是推薦的順序，有的樣式是根據(jù)具體需要后期添加的該順序只是推薦的順序，有的樣式是根據(jù)具體需要后期添加的復(fù)習(xí)方（推薦使用DaumPotplayer，因?yàn)槠渌骺赡軣o(wú)法加速我錄制的樣式文件注意引用順序，bas注意引用順序，base是公共樣式，index是特定樣式，特定網(wǎng)頁(yè)的樣式應(yīng)該放在公共樣式后面，以便對(duì)其進(jìn)行覆蓋link（知道即可，有的同學(xué)可以查W3Ccharset 文檔的字符編碼方式（幾乎沒(méi)有主流瀏覽器支持該屬性href 被鏈接文檔的位置hreflang 文檔中文本的語(yǔ)media 文檔將被顯示在什么設(shè)備rel 文檔與當(dāng)前文檔之間的關(guān)系（常用的有stylesheet和shortcuticonrev與rel相反reversedrelationship（幾乎沒(méi)有主流瀏覽器支持該屬性sizetargetype被圖標(biāo)的尺寸（僅適用于relicon文檔在哪個(gè)窗口或框架中加載（幾乎沒(méi)有主流瀏覽器支持該屬性被鏈接文檔類(lèi)型設(shè)置標(biāo)在indexhtml文件的<title></title>之間輸入的標(biāo)題即設(shè)置圖 /favicon.ico即可看到圖標(biāo)右鍵單擊圖標(biāo)，選擇另存為，保存到本地 <linkrel="shortcuticon"href="favicon.ico"shortcut捷徑快捷方式固固定布 FixedLayout響應(yīng)式布局ResponsiveLayout流式布 FluidLayout柵格布 GridLayout瀑布流布局WaterfallLayout圣杯布局雙飛翼布局HolyGrailLayout兩邊固定中間流動(dòng)風(fēng)格錯(cuò)落的方格超現(xiàn)實(shí)主義簡(jiǎn)潔大氣冷抽代表畫(huà)作時(shí)裝椅子開(kāi)Harrypotterandtheholy主色主色調(diào)紅橙黃（紅紅火火黃金萬(wàn)兩在在basecss文件中對(duì)全局樣式進(jìn)行初始化，詳細(xì)說(shuō)明見(jiàn)”樣式初始化.css”中的注釋可以將統(tǒng)一樣式代碼單獨(dú)放到reset.css中，但為了減少請(qǐng)求（雅虎前端軍規(guī)第一條），這么一點(diǎn)東西，放在base.css中可以減少減少http請(qǐng)求，提高頁(yè)面的性能，這是CSSSprites最大的優(yōu)點(diǎn)減 的字節(jié)，多 合并成1 的字節(jié)總是小于多的字節(jié)總和只需對(duì)一張集合 命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名更換風(fēng)格方便，只需要在一 上修改顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改背景合backbackground:urlbgimage.gif)xynorepeat;引用路徑位置是否重復(fù).clearfix簡(jiǎn).clearfix:before,.clearfix:before,.clearfix:aftercontent:content:display:display:}/*在有該類(lèi)的元素內(nèi)部元素的前面和后面添加元素.clearfix:after.clearfix:afterclear:clear:.clearfix*zoom:}/*用于兼容清楚浮font合ffont:粗細(xì)字號(hào)/行高字體400是normal700是font-family是由很多font-face組成的，是一個(gè)合CSS3圓角border-radius邊框-半CSSCSS3屬性，用于向元素添加圓角邊框border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;borderradius2px;為簡(jiǎn)寫(xiě)形式，等價(jià)于以上代碼順序從左上角開(kāi)始順時(shí)針設(shè)置兩種網(wǎng)站構(gòu)建策略兩種網(wǎng)站構(gòu)建策略漸進(jìn)增強(qiáng)（progressiveenhancement，一開(kāi)始只構(gòu)建站點(diǎn)的最少特性，然后不斷針對(duì)各瀏覽器追加功能優(yōu)雅降級(jí)（gracefuldegradation，一開(kāi)始就構(gòu)建站點(diǎn)的完整功能，然后針對(duì)瀏覽器測(cè)試和修復(fù)）半透明效果：back半透明效果：background:rgba(0,0,0,.2);re gree blue alpha紅色值綠色值 藍(lán)色值 （色值取值范圍是0-255透明度取值范圍是0-1）如果是零點(diǎn)幾，前面的零可以省略層—定要記得加定位否則—定要記得加定位否則zindex不生效后面的盒子會(huì)壓住前面的盒子，zindex高的盒子會(huì)壓住zindex低的盒子盒子不是自身zindex越高就一定