Bija lasījis šo dažās blogā ... domāju, tas bija jauki, lai katalogā šis nākotnes ref .... arī varētu būt svarīgs intervija jautājums, ko jūs lūdza kādu dienu ....
Uzrakstiet fragmentu CSS, kas parādīs rindkopu zilā in vecākām pārlūkprogrammām, sarkanā jaunāku pārlūkprogrammu, zaļš IE6 un melns IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Re-Riteņbraukšana ir Buzzword un web izstrāde tas nozīmē, ne ar ko neatšķiras. Tas taupa enerģiju, kas izpaužas centienos!
Vairāk nekā gadu rakstiski CSS un veidot HTML no dizainparaugiem, esmu sekojis dažus labākās prakses, lai sasniegtu ietaupot laiku un enerģiju, ko mēs parasti termins kā "izgudrošana no jauna ritenis". Atkal un atkal, man ir teicis sevi, ka man ir izveidot dažas veidnes, daži standarta otrreizēji izmantojami CSS, ka es varētu izmantot ārpus zonas savā turpmākajā darbā. Taču ne pilnībā, bet es izdevās panākt dažus mērķus.
Veicināja, atkalizmantošana CSS, man bija apskatīt retajiem CSS sistēmu, kas ir plaši pieejami mums un nolēma nodot tos izmantot, jo tie ir izmēģināts un pārbaudīts un rada daudz pieredzējuši attīstītāji, kas par mani. Vēl svarīgāk "izvairītos no atkārtotas izgudrošana".
Lai gan zināms veterāniem, esmu mēģinājis pildspalvu daži galvenie jēdzieni / paraugprakses / domas, ka ir ieguldīts radot šos pamatprincipus, lai padarītu Re-Riteņbraukšana CSS iespējas. Ceru, ka tas palīdzēs daži CSS izstrādātājiem, kas ir tikai par to un nesen iekļuva CSS bandwagon!
Izmantot nosaukumu konvencijām
Tam ir jābūt vissvarīgākais faktors, lai padarītu CSS / HTML atkalizmantojami. Piešķirt konsekventu nosaukumus lapas elementiem iespējo atkalizmantot lapas komponentiem un to stilu ar neliela vai modifikācijas. Saskaņā ar šo argumentu, pat HTML5, būtiskas izmaiņas, izmaiņas laika tās priekšgājējiem, ir ieviest dažas strukturālas tags viz. <article>, <section>, <header>, <aside>, un <nav> [ Ko HTML5 celt? ]. Pat ar 4 HTML (vai mazāk), tas ir labākais nosaukt standarta sadaļām savā lapā consistanly tāpat kā vienkāršu piemēru zemāk ...
Atcerieties, Lielākā daļa lapām jūsu projekta, galu galā, kam tos pašus galvenos strukturālos elementus. Identificēt šos kopīgas pamatinformācijas lapas elementus ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Reset noklusējuma stilu (CSS Atiestata): Vai jūs izmantojat sistēmu vai rakstīt savu, jums ir jāsniedz CSS nodzēš [ Kas ir CSS Atiestata? ], jo tie samazina vai dažreiz likvidēt vizuālos neatbilstības, kas rodas starp dažādām pārlūkprogrammām. Vienkāršā vārdiem, CSS Reset mehānisms nosaka stilus HTML elements ar nulles vai Null vērtībām, tādējādi ignorējot jebkādas pārlūka noklusējuma vērtības var pozās. Tas nodrošina tīru šīferis, lai uzstādītu īpašības šo elementu neesošu jebkādu User-agent noklusējumu [ CSS2.1 lietotāja aģents Style Sheet noklusējumu ]. Visi CSS sistēmas darīt ir par reset mehānismu. Ja jūs rakstāt jums pieder CSS nodzēš, ņemiet ir tas, ka ja tev gadās aizmirst nomainīt galveno īpašumu, tas var radīt krustenisko pārlūkprogrammas jautājumiem, kas ir ļoti grūti atkļūdot. Atceros, Keep kopiju reset stilu un nomest tos katram jaunam projektam, ko jūs izveidojat.
ķermeņa, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, H5, H6, iepriekš, forma, fieldset, ievadi, izvēlieties, textarea, p, Blokcitāts, galds, th, td { border: 0px; margin: 0; padding: 0; }
Noteikti Noklusējumi (pamata stili) elementiem skaits:
Kad esat (līdz nullei vai null) noklusējuma vērtības atsevišķu atribūtu dažu HTML elementus, ir nepieciešams piemērot dažus stilus visos gadījumos šo elementu. Šie noklusējuma iestatījums var atšķirties, kā vienu dizaina vai pēc labākās prakses jums sekot.
Lielākā daļa CSS sistēmas, vienmēr ievieš dažus jaunus noklusējumus, papildus atiestatīt noklusējuma pārlūkprogrammu stilus.
Šie noklusējuma tiek anulētas no User-agent noklusējumu panta attīrīta prom ar CSS Reset), tie būs konsekventi visiem pārlūkiem.
Atcerieties, sākuma stili tiek izmantoti, lai noteiktu stilu, kas gatavojas izmantot dizainu visā. piem.
html {font-size: 77%, font-family: Arial, sans-serif;} spēcīga, H1, H2, H3, H4, H5, H6 {font-weight: bold;}
Abstract stili Kopīgās HTML komponenšu un kopējām kategorijām:
Lielākā projekts sastāv no vairākām lapām būs kopīgi HTML elementus, ko izmanto visā vietnē, piemēram, kaut kādu formu, brīdinājumus un kļūdas, lietotāja logus, gaismas kastes u.tml Tā kā šie komponenti tiek izmantoti atkal visos projektos, tā būs noderīga, lai nodrošinātu komplekts klasēs, ar iepriekš definētiem stiliem šīm sastāvdaļām un jūs varat saglabāt sevi daudz laika.
Izņemot definēt atkārtoti lietojamu stilu definīcijas kopējo HTML sastāvdaļas, mēs varētu abstraktu stilu klases, kas attiecas uz tipogrāfijas, krāsu vai pat izkārtojumu. Es pats mēdz lietot ... kopīgus kursus, piemēram Clearfix un Font08 un FontGrey un AlignL un DisplayB uc
veidlapa ievade {border: 0px; fons: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; augstums: 26px; krāsa: # 000000; līnijas augstums: 30px; font-size: 1.1em;} veidlapa textarea {border: 0px; fons: # FFFFFF; krāsa: # 000000; font-size: .9 em; līnijas augstums: 1.5em; pārplūde: redzams;} . Fbold {font-weight: bold; krāsa: # cccccc;} . Fgrey {color: # 666.666;} . Flightgrey {color: # bbbbbb;} . Clearfix {skaidra: gan;} . Dalītājs {border-top: 1px solid # 647B06; robežu apakšā: 1px solid # 9CC00A, augstums: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: right}. Alignc {text-align: center} . Floatr {float: right;}. Floatl {float: left;}
Gadam uz kopīgiem pārlūkprogrammas quirks
Dažādi pārlūki īstenot CSS kodu un sniedz dažāda līmeņa atbalstu CSS specifikācijas. Rezultāts šai .... "Pārlūka quirks", ka mēs izstrādātāji ir palikuši risināt. Īpaši, IE6 vajā visvairāk CSS coders ar termiņu izpildīt. Labā ziņa ir pieredze savedis kopā iespējamos atkārtoti lietojamu labojumus šajos jautājumos, bieži vien sauc par CSS ceļveži ).
Atcerieties, Turēt šos hacks / labojumi parocīgs
/ * Šādiem tālummaiņa: 1 noteikums ir īpaši IE6 + IE7. * / * Html. Clearfix, *:. 1.-bērns + html clearfix { tālummaiņa: 1; }
Saglabāt Attīrīšanas savu CSS
Beidzot. Ja Jums ir iedvesmoti un plāno izmantot vienu vai vairākus CSS sistēmu, Lūk ir ātrs sarakstu dažus tautas tiem ....
Atcerieties, izmantojot CSS regulējumu nenozīmē, ka jums ir slinks, lai radītu vienu no savu ... Tas nozīmē, ka jums ir gudrs, lai mācītos no citiem pieredzes un kļūdām, ietaupīt laiku un palielināt produktivitāti!!
CSS stāžs ir 10 gadi pastāvēšanu šogad! Tie, kas ir apmēram kādu laiku, pelnot savu maizi (vai nav), izmantojot CSS, tad jūs varētu zināt, cik mēs esam badā par labu izvēlei fontiem. Pat ar trūkumu fontus dizaineri, piemēram, tie, CSS Zen Garden ir izmantojušas CSS fona attēlus, lai aizstātu fontu veikšanu dara zināmu taisnīgumu to dizainu. Mēs esam centušies arī zibspuldze / aktivizētam ® hacks, lai sasniegtu mūsu dizaina mērķus. Nekādā tas ir nepareizs veids, kā iegūt fontus mēs vēlamies savās web dizainu, bet noteikti tas nav visvairāk vēlams veids. un vairāk gadiem web dizainers, tāpat kā es, ir pilnībā paļauties uz desmit vai tā fontiem to dizainu.
Jaunākās tendences interneta standartiem un fontu formātiem ļauj padarīt HTML teksta burtveidolu, kas nav pašas vecās noklusējuma fontus. Nāk "@ fontface" CSS decleration.
@ Fontface provids risinājumu saiti uz faktisko fontu failu un ielādēt to no interneta. Izmantojot @ fontface, dizaineri var izmantot fontus bez iesaldēt tekstu kā fona attēlus. Īstenošana ir ļoti taisni uz priekšu, kā parādīts zemāk, bet kā visas labas lietas ir CON daļa tai, ne visas pārlūkprogrammas atbalsta vienu "fonta tipu". Ja jūs plānojat izmantot @ fontface jo vietu ar prasību pārrobežu pārlūka atbalstu, tad jums būs jāsniedz avotus dažādos font-veida pašu.
Izmantojot @ fontface
@ Font-face { font-family: "CalligraphyFLFRegular '; src: url ('CalligraphyFLF.eot'); src: vietējās ("CalligraphyFLF"), vietējās ("CalligraphyFLF"), url ('CalligraphyFLF.woff ") formātā (" woff "), url (' CalligraphyFLF.ttf") formātā ("TrueType"), url ('CalligraphyFLF . svg # CalligraphyFLF ") formātā (" SVG "); } @ Font-face { font-family: "Tava burtu"; src: url ("fonti / font_filename.eot"); src: vietējās ("Alternate nosaukums"), vietējās ("Alternatename"), url ("fonti / font_filename.woff") formātā ("woff"), url ("fonti / font_filename.otf") formātā ("OPENTYPE"), url ("fonti / font_filename.svg # font_filename") formātā ("SVG"); } h2 {font-family: "Jūsu burtveidolu", Gruzija, serif;}
Kā jūs varat redzēt no iepriekš minēto piemēru, iekļaujot izvēlēto fontu burtveidolu, viens ir saites uz virkni fonttypes tajā pašā šriftā. Līdz ar to cilvēki atsaucas uz to kā "Font Kit".
Ir Fonts komplekti pieejami, kas skaidri ļauj sasaistīt ar CSS @ font-face īpašumu, ko tai Gala lietotāja licences līgums (EULA).
Noderīgas WebFont Resursi:
Laiks un atkal, kad visi pārējie pārlūki reizi uzvesties kā teicis W3C noteikumi, proti, spirālēm, jūs no attīstības garu metot dusmu lēkme, kas nav, šķiet, ir noteikt. Tikai šāds viens ir šis jautājums IE7.
Problēmas formulējums:
Es un tik varētu daudz citu nopietnu web izstrādātāju ir pamanījuši vairāk nekā daudzas reizes, ka tad, ja ligzdotas pludiņus izkārtojuma, kā arī uz lidināties pār dažām saitēm (no enkura tagus), kas satur konteiners šķiet novirzīt dažus pikseļus pa labi . Esmu mēģinājis google risinājumu šajā jautājumā, bet ir grūti atrast jebkādu pamatotu atbildi, kāpēc un kad tā notiek (kas var palīdzēt novērst šo problēmu no notiek), tāpēc es nekad neesmu atradis skaidru risinājumu problēmai nu ...
Iespējamais risinājums:
No pieredzes, man ir paziņojums 90% procentus no reizes, ti, ka šis jautājums tiek noteikts, pievienojot tālummaiņas īpašumu CSS definīcijas nepareizi uzvedas konteinerā ...
# Somediv { tālummaiņa: 1; }
atkal iemesli ir neskaidri ... izmēģināt šo ...
Daži IE elementi ir "hasLayout" īpašums, kas ir "patiess" pēc noklusējuma. Daudzi vizuālās CSS uzvedību, piemēram, alfa filtrs darbojas tikai uz elementu, kas hasLayout. un {Zoom: 1}, šķiet, dod mērķa elementi ir hasLayout īpašumu .... Noderīga? I dont think so ...
Tālummaiņas Īpašums arī šķiet, atbalsta Chrome, taču tā izmantošana iedobums, šķiet, lai daudz negatīvu ietekmi uz manu izkārtojumu ... izmēģiniet to, ja tā darbojas jums ... ja tas tā nav, grāmatzīmi šo lapu ar "CSS craps"
Vakar, pēc jautājuma man radās ar CSS nodzēš ar Google Chrome ... es domāju rakt mazliet dziļāk jomā lietotāja Pārstāvis Style Sheets ...
Atklāju šo tabulu noklusējuma vērtībām CSS2.1 Lietotāja Pārstāvis Style Sheets ... (par tiem nezina, ko "lietotāja aģents Style Sheets" ir sekot Kas ir lietotāja aģents Style Sheets (specifikācija) .
Par pilnu sarakstu 2.1 CSS Lietotāju Pārstāvis Style Sheets nepildīšanas noklikšķiniet šeit
Vakar, tāpat kā visi citi "Ground gatavo masu pilda cūkas diena", es strādāju par dažiem CSS / tableless izkārtojumiem. Viss gāja labi 7 IE, FF 3 un Chrome, untill pēkšņi, es redzēju dažas ANO ignorable starpības redzams tikai Google Chrome. Lai gan ļoti dīvaini un worring, tas bija kāds jauns kļūdu / jautājums, kas man bija ieradušies no visas bija beidzot daži manā ikdienišķa darba garšvielu. Skumji (bet jauki) tas apstājās pie dažu minūšu zondes ...
Būtībā, tas izskatījās, piemēram, Google Chrome ignorēja manu CSS nodzēš panta norma: 0px). Tas faktiski izraisīja lietotāja aģents stylesheet (-WebKit-padding-start: 40px). Tātad risinājums bija nomainīt šo stilu, nosakot padding: 0 Par misbehaving elementus.
Labs veids, kā novērst šo problēmu no notiek ar jebkuru elementu, ir izmantot visaptverošu CSS Atpūta šādi
* {Margin: 0; padding: 0;}
Kas ir lietotāja aģents Style Sheets (specifikācija)?
Šādu izvilkums ir ņemts no http://meiert.com/en/blog/20070922/user-agent-style-sheets/~~HEAD=pobj un turpmākiem saites, lai uzzinātu vairāk par lietotāju Pārstāvis Style Sheets
1 CSS ievieš ideju, norādot, ka katrs User Agent (UA, bieži "interneta pārlūku" vai "tīmekļa klients"), būs noklusējuma stila lapas, kas sniedz dokumentus saprātīgs - bet varbūt ikdienišķa - veidā. 2 CSS saka, ka atbilst lietotāju aģenti jāpiemēro noklusēto stilu lapu (vai uzvesties tā, it kā tie bija), un ka lietošanas aģenta noklusējuma stila lapām būtu jāiesniedz elementi dokumenta valodu tādā veidā, kas apmierina vispārīgos prezentācijas cerības par dokumenta valodu, CSS 3 varētu būt tā paša prāta.
Tā kā CSS specifikācijas atstātu implementācijas vai izmantot "īstu" stilu noklusējuma displeja lapa vai nē, tas nav pārsteidzoši, ka jūs neatrodat noklusējuma stila lapas katra pārlūkprogrammas instalācijas mapē. Atšķirībā Microsoft Internet Explorer, kā arī operu, piemēram (un cik es zinu), Gecko pārlūkiem kā Firefox un Netscape Navigator (meklēt "html.css"), bet arī Konqueror padara diezgan viegli saprast savu noklusēto stilu.
Vēl viens ātrs tut. Šeit ir kaut kas vienkāršs un jauks, izmantojot pilnvaras CSS ... bet bija grūti concieve (un tas noteikti nebija man), lai sāktu ar. Pievienojot Dropshadow, varētu būt peice kūka daudziem no mums, izmantojot kādu attēlu rediģēšanas rīkus, piemēram, Photoshop ANF uguņošana utt
Iemesls, kāpēc es izvēlējās Drop Shadow, izmantojot CSS ir tāda, ka, parasti vienlaikus radot lapas dizains / html pieteikumus, prasības turēt atkārtojot. Ko es domāju ir, Jo esošās tīmekļa vietnes ar daudziem attēliem, piemēram, uz tiem attēlot freinds sarakstu vai attēlu galeriju, būs grūti pārstrādāt visa slodze no attēliem, kas jau bija izkrauj, lai pievienotu vai noņemtu ēnas, par to jautājums.
Tādēļ, ja jums ir darīts mazliet uz priekšu domāšanu, bet radot HTMLS lai pievienotu šos papildu divīzijas vai parasti situācija ir tāda, ka Jums ir Loop Logic, radot šīs ikonas / sīktēlus XSL, PHP. JAVA vai jebkurš cits programmēšanas / skriptēšanas valodu, jūs varat pievienot jebkurā laikā, tad ir tikai jautājums par šovu un slēpjot šo ēnas, izmantojot CSS Display īpašumu, kā uz klientu arvien mainīgās prasības ... es havn't darīts šāda veida priekšu domāšana Pirms šī ... bet ahev jau tagad!
Turpmākajā piemērā, oriģinālais attēls ir ēna bezmaksas, un dropshadows piemēro pēc vajadzības! Arī man ir gājusi nedaudz extra, izmantojot triku no manu iepriekšējo Tut panta Well! tie droši vien ir īsākais dažādas konsultācijas, tā ir pamatota tikai tad, nosaucot tos par "Tut" 's), aptuveni Izmantojot CSS Clip īpašumu par dižoties tikai
Kāpēc es gribu saprast? ... Humm!!
Lielākā daļa no CSS autoru piekritīs, ka CSS Klips īpašums ir iespējams, ir viens no visvairāk ANO izmantotās CSS īpašībām. Tas bija tik patiess man pārāk, un bija ļoti laimīgs nevērīgi izturēties, kamēr es sāku mainīt MOOTOOLS DIVI Knob (PIN) Slider Component (svārstoties rādītāja) .
Tur bija labs ieteikums no kāda no sastāvdaļām lietotājiem mainīt Slider komponentu izmantojot lobītu backgroud attēlus (pret mainīgu platumu rajons), lai norādītu slīdņa diapazonu. Tādējādi nāca mans laiks ienākt jautri, bet ANO zvērinātam (man Protams) ūdeņi CSS Clip īpašumu.
Labi! cik grūti var būt? Nav daudz vispār ... JĀ un NĒ. Sintakse izmantot CSS Clip īpašumu ir diezgan taisni, bet jēga / usuage ir mazliet croocked. Ar atmiņu, piemēram, raktuves, everytime man sēdēt pie pārstrādāt uz manu slīdni Script ... Man ir tokeep atsaucoties atpakaļ uz izmantošanu šo klipu īpašumu, lai atgādinātu sev par loģiku, ko esmu izveidojis manā rakstā .... Tādējādi! Domājams, pildspalvu to uz leju, ar cerību to atcerēties nākotne (un arī par labu tiem, kas šķiet boggled ar CSS Clip īpašuma)
Kāda CSS Clip darīt?
Klips ir daļa no vizuālā ietekme moduli 2.1 CSS. Vienkārši izsakoties, tā uzdevums ir novietot redzamu logu virsū objektu, kas tiek apcirpts, tāpēc apgriešana attēlus un izveidot sīktēlus bez izveidotu papildu failus (Es jau šo līdzekli, lai labāk lietot slīdni komponentes 
)
Izmantojot CSS Clip īpašumu, jūs varat izveidot izgriezumu izmantojot tiešajām formu. Tāpat kā daudzi citi CSS īpašības (piemēram, depozītu, polsterējums uc), izmantojot rect prasa četras koordinātas augšas, No labās, No apakšas, Pa kreisi (TRBL). Croocked daba šī īpašuma atspoguļo kad jūs pietuvināt, kā klips aprēķina Clipping reģionu, izmantojot šos četrus koordinātas (sūta smadzenēm uz mētāties uz laiciņu). Tagad, lai maldinātu jums dibens sāk no augšas, un pa labi sākas no kreisās puses. . Jūs redzat, ko es teicu? .... Tādējādi šis amats ...
Šī maz neskaidrības var viegli pazust, ar šo vizuālo skaidrojumu par CSS Clip / rect īpašuma zemāk!!
Uzdevums mēs esam sākuši, ir klipu šādu Thumbnail attēlu uz squarer meklē attēla (un arī platleņķa attēlu)
| |  |
| Sākotnējais Thumbnal / Attēlu | Clip Prasības sqaure Thumbmail |
Skatīt Demo Pārsūtīt | Download sourcefiles
Pirms mums bija tikt galā ar CSS izveidot mūsu lapas izkārtojumus, saskaņojot daļu satura iekšpusē tabulas šūnā likās tikai bērnu spēle. Vienkārši noteikt "saskaņot" vai "valign" īpašums tabulas ir izlīdzinājumu jūsu izvēles, gabals ir nieks!
Ar CSS izkārtojumu, taču mums ir "vertikāli saskaņot" īpašumu elementiem, tas nešķiet tik vienkārša kā "izlīdzināt" vai "valign" īpašībām. Ir vairāk specifiic "vertikāli saskaņot" nekad, šķiet, lai atrisinātu kādu no jūsu problēmu, it īpaši, ja ir uzrakstīt kādu pārrobežu pārlūku CSS.
Neizmantojot HTML tabulas, no centrējot uz objekta PROBLĒMA, vai tas būtu attēls vai kādu robežās saturoša rajons teksts, iespējams, bijis katru UI / CSS izstrādātāji murgs kādā brīdī. Šī problēma vēl ekstrapolē jūsu rūpes veikt saskaņošanu, ja objekts centrā ir dinamisks raksturs, ti, kad tās augstums ir mainīgs (zināms augstums).
Lai gan nav zināms, taisni uz priekšu risinājums, kas darbosies visā diapazonā no pārlūkprogrammām mums jātiek galā ar, risinājums, ko esmu mēģinājis, lai nonāktu pie tas šķiet strādāt dažās pārlūkprogrammās, ka esmu mēģinājis to (IE6, IE 7 , FF).
RISINĀJUMS:
Pārlūkprogrammās, piemēram, Mozilla, Opera un Safari, dīvaini uzvedas "vertikāli saskaņot" īpašums var tikt vērsta uz to sajūtas, vienkārši nosakot "Display" īpašums saturošā divīzija "galda šūnas" (displejs: galda šūna) .
Problēma joprojām ir ar IE ģimenē pārlūkiem, kurš, tomēr nešķiet saprast, ko ar "galda šūnu" īpašums un nezinošs, jo viņi ir, viņi vienkārši ignorēt to. Risinājums norādīts turpmāk, gan vienkāršiem, reklāmas dažas vairāk DOM elementu, lai jūsu HTML, lai padarītu lietas notikt.
CSS un HTML izskatās šādi
.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/> skatījumi: 3456 </ div>
</ Div>
</ Div>
Rezultāts izskatās šādi: -
apskatīt demo šeit Pārsūtīt | Download Avots Faili (aplūk. 451 reizes)
TOP Līdzināt 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/> viedokli: 1234 </ div>
</ Div>
</ Div>
Rezultāts izskatās šādi: -
APAKŠAS Līdzināt 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/> viedokli: 1234 </ div>
</ Div>
</ Div>
Rezultāts izskatās šādi: -
apskatīt demo šeit | Lejupielādēt šeit
Šķiet, piemēram vecumu, jo man bija mēģina atrast pieņemamu risinājumu šai līdzināšanas problēmu. Bet tagad ar šo risinājumu, es jūtos kā maz miera.
Ar cerību, ka kādu dienu
Lejupielādēt CSS un HTML iepriekšminētā šķīduma šeit panta Downloaded 451 times) .. jo saprotamības, CSS nav optimizēts
PS: Un starp citu, tie ir sīktēlus dažas bildes man ir noklikšķinājuši ...
CSS for Non-IE pārlūkprogrammu: Tā nav ziņa CSS izstrādātājiem, kas, CSS Bērnu selektori kā piemēru zemāk, nešķiet strādāt IE.
piemēram div> span {daži css}, kas nozīmē "ja span elements ir bērns (un NAV mazbērns vai mazmazbērniem bērns utt) kādas nodaļas elementa".
Bet mēs izmantojām šo CON mūsu labā. Vēsturiski, bērns selektors ir izmantots, lai slēptu CSS komandas no IE. Vienkārši ievietojot html>body priekšā jebkurā CSS komandu IE būs ignorēt to:
html>body .foo { CSS commands go here ;}
Tas darbojas, jo <body> vienmēr bērns <html> - tas, protams, var nekad ir mazbērns vai mazmazbērns no <html> .
Tagad, 7 IE saprot bērnu atlasītāju, jums ir jāievieto tukšu komentāru taga tieši pēc lielāka par zīmi 7 IE tad nesaprot šo pogu (kas zina, kāpēc!?), Un tāpēc pilnīgi ignorē šo CSS komandu.:
html> /**/ body .foo { CSS commands go here ;}
Ja vēl neesat redzējuši šo pirms, ir lasīt caur šīm, kā arī
