Luges seda mõnel blogi ... arvasin, et see oli tore kataloogiin see tulevikus ref .... Samuti võib olla oluline intervjuus küsimusele, et teil oleks küsis ühel päeval ....
Lisan väljavõtte CSS, mis näitab lõikes sinine vanemate brauseritega, punane uuemad brauserid, roheline IE6 ja must IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Oli see kummaline küsimus, kus tükk Javascript töötas hästi kõikide brauser ans nagu tavaliselt baar IE 
... Simple see oli, kuid kuna skript ei kirjutatud mulle, see võttis aega siluda see "objekt ei toeta seda atribuuti või meetodit" viga, et ainult IE oli oksele. Ilmselt! Kui ma kirjutan skripti, ma ei saanud seda viga üldse, kui ei sega minu muutuja nimed välja Ids :).
Probleem: Object ei toeta seda atribuuti või meetodit (real 3)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Lahendus:
Viga on genereeritud thirdrow eespool toodud näites (Line 3 ... "shortdesc = document.getE ...."). Üritasin kõik omamoodi rumalaid asju, et I dont isegi väärt äramärkimist siin ja lõpuks arva mida! lihtsalt muutuvas shortdesc var midagi muud lahti viga. Põhimõtteliselt! Muutuja nimi oli erinev fieldID
Paar tundi nüüd olen otsinud lahendusi sõitma / testima mu staatiline HTMLs in Eclipse / Android emulaator. Ei ole olnud täiesti edukas veel .... mida ma mõtlen "Totally" on HTML laaditakse OK kuid kõik CSS ja JS, st visuaalne väljendus ei ole näinud. Kui arendaja sõnu, CSS ei kohaldata lehele ...
Arvasin, et see mõne mehe newbie Android UI arendajad, Kui ma märkida väljavõtte ette, et ma kasutasin, et kuvada HTML.
JA Android spetsialistidele, Palun lisage oma kommentaarid, mis aitavad meil algajatel mobiilne taotluse UI arendajad edasi!
Sorry! kuid Im eeldades, et sa tead, kuidas luua Android Mobile Application in Eclipse.
Loo see, kui teie tegevus, see ei loe faili 'index.html' oma projekti varad / kausta.
public class Test extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WebView webview = new WebView(this); setContentView(webview); try { InputStream fin = getAssets().open("index.html"); byte[] buffer = new byte[fin.available()]; fin.read(buffer); fin.close(); webview.loadData(new String(buffer), "text/html", "UTF-8"); } catch (IOException e) { e.printStackTrace(); } } } Re-cycling on Buzzword ja Web Development see tähendab, ei erine. See säästab energiat, nii vaeva!
Aastate jooksul kirjalikult CSS ja luua HTML alates projekteerib, olen jälginud paari häid tavasid, et saavutada säästa aega ja energiat, mida me tavaliselt perspektiivis "Re leiutada". Ikka ja jälle olen ma ütlesin endale, et pean looma mõne malle mõned standard korduvkasutusega CSS et tahaksin kasutada karbist minu tulevase tööga. Kuigi mitte täielikult, kuid ma ei suutnud saavutada teatud eesmärke.
Edendamisele, Re-Use of CSS oli mul pilk mõned CSS raamistikku, mis on tavaliselt meile kättesaadav ja otsustasin panna neid kasutada, sest need on ära proovitud ja loodud palju kogenud arendajad, kui mina. Veelgi olulisem on "vältida uuesti leiutamine".
Kuigi üldteada, et veteranid, olen püüdnud pen mõned põhimõisted / häid tavasid / mõtted, mis on läinud luua nende raamistike, teha Re-cycling CSS võimalik. Loodan, et see aitab mõned CSS arendajatele, kes on lihtsalt umbes ja hiljuti peatatud CSS bandwagon!
Kasuta nimepanekureeglid
See on kõige olulisem tegur teeb CSS / HTML korduvkasutatavad. Pidada järjekindlalt nimesid leheelemente võimaldab taaskasutamist lehe komponendid ja nende stiilid vähe või muudatusi. Vastavalt sellele väitele Isegi HTML5, kaasa olulisi muutusi muutuste üle oma eelkäijatega on tutvustada struktuuriabi sildid nimelt. <article>, <section>, <header>, <aside> ja <nav> [ Mis HTML5 tuua? ]. Isegi HTML 4 (või väiksem), siis on parem nimetada standard osa oma lehele consistanly nagu lihtne näide allpool ...
Pea meeles, Most lehekülgedel projekti lõpuks sama core konstruktsioonielemendid. Nimetage need ühisosa leheelemente ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Nulli vaikestiilid (CSS Taastab): Kas te kasutate raamistiku või kirjutada oma, peate andma CSS Taastab [ Mis on CSS Taastab? ], sest need vähendavad või mõnikord kaotada visuaalseid vastuolusid, mis tekivad erinevate brauseritega. Lihtsaid sõnu CSS Reset mehhanismi määrab stiilid HTML Element null või null väärtusi, seega ülekaalukat kõigi brauseritega vaikeväärtused võivad kujutab. See annab puhtalt lehelt määrata omadused nende elementide void iga User-Agent Defaults [ CSS2.1 User Agent Style Sheet Defaults ]. Kõik CSS raamistikku ei ole ja reset mehhanism. Kui te kirjutate te oma CSS Taastab, Hoiatuseks, et kui juhtub, et unustada taastada oluline vara, see võib põhjustada piiriülese brauser küsimusi, mis on väga raske siluda. Pea meeles, et hoida koopia reset stiile ja vähendada nende iga uue projekti loote.
keha, div, dl, dt, dd, ul, ol, li, H1, H2, H3, H4, H5, H6, eelnevalt, vorm, fieldset, sisend valige, textarea, p, blockquote, laud, th, td { piiri: 0px; margin: 0; padding: 0; }
Määra Defaults (Baseline Styles) elementidele:
Kui olete seadnud (null või null) vaikeväärtused teatud talle teatud HTML elemendid, on vaja rakendada teatud stiile üle igal juhul neid elemente. Need vaikimisi võib varieeruda ühe disaini või vastavalt parimate tavade te järgite.
Enamik CSS raamistikku, alati tuuakse välja uusi vaikimisi, lisaks ennistamist vaikebrauser stiile.
Need vaikimisi on tühine User-Agent Defaults (kooritud kaugusel CSS Reset), need on järjepidevad brauseritega.
Pea meeles, Baseline stiile kasutatakse, et määrata stiilid, et ei kavatse kasutada disaini kogu. nt.
html {font-size: 77%; font-family: Arial, sans-serif;} tugev, H1, H2, H3, H4, H5, H6 {font-weight: bold;}
Abstract Styles ühise HTML komponendid ja ühise klassid:
Enamik projekt koosneb mitmest leheküljest on ühine HTML elemendid, mida kasutatakse kogu saidi jaoks nt Mingi vorme, teadete ja vigade Custom hüpikaknad, Valguskastid jne Kuna selliseid komponente kasutatakse jälle üle projekte, siis on kasulik anda kehtestatud klasside seotud eelmääratletud laadid nende osad ja saad ise salvestada palju aega.
Lisaks määratletakse korduvkasutatavad stiilide definitsioonid ühise HTML komponendid, võiksime abstraktse stiili klassid seotud tüpograafia, värvi või isegi kujundus. Ma ise tavaliselt kasutate ... tavalist liiki nagu Clearfix, Font08, FontGrey, AlignL, DisplayB jne
vormi input {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; kõrgus: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;} vormi textarea {border: 0px; background: # FFFFFF; color: # 000000; font-size: 0,9 em, line-height: 1.5em; overflow: nähtav;} . Fbold {font-weight: bold; color: # cccccc;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . Clearfix {selge: nii;} . Jagaja {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A; kõrgus: 0px;} . Displayb {kuva: block;}. Displayn {kuva: none;} . Alignr {text-align: right}. Alignc {text-align: center} . Floatr {float: right;}. Floatl {float: left;}
Parandused levinud brauser quirks
Erinevad brauserid rakendada CSS kood ja pakkuda erineva tasemega toetus CSS spetsifikatsioonid. Selle tulemusena .... "Browser quirks", et me arendajad on jäänud lahendada. Eriti IE6 kummitab kõige CSS coders koos tähtaega täita. Hea uudis on see kogemus on koondatud võimalikult KORDUV fikseerib neile küsimustele (sageli nimetatakse nii CSS Hacks ).
Pea meeles, hoida neid hacks / parandused mugav
/ * Järgmised zoom: 1 reegel on spetsiaalselt IE6 + IE7. * / * Html. Clearfix, *: 1.-laps + html. Clearfix { zoom: 1; }
Hoidke rafineerimine Sinu CSS
Lõpuks. Kui teil on inspireeritud ja kavatsete kasutada ühte või mitut CSS raamistikku, Heres on kiire nimekirja mõned populaarsed ones ....
Pea meeles, kasutades CSS raamistikku ei tähenda, et sa oled laisk, et luua ühe oma ... See tähendab, et sa oled tark õppida teiste kogemustest ja vigadest, säästa aega ja suurendada tootlikkust!!
CSS lõpule 10 aastat olemasolu sel aastal! Need, kes on olnud juba mõnda aega, teenida oma leiba (või mitte), kasutades CSS, siis võib teada, kuidas meil on näljas hea valik fonte. Isegi vähene fonts disainerid nagu need, CSS Zen Garden on kasutanud CSS taustapilte vahetada fonts elluviimisel teeme mõned õigusemõistmise oma designs. Samuti oleme püüdnud Flash / JavaScript ® hacks, et saavutada meie disain eesmärke. Mitte sugugi see on vale viis saada kiri soovime meie web designs, kuid kindlasti ei ole kõige soovitavam viisil. ja aastate web disainer, nagu mina, on täiesti tugines 10 või nii fonte oma disainilahendustele.
Viimased arengud veebi standardeid ja font formaadid võimaldavad muuta HTML teksti kirjatüübid muud kui sama vana default fonte. Comes "@ fontface" CSS decleration.
@ Fontface provids lahendus siduda tegeliku font fail ja leidke veebist. Kasutades @ fontface, saaksid kasutada fonte ilma külmutada teksti tausta pilte. Rakendamine on väga lihtne, nagu allpool näidatud, kuid nagu kõik head asjad on CON osa see, et mitte kõik brauserid toetavad singel "font tüüp". Kui te plaanite kasutada @ fontface sisse saidi vajavad läbivoolu brauseri tugi, siis on pakkuda allikatest erinevaid font-tüüpi sama.
Kasutades @ fontface
@ Font-face { font-family: "CalligraphyFLFRegular"; src: url ("CalligraphyFLF.eot '); src: kohalik ("CalligraphyFLF"), kohalik ("CalligraphyFLF"), url ("CalligraphyFLF.woff) formaadis (" woff "), url (" CalligraphyFLF.ttf) formaadis ("truetype"), url ("CalligraphyFLF . svg # CalligraphyFLF) formaadis ("SVG"); } @ Font-face { font-family: "Teie kirjas"; src: url ("fonts / font_filename.eot"); src: kohalik ("Alternatiivne nimi"), kohalik ("Alternatename") url ("fonts / font_filename.woff") formaadis ("woff") url ("fonts / font_filename.otf") formaadis ("OpenType") url ("fonts / font_filename.svg # font_filename") formaadis ("SVG"); } h2 {font-family: "Teie kirjas", Georgia, serif;}
Nagu näete eespool näiteks ka valitud font kirjatüüp, üks on link komplekt fonttypes sama kirjatüüpi. Seega inimesed nimetavad seda "Font Kit".
On Font Kits olemas, mis sõnaselgelt lubab sidumine CSS @ font-face vara all Lõppkasutaja litsentsileping (EULA).
Kasulik WebFont Ressursid:
Minu piiratud oskuste komplekt vahendeid, nagu Photoshop ja Illustrator, võin ausalt tunnistama, et ma olen parem arendaja kui ma olen disainer. Aga minu taust core (serveripoolne) arengu Java / PHP / COBOL, on olnud väga positiivne mõju minu UI arendamise oskusi. Mida ma mõtlen on, luues samas minu designs, st kui ma ei projekteerimine, ma mõtlen, kuidas disaini saab kõige paremini ümber HTML-CSS ja tehes samal ajal HTML-CSS, ma annan mõelnud backend tehnoloogia ja teha mõistlikult kindel et HTML on võimalik kergesti üle võtta XSL silmuste või PHP pikad jne
Aastate jooksul olen visanud pea edasi disainilahendusi UI disainerite kes ilmselt donot aimugi mis HTML või CSS on. Kõik need aastad olen ma mõelnud, et ma oleks küsida liiga palju, kui ma lihtsalt oodata, disainer, kes üritab shov oma "võimatu koodi" disaini alla mu kõri, mõista natuke mida tema disain oleks ümber arvesse. Mis aitaks eks?
Siis ma leidsin selle postituse täna ... Web disainerid, kes ei saa koodi ... Tänan Lord! Ma olen lihtsalt üks paljudest, kes tunnevad sama ... eespool artitle on natuke pikk Hengästynyt .. kuid tasub lugeda, iga sõna sellest.
Tänu Elliot Jay Varud ... ma tunnen kergendust!
Siin on mõned väljavõtted elliots artikkel .
Ausalt, ma olen šokeeritud, et aastal 2010 ma olen ikka tulevad üle "veebidisainerid", kes ei suuda kodeerida oma designs. Mingit vabandust.
... Ma olen olnud vähe täpsem minu piiksuma. Ma rääkisin disainerid, kes ei pea isegi kõige elementaarsem HTML ja CSS oskused omakorda korter disaini tegelik kohas. Pole inimesi, kes tahtlikult ei soovi kood; need, kes ei saa. Ja ma olen ka viidata üksnes esiotsa koodi siin, muidugi on see naeruväärne mõelda, et disainerid peaksid olema hämmastav back-end programmeerijad ...
Me saame "web" kujunduse saata Illustrator, 300dpi, võimatu koodi, puudub järjekindlus / kasutatavust.
~ Amy Mahon
Läheb hilja ja mul wrap selle üles kuidagi. Ma tean, et seal on palju, kes ei nõustu minuga ja mu eesmärk on mitte solvata või häirida kedagi, kes ei saa koodi, kuid ma loodan, et mõned, mida ma olen öelnud peegeldab mõningaid punkte, mis alati tulla, kui delving arutelu.
Aasta lõpus päeval, ma ei kaota une üle, kes suudavad koodi ja kes ei saa. Ma olen lihtsalt tõeliselt üllatunud, et paljud disainerid, et puudub esiotsa oskusi, nagu ma arvasin, et see oli minevik.
Lugege ka kommentaare, seal oli umbes 320 kommentaari, nagu ma kirjutan ... nad on väärt lugeda.
Palun lugege elliots täis postitus siin .. Web disainerid, kes ei saa koodi
Kuna nupp ja teksti on inline, nii et tekst viia end põhja nupp, tekst tundub olevat veidi alla nupp.
Kui soovite need viia tippu, siis on teil panna raadio ja teksti eraldi konteinerites nagu divs või kestab (vastavalt vajadusele) ja nad hoolitsevad viimist. Oleks lihtsam kasutada tabeli lahtrid ka oma disain lühike lubab.
See ei tundu sama igas brauseris, kui iga brauser näitab raadio veidi erinevalt, nii et seal on alati saab olema suurus küsimusi ükskõik, mida te teete.
HTML5 on veel eelnõu. Nagu ma kirjutada, Töö HTML 5, mis algas aastal 2004, on veel antud kuju ühiste jõupingutuste vahel W3C HTML WG ja WHATWG . Sõna on see, et järgmise gen HTML on lisaseadmete ja funktsioonid, mis oleks uus struktuur ja semantika, vormi juhtelemendid, API, multimeedia sildid jne.
Lihtsas inglise keeles ... mis oleks see meie jaoks tähendab UI arendajad ...
<body> <header> ... </ header> <nav> ... </ nav> <article> <section> ... </ Section> </ Article> <aside> ... </ kõrvale> <footer> ... </ footer> </ Body>
Asemel
<body> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div class="article"> <div class="section"> ... </ Div> </ Div> <div id="aside"> ... </ div> <div id="footer"> ... </ div> </ Body>
nt
<video poster="poster.jpg"> <Allikas src = "video.3gp" type = "video/3gpp" meedia = "pihuarvuti"> <source src="video.mp4" type="video/mp4"> </ Video> valida <Audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </ Audio>
On veel palju muudatusi / täiendusi uuem versioon ... Kas hoida ajakohastamine see postitus nagu ma kohanud ühtegi huvitavat kasulik ones .... Jälgi seda ruumi
Käesolev dokument ei pruugi anda täpset teavet HTML 5 spetsifikatsioon on aktiivselt arengut. Kui kahtled, alati kontrollida HTML 5 spetsifikatsioon siin .
Ikka ja jälle, kui kõik teised brauserid näinud käituma öelnud W3C eeskirjade IE spiraalid teid välja arendamine Vaimu viskamine pahur tuju, et ei näi olevat lahendust. Just selline üks on selles küsimuses IE7.
Problem Statement:
I ja nii võivad paljud muud rasked veebiarendajad märganud rohkem kui palju kordi, et kui seal pesitses ujukite paigutuses, on hover üle mõned lingid (ankur tags), mis sisaldab konteiner tundub suunata vähe pikslit paremale . Olen püüdnud google lahendused selles küsimuses, kuid vaevalt leidnud ühtegi mõistlikku vastust, miks ja millal see toimub (mis võiks aidata vältida seda küsimust ei juhtuks), seega ma ei ole kunagi leidnud selge lahendus kas ...
Võimalik lahendus:
Pole kogemusi, mul on teate 90% protsenti ajad st, et see küsimus on fikseeritud, lisades zoom vara CSS mõiste valesti käitub konteiner ...
# Somediv { zoom: 1; }
jälle põhjused on ebaselged ... proovige seda ...
Mõned elemendid IE on "hasLayout" vara, mis on "true" by default. Paljud visuaalsed CSS käitumist, näiteks alfa filter töötab ainult element et hasLayout. ja {Zoom: 1} Tundub, et anda eesmärgi elemente hasLayout vara .... Kasulik? I dont think so ...
Zoom vara näib samuti toetab Chrome, kuid selle kasutamine varal tundub, et teha palju negatiivset mõju minu kujundus ... seda proovida, kui see toimib teie jaoks ... kui seda ei juhtu, järjehoidja selle lehe all "CSS craps"
