Teko skaityti tai tam tikra dienoraščio ... maniau jis buvo gražus į katalogą tai ateityje ref .... taip pat gali būti svarbus pokalbis klausimas, kad galėtumėte paprašė, tam tikrą dieną ....
Parašyk CSS fragmentą, kuris bus rodomas naujesnių naršyklių dalį mėlynai senose naršyklėse, raudona, žalia IE7 IE6 ir juoda
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Re-dviračių Buzzword ir Web Development reiškia nesiskiria. Ji taupo energiją, pastangų!
Per metus raštu CSS ir kurti HTML iš dizaino, aš po keletą geriausios praktikos, siekiant taupyti laiką ir energiją, ką mes paprastai terminas "Pakartotinis išradimas the Wheel". Laikas ir vėl, aš pasakiau sau, kad man reikia sukurti keletą šablonų, kai standartinis pakartotinai naudoti CSS, kad norėčiau naudoti savo būsimo darbo Out of the box. Nors ne visiškai, bet man pavyko pasiekti kai kurių tikslų.
Be toliau, pakartotinis naudojimas CSS, aš turėjo bent keletą CSS sistemas, kurios yra visuotinai prieinami mus ir nusprendė įdėti juos naudoti, nes jie bandė ir išbandyta ir sukūrė daug patyrusių programuotojų atrodo, nei sau. Dar svarbiau - išvengti pakartotinio sukurta ".
Nors žinoma, veteranų, aš bandė su rašikliu, kai pagrindinės sąvokos, geriausia praktika ir (arba) mintys, kad atvyko į kuriant šias sistemas, RE-Cycling CSS. Tikiuosi tai padės kai kurių CSS kūrėjai, kurie tik ruošiasi ir neseniai sėdo CSS orkestru!
Naudokite pavadinimų konvencijų
Tai turi būti svarbiausias veiksnys, CSS / HTML pakartojamais. Suteikti puslapio elementus, atitinkančius pavadinimus leidžia pakartotinį naudojimą puslapių komponentų ir jų stilių su mažai arba pakeitimus. Atitinka šio argumento, Net HTML5, esminio pakeitimo pokyčiui per jo pirmtakai, įvesti tam tikrą struktūrinę žymės viz. <article>, <section>, <header>, <aside> ir <nav> [, Ką HTML5 bus pareikšti? ]. Net su HTML 4 straipsnio arba mažiau), tai geriausia pavadinti standartinius skirsnius savo puslapyje consistanly kaip paprastą pavyzdį žemiau ...
Atminkite, Dauguma Jūsų projekto puslapius, galų gale, turintys tuos pačius pagrindinius struktūrinius elementus. Nustatyti šiuos bendrus esminius puslapio elementus ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Atstatyti numatytuosius stilius (CSS Atstato): Nesvarbu, ar jūs naudojate sistemą arba parašyti savo, jūs turite pateikti CSS naujo [ Kas yra CSS Atstato? ], nes jie sumažina arba kartais pašalinti vizualinius neatitikimus, atsirandančius tarp įvairių naršyklių. Paprastais žodžiais tariant CSS Atstatyti mechanizmas nustato stilius HTML elementui neišskiriančių ar neapibrėžtų reikšmių, todėl viršesnis jokių naršyklės numatytąsias vertes, jie gali kelia. Tai suteikia nepriekaištinga reputacija, nustatyti šie elementai neturi jokių user-agent numatytąsias [savybes CSS2.1 User Agent Style Sheet numatytuosius parametrus ]. Visi CSS sistemas turi iš reset mechanizmą. Jeigu rašote jūs savo CSS naujo, Žodis atsargiai, kad jei atsitiktų pamiršti naujo pagrindinį turtą, gali sukelti kryžminį naršyklės klausimais, kad yra labai sunku derinti. Atminkite, kad laikyti Atstatos stilius kopiją ir upuść juos į kiekvieną naują projektą, kurį sukurti.
kūnas, div, dl dt, dd, ul, olis, Li, H1, H2, H3, H4, H5, H6, iš anksto, forma, fieldset, įėjimas, pasirinkite, Textarea p, blockquote, stalas, TH, TD { siena: 0px; margin: 0; padding: 0; }
Rinkinys Numatyt (pradinis stiliai) elementais:
Po to, kai jūs nustatėte (nulį arba NULL) numatytąsias vertes tam tikrų atributų tam tikrų HTML elementų, būtina taikyti keletą visoje kiekvieno iš šių elementų, pavyzdžiui stilius. Tai numatytasis parametras gali skirtis, kaip už dizaino arba pagal geriausią praktiką, jums sekti.
Dauguma CSS sistemas, visada įvedamos kai kurios naujos defaults, be naujo numatytuosius naršyklės stilių.
Šie nutylėjimą yra tuščia User-Agent numatytąsias [, nulupama toli CSS Reset), tai bus nuosekli visose naršyklėse.
Atminkite, kad pradiniai stilius yra naudojamas, norint nustatyti ketinate būti naudojamos visos dizaino stilių. pvz.
HTML {font-size: 77%; font-family: Arial, sans-serif;} stiprus, h1, h2, h3, h4, h5, h6 {font-weight: bold;}
Anotacija stiliai Bendrojo HTML komponentai ir bendrų klasių:
Dauguma projektas sudarytas iš kelių puslapių turėti bendrų HTML elementus, naudojamus visoje svetainėje pvz., kai rūšies formų, perspėjimų ir klaidų, nestandartinių langų, švieslentes tt Kadangi tokios sudėtinės dalys vėl naudojami visoje projektų, ji bus naudinga teikti klasių, susijusių su iš anksto nustatytų stilių šių sudedamųjų dalių ir galite sutaupyti sau daug laiko.
Be daugkartinio naudojimo stilių apibrėžti bendrų HTML komponentai, galėtume abstrakčios stilius klasės, susiję su tipografijos, spalvos ar net išdėstymą. Aš pats linkęs naudoti ... bendras pamokas, pavyzdžiui Clearfix, Font08, FontGrey, AlignL, DisplayB tt
forma įvesties {border: 0px background: # FFFFFF; padding: 10px; _padding 0px: 0px 0px; aukštis: 26px; spalva: # 000000; line-height: 30px; font-size: 1.1em;} forma Textarea {siena: 0px; background: # FFFFFF; spalva: # 000000; font-size: .9 Em, line-height: 1,5 tarpo; perpildymas: matomas;} . Fbold {font-weight: bold; spalva: # cccccc;} Fgrey {color: # 666666;} Flightgrey {color: # bbbbbb;} Clearfix {aiški: tiek;} Paskirstytojas {border-top: 1px solid # 647B06, border-bottom: 1px solid # 9CC00A, aukštis: 0px;} Displayb {kalbomis: bloko;}. Displayn {display: none;} Alignr {text-align: right}. Alignc {text-align: center} Floatr {float: teisė;}. Floatl {float: left;}
Išspręsti į bendrų naršyklės Photoshop
Įvairūs naršyklių įgyvendinti CSS kodą ir suteikti skirtingą paramos CSS specifikacijų lygį. Tai rezultatas .... "Naršyklės Quirks", kad mes, kūrėjai paliko spręsti. Ypač, IE6, neduoda ramybės daugumai CSS programuotojams su termino patenkinti. Geros naujienos yra tai patirtis atnešė kartu galimas daugkartinio pataisymai į šiuos klausimus (dažnai vadinamo "kaip CSS hacks ).
Atminkite, laikyti šios hacks ir (arba) nustato patogu
/ * Taip priartinimas: 1 taisyklė yra specialiai IE6 + IE7. * / * Html. Clearfix, *: Pirmosios vaiko + html clearfix { priartinimas: 1; }
Laikyti Jūsų CSS tobulinimas
Pagaliau. Jei įkvepia ir ketinate naudoti vieną ar daugiau CSS sistemas, "Heres yra greitas sąrašą keletas populiarių tuos ....
Atminkite, kad naudojant CSS sistemas nereiškia, kad esate tingus susikurti savo ... Tai reiškia, kad esate protingas, kad mokytis iš kitų patirties ir klaidų, Taupykite laiką ir didinti našumą!!
CSS baigė 10 metų egzistavimo šiemet! Tie, kurie buvo maždaug už o, uždirbti savo duonos (arba ne), naudojant CSS, tada jums gali žinoti, kaip mes jau badauja geras pasirinkimas šriftų. Net trūksta šriftų dizaineriai, pavyzdžiui, CSS Zen Garden pasinaudojo CSS fono paveikslėlius pakeisti šriftus daro kai kurie jų dizaino teisingumo vykdymo. Mes taip pat bandė Blykstė / JavaScript ® hacks pasiekti mūsų dizaino tikslus. Jokiu būdu tai neteisingas būdas gauti pageidaujamus šriftus į mūsų interneto dizaino, bet tikrai tai nėra labiausiai pageidautinas būdas. ir per metus web dizaineris, kaip ir aš, visiškai rėmėsi dešimt ar šriftus savo dizaino.
Naujausi pokyčiai interneto standartai ir šriftų formatų, kad tai įmanoma padaryti HTML tekstą, išskyrus tuos pačius senus numatytuosius šriftus, šrifto. Ateina "_AT_ fontface" CSS decleration.
"@ Fontface provids sprendimą susieti su faktiniu šrifto failą ir pasirinkite jį iš interneto. Naudojant @ fontface, dizaineriai gali naudoti šriftus be užšaldyti kaip fono paveikslėlius tekstą. Įgyvendinimas yra labai tiesiai pirmyn, kaip parodyta žemiau, bet, kaip visi geri dalykai turi CON jo, ne visos naršyklės palaiko vieną šriftą ". Jei jūs planuojate naudoti @ fontface, reikia kirsti naršyklės paramą svetainėje, tada turėsite pateikti šaltinius įvairių šriftų tipų pats.
Naudojant @ fontface
@ Font-face { font-family: "CalligraphyFLFRegular"; src: url ("CalligraphyFLF.eot); src: vietos (CalligraphyFLF ".), vietos (" CalligraphyFLF), url ("CalligraphyFLF.woff) formatas (" woff), url ("CalligraphyFLF.ttf") formatas ("TrueType"), url ('CalligraphyFLF «. -. svg # CalligraphyFLF) formatą (SVG); } @ Font-face { font-family: "Jūsų šriftas"; src: url ("šriftai ir (arba) font_filename.eot"); src: vietos ("Alternatyvus pavadinimas"), vietos ("Alternatename) url ("šriftai ir (arba) font_filename.woff") formatas ("woff"), url ("šriftai ir (arba) font_filename.otf") formatas ("OPENTYPE"), url ("šriftai ir (arba) font_filename.svg # font_filename") formatą (SVG); } h2 {font-family: "Jūsų šriftas", Gruzija, serif ";}
Kaip matote iš pirmiau pateiktame pavyzdyje, į pasirinktą šrifto, šrifto, turi, susieti rinkinį fonttypes pačiu šriftu. Taigi žmonės jį nurodo kaip "Šriftas Kit".
Yra šriftų rinkinių, aiškiai leidžiama susieti su CSS @ font-face turtą pagal galutinio vartotojo licencinė sutartis (EULA).
Naudingos WebFont ištekliai:
Laikas ir vėl, kai visos kitos naršyklės, elgtis, kaip sakė, W3C taisykles, IE spiralių jus iš dvasios kūrimo mėtyti Furia, kad neatrodo, kad pataisą. Tiesiog tokia yra tai IE7 klausimas.
Problema pareiškimas:
Aš ir taip gali daug kitų sunkių interneto svetainių kūrėjai pastebėjo daugiau nei daug kartų, kad kai lizdinė plūdės išdėstymo, dėl hover per keletą nuorodų inkaro žymės), kurių sudėtyje yra konteineris atrodo pereiti keletą taškų į dešinę . Aš bandė google sprendimų šiuo klausimu, tačiau vargu ar bet kokį pagrįstą atsakymą į tai, kodėl ir kai tik jis pavartojamas (kuris gali padėti išvengti šios problemos iš vyksta), taigi aš niekada rasti aiškią problemos sprendimas ...
Galimi sprendimo būdai:
Iš patirties, turiu pranešimas 90 proc kartus, ty, kad šis klausimas yra nustatoma pridedant priartinimo turtą CSS apibrėžimą neteisingai elgiasi konteinerį ...
# Somediv { priartinimas: 1; }
vėl priežastys yra dviprasmiškos ... pabandykite tai ...
Kai elementai IE "hasLayout" nuosavybė, kuri yra "tiesa" pagal nutylėjimą. Daug regėjimo CSS elgesys, pavyzdžiui, alfa filtras veikia tik ant elemento, kad hasLayout. ir {Priartinimas: 1} atrodo tikslinių elementų hasLayout turtą .... Naudinga? I dont think so ...
Priartinimo turtas pat atrodo, palaikoma iki Chrome ", tačiau jo naudojimas įdauža atrodo, kad daug neigiamos įtakos mano išdėstymo ... išbandyti, jei ji dirba Jums ... o jei taip nėra, pagal" CSS Craps žymę šį puslapį "
Vakar, po klausimu aš susidūrė su CSS "Google Chrome" iš naujo ... Aš maniau, kasti truputį giliau į User Agent Style Sheets srityje ...
Rasta šią lentelę CSS2.1 User Agent Style Sheets ... (tie, kurie nežino, kas yra "User Agent Style Sheets", vykdykite Kas User Agent Style Sheets (specifikaciją) numatytąsias vertes .
Išsamų visų CSS 2.1 User Agent stilius numatytuosius spauskite čia
Vakar, kaip ir kiekvienas kitas "Ground Hog diena", aš dirbau dėl kai kurių CSS / Tableless maketus. Viskas buvo gerai IE 7, FF 3 ir Chrome, kol staiga aš pamačiau, kai JT ignorable maržas, kurios matomos tik Google Chrome ". Nors labai keista worring, Jis buvo kažkoks naujas klaidą / klausimas, kad aš ateiti šakų visame, pagaliau kai mano kasdienė darbo prieskonis. Liūdna (bet gražus), kad ji gavo nustatyta per keletą minučių zondo ...
Iš esmės, ji atrodė kaip "Google Chrome" ignoravo mano CSS naujo (marža: 0px). Jis tikrai sukėlė vartotojo agentas stilių, WebKit-padding-pradžia: 40px). Taigi sprendimas buvo iš naujo šį stilių nustatant padding: 0 netinkamas elgesys elementai.
Geras būdas išvengti šios problemos vyksta bet kurio elemento naudoti pasaulio CSS Rest, taip
* {Margin: 0; padding: 0;}
Kas yra User Agent Style Sheets (specifikaciją)?
Ši ištrauka yra paimta iš http://meiert.com/en/blog/20070922/user-agent-style-sheets/~~HEAD=pobj , sekite nuorodą skaityti daugiau User Agent Style Sheets
1 CSS pristato idėją, teigdamas, kad kiekviena User Agent (UA, dažnai "interneto naršyklė" arba "interneto klientas"), turės numatytąjį stiliaus lapą, pateikiantis dokumentus protingas - bet tikriausiai kasdieniškas - būdas. CSS 2 sako, kad, atitinkančios naudotojo agentai turi taikyti tam numatytojo stiliaus lapą (arba elgiasi taip, tarsi jie padarė) ir kad dėl vartotojo agento "numatytasis stilius lapas turėtų pateikti dėl dokumento kalbos elementus taip, kad atitinka bendruosius pristatymo lūkesčius dokumento kalbą; CSS 3 - gali būti tos pačios nuomonės.
Kadangi CSS specifikacijos palikti diegimas, ar naudoti "Real" stiliaus lapą už numatytąjį ekrane ar ne, tai nenuostabu, kad jūs neturite rasti numatytojo stiliaus lapą kiekvieno naršyklės diegimo aplanke. Skirtingai nei Microsoft Internet Explorer ir Opera, pavyzdžiui (ir kiek aš žinau), Gecko naršyklės kaip Firefox ir Netscape Navigator (ieškoti "html.css"), bet ir Konqueror, kad tai gana paprasta suvokti savo numatytąjį stilių.
Kitas greitas tut. Čia yra kažkas, paprastas ir malonus naudojant CSS POWER ... bet buvo sunku concieve (ir jis tikrai buvo ne man) prasideda. Įrašyta Dropshadow, gali būti torto peice, daugelis iš mūsų, naudojant šiek tiek vaizdo redagavimo įrankiai kaip Photoshop Vidzemes Fejerverkai tt
Priežastis, kodėl aš pasirinko lašo šešėliu naudojant CSS, kad, paprastai kuriant puslapio dizainas / html paraiškos, reikalavimai nuolat Iteracja. Ką reiškia egzistuojančią svetainę su daugeliu vaizdų, kaip tie, vaizduojančių freinds sąrašą arba vaizdų galeriją, ji bus sunku pakartotiniai perdirbti visas apkrovos vaizdų, kurie jau buvo iškrautos pridėti ar pašalinti šešėlius, kad klausimas.
Taigi, jei jūs turite padaryti šiek tiek į priekį mąstymą kuriant, HTMLS pridėti šiuos papildomus padalinius ar paprastai situacija yra, kad jūs turite Loop Logic, gaminantis šiuos piktogramas arba miniatiūros XSL, PHP,. Java arba bet kuri kita programavimo / skriptų kalba, galite pridėti jį bet kuriuo metu, tada yra tik šou ir, slepiasi šiuos šešėliai, naudojant CSS Ekranas turtą, kaip už klientų nuolat kintančių reikalavimų ... aš havn't, padaryti šį perspektyvi rūšiuoti prieš tai ... bet ahev, pradėjo dabar!
Toliau pateiktame pavyzdyje, originalus paveikslėlis šešėlis nemokamai, ir dropshadows taikoma, kaip reikalaujama! Be to, aš jau šiek tiek daugiau, mano ankstesnio TUT triukus [Well! tai tikriausiai yra trumpiausias įvairovė Mokymas, todėl ji yra pateisinama tik tada, vadindamas juos "Tut" ai) apie Naudojant CSS Clip Nekilnojamas parodyti tik
Kodėl aš noriu tai suprasti?? ... Humm!!
Dauguma, CSS rašytojų sutiktų, kad CPT Clip nuosavybė yra tikriausiai vienas iš daugelio JT naudojamų nuosavybės CSS. Tai buvo taip tiesa man ir buvo malonu pamiršti jį, kol aš pradėjau keisti MooTools DVIEJŲ rankenėlę (PIN) Slider sudedamoji dalis (su Kategorijos indikatorius) .
Buvo geras pasiūlymas iš vienos sudedamųjų vartotojams pakeisti Slider komponentą naudojant nukirpti backgroud vaizdus (palyginti su kintamo pločio skyriaus) nurodyti slankiklį asortimentą. Taigi atėjo mano laikas įvesti įdomus, bet JT atestuoto (me Žinoma) vandenys CSS Clip turto,.
Gerai! kaip sunku gali būti? Ne visai ... TAIP ir NE. Sintaksė CSS Clip turtą, yra gana stačios, bet reikšmė / usuage, yra šiek tiek croocked. Su pavyzdžiui, mano atmintyje, kaskart Sėdžiu pertvarkyti savo Slider Script ... Turiu tokeep, šio CLIP turto naudojimo, priminti sau tą logiką, kad aš sukūriau savo scenarijų .... Taigi! Manoma, kad švirkštimo priemonę žemyn, su viltimi, jį įsiminti, ateitis (taip pat ir tų, kurie atrodo naudai boggled CSS Clip turto)
Ką CSS Clip daryti?
Klipas yra viena iš modulio Visual Effects CSS 2.1. Paprasčiau tariant, jo darbas yra matomas langą ant objekto, yra nukirpti, taigi joms nukerpant vaizdus ir kurti miniatiūras neturint sukurti papildomus failus (aš jau geriau naudoti šią funkciją Slider komponento 
)
Naudojant CSS Clip turto, galite sukurti iškarpą naudojant rect formą. Kaip ir daugelyje kitų CSS savybės (kaip maržos, apdaila ir tt), naudojant rect reikalauja viršų keturios koordinatės, Dešinė, Apačia, Kairė (TRBL). Croocked šio turto pobūdis atspindi kai atidžiau pažvelgti, kaip klipas apskaičiuoja iškarpą regioną, naudojant šias keturias koordinates (smegenys siunčia į tam tikrą laiką išmesti). Dabar jums supainioti apačios pradeda nuo viršaus, ir teisė prasideda iš kairės. . Jūs matote, ką aš pasakiau? .... Taigi šis pranešimas ...
Tai šiek tiek painiavos gali lengvai išnykti, šį vizualų paaiškinimą CSS Clip / rect turto, kaip nurodyta toliau!!!
Užduotis, mes pradėjome klipas šį vaizdelį į Kvadratas ieško paveikslėlio (o taip pat plataus kampo vaizdas)
| |  |
| Pirmapradžio Thumbnal / Vaizdo | Įrašo Reikalavimai Sqaure Thumbmail |
Prieš mums teko susidurti su CSS sukurti puslapių maketus, derinant tam tikrą turinį viduje lentelės langelį atrodė tik vaikų žaidimas. Tiesiog nustatykite "align" arba "valign", lentelėje turi savo pasirinkimą derinimą, torto gabalas nuosavybė!
Su CSS išdėstymai, nors mes turime "vertical-align" turtą elementų, jis ne atrodo taip paprasta, kaip "align" arba "valign", savybių. Norėdami būti daugiau specifiic, "vertical-align" niekada, atrodo, išspręsti jūsų problemos, ypač jei yra parašyti įvairių naršyklių CSS gabalas.
Be HTML lentelėse, centravimo ant objekto problema, tai kai per turinčio padalinys vaizdas arba tekstas, tikriausiai kiekvienas UI / CSS kūrėjai košmaras tam tikru momentu. Šis problema toliau Ekstrapoliavusi, savo rūpesčius suderinti, jei objektas turi būti centre, yra dinamiškas pobūdžio, ty kai jos aukštis yra nevienodas (nežinoma aukštis).
Nors nėra žinoma tiesiai į priekį sprendimas, kad būtų vykdomos visose naršyklėse, mes turime spręsti, sprendimas, kad aš bandė atvykti ne daro, atrodo, dirbti, kad aš išbandžiau keletą naršyklių (IE6, IE 7 , FF).
SPRENDIMAS:
Naršyklėse kaip Mozilla, Opera ir Safari, keistai elgiasi, "vertical-align" nuosavybė gali būti patraukti savo pojūčiais, tiesiog "Ekranas" turtą turinčio padalijimo "stalo ląstelių kalbomis: lentelės ląstelių) .
Problema vis dar lieka IE naršyklių šeimai, kuris, tačiau neatrodo, kad suprastų, ką turi "lentelės ląstelių" nuosavybės ir nežino, kaip jie, jie tiesiog ignoruoti. Sprendimas pateikiamas toliau, nors paprastų, Reklamuokitės keletą daugiau DOM elementus į savo HTML padaryti dalykai įvyktų.
CSS ir HTML atrodo taip
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> Peržiūrėjimų skaičius: 3456 </ div>
</ Div>
</ Div>
Rezultatas atrodo taip:
peržiūrėti demo čia | Parsisiųsti šaltinio failus (atsisiųsta 453 kartus)
Top išlygina CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> Peržiūrėjimų skaičius: 1234 </ div>
</ Div>
</ Div>
Rezultatas atrodo taip:
Dugnas Suderinti CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> Peržiūrėjimų skaičius: 1234 </ div>
</ Div>
</ Div>
Rezultatas atrodo taip:
peržiūrėti demo čia | Parsisiųsti čia
Atrodo, amžiaus, nes aš bandžiau rasti tinkamą sprendimą į šią lygiavimo problemą. Bet dabar su šio tirpalo, jaučiuosi šiek tiek taikos.
Su viltimi, kad kažkada
Parsisiųsti virš tirpalo čia (atsisiųsta 453 kartus) ... suprantamumo CSS ir HTML , CSS nebuvo optimizuotas
PS: Ir beje, tie, kurie miniatiūros kai kurių nuotraukas aš spustelėjo ...
CSS-IE naršyklių: Tai ne naujiena CSS kūrėjams, kad CSS vaikų selektoriai, kaip toliau pateiktame pavyzdyje, neatrodo dirbti IE.
pvz div> span {kai css}, tai reiškia, kad "kai elementas span yra vaikas (ir NE vaikaitis ar puikus didysis vaikas ir tt) su suskirstymas elemento".
Bet mes panaudojome šią CON mūsų naudai. Istoriškai vaikas parinkėjas buvo naudojamas paslėpti CSS komandas iš IE. Tiesiog pastačius html>body prieš bet CSS komandų IE ignoruos:
html>body .foo { CSS commands go here ;}
Tai veikia, nes <body> visada vaikas <html> - Žinoma, jis gali niekada būti anūkas arba Mazmazbērns, iš <html> .
Dabar, kad IE 7 supranta vaikų selektorių, turite įterpti tuščią komentaro žymą, iš karto po didesni nei ženklu IE 7 bus ne suprasti šį selektorių (kas žino kodėl?), Ir todėl visiškai nekreipti dėmesio į šį CSS komandą.:
html> /**/ body .foo { CSS commands go here ;}
Jei ne jau matė tai anksčiau, skaityti per šių, taip pat
