Egyszerű képek css, vebsovet
Annak érdekében, hogy megszervezze a képgalériát a helyszínen gyakran kész szkriptek PHP. Próbáltam párszor, hogy ezt a hasznos munkát a arra a következtetésre jutott, hogy ha szeretne egy dinamikus galéria, ahol lehet értékelni a munkát más emberek, és hol lehet gyorsan és könnyen be képek és szöveges leírás közvetlenül az asztalról, akkor jobb használni kész online szolgáltatások, amelyek egy csomó hálózatot. Ez legalább egy jó öreg Flickr.
Ragaszkodnak a helyén script, majd konfigurálja azt - ő aranyér. Azok ingyenes scriptek, amelyek a hálózaton, vagy az egyszerű, de csúnya a tervezés és a hibás a munkában vagy olyan nehéz és túlterhelt mindenféle túlzásokat, hogy a szabályok és élesítés őket a webhelyen párolt.
De ha csak szeretné helyezni a helyszínen néhány kép képaláírásokkal, ez nagyon egyszerű, és lehet elhelyezni szépen tisztán CSS és egy pár kiegészítő képek, hogy mi lesz most.
Először is kell készíteni egy pár kép itt:
Amint tudjuk megmagyarázni, hogy miért kell olyan sokáig. Mindkét kép fogjuk használni a háttérben mi előzetesek (előzetesek - egy kis másolata kép).
Mivel előnézetek lehetnek különböző méretű és tájolású (vízszintes vagy függőleges), és feliratokat lehet különböző hosszúságú, akkor a következő fog történni trükk: nyakkendő első kép hátterét tag div. és a második - a tag o. foglalkoztató az aláírás.
Ennek eredményeként, az alsó széle miniatűrök mindig ugyanazon a távolság az aláírás, hosszától függetlenül az aláírás.
Mégis, meg kell magunkat miniatűrök képeket. Nagy képek közzé fogjuk mindegyik a külön lapon, amely visszatér haza a BACK gombot.
Tehát tudjuk írni a kódot a kezdete a főoldalon:
Kód nagyon egyszerű. Azt hogy a tartalmát a lapok a „box» - tartályba. amely központjában található, és mindegyik az aláírás a Thumbnail kiadott külön div-edik osztály tumb.
Nézzük inkább a CSS stílus fájlban:
a text-decoration: none;
>
test háttér: #fff;
>
#container szélesség: 860px;
margin: 0 auto;
>
#header background: url (header.gif) no-repeat;
szélesség: 860px;
magasság: 160px;
margin: 0 auto;
clear: both;
>
div.tumb background: url (tumb01.gif) no-repeat;
szélesség: 210px;
float: left;
margin: 0 30px 20px;
>
div.tumb img margin: 5px 4px;
>
div.tumb p background: url (tumb02.gif) no-repeat 0 100%;
font: 85% Verdana, Arial, talpatlan;
color: # 333;
margin: 0;
padding: 0 25 képpont 20px 10px;
>
Kezdjük az elején. Az egész oldalt egyszerre elindultunk margók, a kitöltés és a határok 0. háttér hegyes fehér, linkeket kell kikapcsolni hangsúlyozva, és kiszerelésben vannak beállítva, hogy 860 pixel széles és automatikus igazítás.
Mindennek tetejébe húzott aranyos zogolovok és tegye ott a háttérben, meg a szélesség és magasság. Ez egyszerű. De több lesz a trükk.
Mert előzetesek, mint már említettük, mi használt div class tumb. Ugyanakkor a legtöbb választó tumb szabályokat is be, hogy megjelenjenek a háttérben, mint az első kép, fent látható, meghatározva a szélessége 210 pixel, és tiltó ismételje meg. Magasság nem határozza meg!
Ezen kívül, van hozzá itt, mint egy szabály áramlását a bal (float: left), mert azt akarjuk, hogy vízszintesen néhány előnézetét. Ha nem, akkor minden miniatűrök kerül egy oszlopba oldalon egymás alatt.
A következő szabályok már tűzték maguk a képekre a tag img padding képeket nem tapadtak egymáshoz.
Megjegyzés: a rekord - div.tumb img. Azt mutatja, hogy nem csak néhány önkényes img tag meg ezeket a szabályokat, nevezetesen azt, ami benne van a div az osztályban tumb.
Következő, felcímkézhet p. ismét belép a blokk div class tumb. kérték betűk méretét és színét, margin és padding, és - ami a legfontosabb - jelezte a háttérben, hogy csodálatos második képet. Ebben az esetben, amellett, hogy a tilalmat ismétlés, megmutattuk a koordinátái, hogy x és y tengelyt. 0 és 100%, ill.
Ez azt jelenti, mérete ellenére a miniatűrök és leíró szöveget (az ésszerűség határain belül persze), ezt a háttérképet is meg fog jelenni az alsó és a jobb szélén, automatikusan beállítja a hosszát és szélességét miniatűrök.
Ez minden!
Egy másik tipp: ne csináld, hogy a képekre hivatkoznak egy képet egy bizonyos mappát. Rendezzük a fényképeket külön oldalon a részletes leírását, valamint a visszatérési link a honlapra. Ez lesz sokkal szebb és helyes, mint magányos Sticky a bal felső sarokban a fényképet a böngésző ablakot.
Ready példa található itt Galéria: Galéria, például a CSS.
Remélem, tetszett. Enjoy!