less 前端開發(fā)基礎總結+案例_第1頁
less 前端開發(fā)基礎總結+案例_第2頁
less 前端開發(fā)基礎總結+案例_第3頁
less 前端開發(fā)基礎總結+案例_第4頁
less 前端開發(fā)基礎總結+案例_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

目錄Less.Less介紹：lesS使用方法/編譯方式（只介紹3中）：通過less..js方法2：通過koala的第三方軟件方法3：通過Hbuider自帶的編譯方式。（比較簡單）變量注釋：變量概念：可變的量（值）變量的聲明：@變量名：值；用變量聲明變量屬性名：變量存圖片路徑地址等：混合（1）混合寫法：（引用寫法）（2）混合帶參（3）混合帶參，參數(shù)可以帶值單獨對每個參數(shù)進行修改一起對參數(shù)進行賦值匹配模式LessLess介紹：和css類似，但是css是靜態(tài)語言，less是動態(tài)語言；Less的語法和js語法很像，可以使用變量，混合，嵌套，運算等；比如line-heig的值可以動態(tài)的去計算得到。區(qū)別：）.Les文件可以再瀏覽器上運行還可以再服務器端運行比如node.j中。而css只能是瀏覽器識別的語言;less使用方法/編譯方式（只介紹3中）:1.通過less.js（1）下載less.文件S4ur:tcodtGelkredszuEtccde-町ng1crect|>flranGltH-bCisirwiixFmviaGtiHubRoclupre囹ar”gg佗mhjIIn汨IIwin麗出I陶itwL&sj&SfiWtura由>■跪Hpcd>機帥Inns（1）下載less.文件S4ur:tcodt（2）引入less.文件地址

75%50%.；!■-■,!■■t75%50%3<1DOCTYPfhtrtil>3h<tiead>setachirset""UTF-B*><scriptsrc-"j5/less.js"></script></head>ttKdyj</body>(3)Ctrl+i或者右鍵■新建，選擇新建les文件wlessExainple.4less.rnin.j&lessiIBtest.Iess肩lessTest.html(4)注意：(4)l.l.lles的文件一定得在（less.jsjs文件的上面；1.1.2用link示簽引入les文件，需要把relg性的值改成stylesheet/lessehar5rt-"UTF-BH>(5)->GO?127r0.01:S020/lessExample^essTesr.mml?_htrt=15533959S7152艱應用學習世界艱應用學習世界齡蘭直一下r保敝道曲新浪典ff］百度?譯□［宣網(wǎng)】BG笑直身2.方法2:通過koala的第三方軟件(1)⑵安裝koala第三方軟件打開koala后-點擊設置圖標■更改語言(1)⑵安裝koala第三方軟件打開koala后-點擊設置圖標■更改語言（3）右鍵打開文件所在目錄，拖拽已經建立的的less文件到koala的界面選中要編譯的les文件:1.i^k^wldth!衛(wèi)即冏；height:;ba^kgraundl&p^sitl^n:日hmluw}compress（4）點擊‘執(zhí)行編譯’后會生成選中l(wèi)es文件的Css文件：如下圖;（5）然后在html中引入自動生成的css文件；+-凹啟卸權國KG己&4向?女站?射，曰?■^1-ggkMIlc-；i；r4Gihnn-JRIstZlwm|m|:■baiDij_M*eb:*C5K3T?t■IwtEnianripj^營<￡￡￡■bMtC55□t?t2E:litss1<tCOC7YPElhtml>2O<html>m□:<head><metjcharset=BUTF-Sn><1■:i-11~1戶±I尸￡號”5七?1己5冊己會1：?'hr^F=”￡S5/t：W3t2.?￡SS?'/〉|噸況｝中］wbcidy*.bwllewLteft2Jei5國lin+TmtHmlItamm.htnil<clast=ubox'14></>10*</body>11123.方法3：通過Hbuider自帶的編譯方式。（比較簡單）（1）打開les文件后，右鍵編譯選中存放位置和css名字引入編譯好的css文件口DCCTYPEhtml><rr.etacjiar5?='UTF-E">心|<linkrel-"5tyl€sheethref-ncs5/3-ifi7j￡^rjS^i.c55"1/>]8-<body>1m<dlvcLds￡=*bo**></div>I?<ybady>11變量變量注釋：也上?弟鼻相碧二任方法mm：日N演胃回*ifi畫就箕與T方話.nUn!w*BiurjJEM.gw~w**這里是注群，這個注雅在匚布里是可以看現(xiàn)的V4變量概念：可變的量(值)*變量*可變的最w*a=16;*在下審要用SI1W的地方就可以用球表示I變量的聲明：@變量名：值;這里的=±^CSS可以直攙蝙譯過去freight;PBMIttBTT!郵凸;left:border,：!^border;^(calan}:red;background-@(color};bl.Liie;|is200iJX]gpos：relative;@left：400px-*border:Ipx這里的=±^CSS可以直攙蝙譯過去freight;PBMIttBTT!郵凸;left:border,：!^border;^(calan}:red;background-@(color};bl.Liie;|is200iJX]gpos：relative;@left：400px-*border:Ipxsolidwidth:200pxjheight:200px;/*position:relative;left:400pxjborder:Ipxsolidredjcolor:redJbackground-color:blueItssTertl.boTillessTest3.html用變量聲明變量屬性名：用變量去定義一個屬性名的時候，用的時候，一定要給這個變量名家一個大括號。@｛變量名｝*定交理；鼬ffSi歐與卿涯握■啪!叮5細2。％勺relative;g'left^Wpxif：鞋】?h?『門|:網(wǎng)1即red;3^cola^color'lb■lessIest5.htmlEtenJ.Iess舊0{12mdthz^Wyheight:ii;pD5rtL￡7n;^poj.jLeft:6口尸dK：(c^LorJ^red;background-fcatar)::blue;19}1口2s定義穗：這里的以直瞄圣過去3蓉/■.box\witft/r:200px;height::200pxjposition:relative;Left:400pxj9border-.Ip翼molidred;coLar-:red,background-coLorzblue;■2}變量存圖片路徑地址等：注意用變量定義一個路徑的時，在用時，一定要在整個路徑的外面加上一對引號，且路徑名在用的時候也要加大括號;定菠里：：理的主暮「5弓可以直推瑞譯過去-□.UDX{Midth:20&^x;height:2&9:;position:relative;Left:4003x;bord&r:1ixsolidred;color：red;bockground-iinoge:url()，/injg/u5.erbg_92,jpg1);：20ti;■:k:relative;/'ill：-':40&p:;)o-Jerilp■:solidred;jicili:r:,-iilor；1；'mgE:1../ime1;lin7box|wtJt/i:;hsig/it:伽；Fpositwp：^ptM；15Left:lbborder1,^border;'{color}:rfid^LS//backgrauind-^fcDlor}:blu?;19uacfegrotind1-image;url(1母{血眠}/u5e「bg_9Lj能，)四}混合混合寫法：(引用寫法)把另一個選擇器的名字放在這個樣式里，這個樣式就會具有放入的選擇器的樣式;把A選擇器名字放入B的樣式里，B就會具有A里的樣式；如下圖：編譯前和編譯后!□「542*定艾疝重二這里成隆奔仁與5可以直族牖樣過去61；5*pos:relative;m*/7P并1：4的『1：,:；/□?class{8I：：lbord€rilpxsolidred;gfonte2epx/40px“?眥雅黑七9'㈣color;EcoL^rired;101:r--/1rb';|7borcfer:Ipxsolidred;Stext-crLTg:centerj12:tont：20px/40pX“㈱姍W；9}or}zred;!&□.bow{14bolder1：i-Jh■Ir-1Jr；11kvicft/i;200pxj15text-oLig^ticenter;12height!200pxj16}IBf~TDFT:reJstiwe;ITS-box{14:￡e/t:400|ix;15訊dth魂w.15|font;2?/40y作作塵19height:16:colorired]29positioni：§pcs517:border*Ipxsolidred;2118:text-at'tffn:centeif;221;理非;,一、19b□ckground--irmge1url(B.-/img/userbg_02?jpg1)23bacjltgrai/nd-image:url(piMgeJ■/userbgL_02Bjpg1)j2B}24}一---Hl口,box2{2EJE1ubox2(22kvicft/i:;200[^xj26；23height:200pxj27h&ight:鼬：捉poszf~TDFT:rels±iwe;28pasitian?3pcs3八Left:4#epxj29隨]■m—t;2&：font:20Px/40px”齡雅里七3927colorired]51bsckjground-J{coLor):blue;28bor-der*Ipxsolidred^32}29:text:?:enter--1-：.3S:■3-11_background-coLanbluej混合帶參混合帶參，參數(shù)可以帶值①混合帶一個參數(shù)

②混合帶多個參數(shù)A.單獨對每個參數(shù)進1行修改4546〃溫儡斜蠲47D.border2(-Lenz^px,^4546〃溫儡斜蠲47D.border2(-Lenz^px,^h：solid^r:yellow){4SiiorJer:他Len^style^color;49}5?Q.box4031.class].border2();.horder2(^bLe:15px);.border2[:dotted!\.borden2[；:olo-:gra^);56579口.box4(0ifont:20PX/403X”微欽睡里“；1:coLor:redjborder:lpxsolidred;text-aLzgn:center^A-\rmrgir?:10px;[floatsLe/t■|width:290'pxjjheight:業(yè)叩x;8bor-der:1pxsolidyellowy9border:15pxsolidyellow;0border:4clottedyellowj|1border:4pxsolidgray;2j.harder?(-^bLenziepXj^style:dottedor:blue)jbord&rz10iKdottedblue;

9兼容性共用樣式&口-box5hadow(^x:SpXjgy:Spx3glarea:5pxtgcolor:#ccc){-^ebki.t-bax-shado^z@x野@area^Icolor;j-moz-box-shadow:@x@ygarea^color;//^rfox-ms-box-shadow:京■/)areaJcoLor^4-a-box-shadow@y@ap&a@)cd!dp;//safira蘋果box-shadow:■/?area：'colorj?■□-box5{?classj.bDxShadouf);}63}64^.boxS■{6566707172137475766566707172137475767778border:Ipxsolidred;'.center;margin:10px;fLoat'.left'尻d比;200pxjhezgfit:2002ix;-webfeit-￡?c??r-s/]c?t/c?w:Spx5px5px.#gccj-moz-box-shadow:Spx5px5px#ccc;-ms-box-shodow:5px5px5px#cccj-o-box-shadow:5px5p王5p?#ccc;丹』—5px5px5px#ccc^匹配模式(1)Less內容:37〃匹B勰式?朝右前三聞形，?：耳口?七!-rangle(right,:5p>：?It:red){99:banker—width:jcptor:transparenttr^nspair-enttriansparent@匚§barJer-5tyi-e:solidsolidsolidsolidj}覘式-朝舊的三角形140.triangle{botto?,;5「：“：,Jc:red){15:bo^de^-krtdth:;bo^er-c&Lor:tpamsp召renttir-aosparenttean&parent;border-5t>Le:solidsolidsolidsolid;}〃四怨式-朝朝三甬形2￡)□.triangle(Le/tf:-?;red)(:bar-d^-kfidth-■Jbar-d&r-cdLor:transparent@>ctranisparenttransparent":border-si.e:solidsolidsolidsolid;M}

5網(wǎng)width:0■height:6;QverfLo^/:hiddenj.triangletop,^fcJpx^green);.triangle(bottomf23>blue);Css生成內容:>3-.sjx3{wlc/th:0;height:0;￡?verfLohf:hiddenjbard&r-coLor1bord巴尸-mHdth>3-.sjx3{wlc/th:0;height:0;￡?verfLohf:hiddenjbard&r-coLor1bord巴尸-mHdthborder-caLorborder-styleLess:巧#/公用的#式，園Tffi腕個匚比55里、如V第一個愁敢是回定的格就，后面的參勵與上面的方蜷持一期：I7Q-triangle(f.譏5「、jli.::red)■(也:width:*9:0;:c1?QverfLowihiddeiijH:FRorgin-tap：!10p￥；^2:disptay;irline-black;口}J4dTtrgl{.triangleftopj,20PX,green);垢}'??□^trgZf.tpiangle(bottomfH&i酒green);舊)-a/tre3，l11:.t:riangle(Le/±j20-pxfgreen)jU}■■■-I3a.trg4^|I.tf,iangle(r-i5ftt?20：>^,green)j}Css:5S5.Te5.t3.htmII曲tc■就3.le■尊導PltestS.cssS}!7口.trg3(LBbo/Y/er-width:20pxjborxJer-coLor:transparentborder-style:solidsolidflwicftJb:0s口height:0;overftaw:hiddenjffjorgin-top:10pxjdisplay:inlioe-block;冶}口口.trg4(bo/Y/er-width:20pxjbort/er-cotor:transparentborJer-jtyte:solidsolidHwidtJb:0s12height:0;ou&rftow:hidden;margin-fop:10pxjdispLay:inlioe-block;w}greentransparenttrainsparentjsolidsolid;transparenttranspareintgreen?solid5olid;效果:嵌套舉例：<divclass="box6"><H2>Box6</h2><ahref="#">j5^</a><ul>1i><ahr日十="#">uJ.l開始啦</a></li>1iXahref="#"*uJ.2開始啦t/a></li>1i><ahref="#">uJ3開始啦</a></li>1iXahref="#">ul4fl始啦〈/a></li>1i><ahref="#">ul5開始啦a></li>1i><ahref="#">uJ.6開始啦</a></li></u]>4/rHw、coLor:green;].box6-{coLor:green;.classj.border1();】h"font:15px/20px.徵欺，黑七caLor:greenjEdo~JL61D.box6h2{162font:15px/20px”微軟雅黑飛L63}L時口.box6p{165|L66}3ui(

^rcrrjtn:0j

￡ist-styte:none;IJ1{.height:30pxjbackground:#CCCCCCjL67E1.box6ul{L6B|L69|170}margin:0jList-style:none■a{bLw：戶如；1710.box6ulli{L72L73height:30px;background:#CCCCCC;^.75D.box6ullia{

coLor:red■176:P7}h~7o上一層選擇器：用&表示Hles^Te&tS.html1700.box6u1li{171height:30px;172background:#CCCCCCj173}1/^n.box6u1lia{Jr175coLor:red;1/176}1770.box6u1lia:hover《178cofor:bluej17QI運算注意：在做減法運算的時候，減號要加上空格。其他運算符+*/不用加空格;舉例：less-css1Ssiboxlfwidth:@w;_丁、height:gw+10?;減法的運算，減號左右必須有；height:-^3;/空格，否則會報umkfinM錯誤3border:Ipxsolidfrfea；l-ICM^iS.-nmlf切sI??-活棒■?*氛P袒瞞二海.feI「Ft|.boxl{width:360px;height:-108px;height:20Qpxjbo

溫馨提示

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

評論

0/150

提交評論