legendă

legenda

Fig. 1. Punctul de vedere legendă

Imagine și semnătura adăugată la acesta cu un paragraf etichetă

. Managementul care, în special, alinierea conținutului, culoarea și fontul setat prin stiluri. Semnătura astfel separat de modelul tag
(Exemplul 1). Pentru un stil de paragraf, cu legende nu se suprapun cu un paragraf obișnuit, a crea o nouă clasă de fig. și vom adăuga, dacă este necesar pentru tag-ul

Exemplu de model 1. Text

Alinierea imago și conținutul centrului are loc printr-un cadru stil de text-align cu valoarea centru. Distanța de la imago la conținut este controlat tag-ul line-height. valoarea sa este ales de experiență, în funcție de propriile preferințe.

Utilizarea selectoare vecine

linii de transfer cu o etichetă
nu neapărat permisă pentru a pune o imagine într-un singur container

, o semnătură - în cealaltă. Pentru a defini un stil pentru acesta este al doilea paragraf de utilizare selectoare adiacente. Ele sunt înregistrate ca p.fig + p.fig, ceea ce înseamnă că pentru a aplica stilul numai pentru un paragraf cu smochinul de clasă, dar numai atunci când merge după același alineat (exemplul 2).

Exemplul 2. selectoare din apropiere

În acest exemplu, etichetele sunt utilizate pe scară largă

. Prin urmare, figura clasa a introdus pentru a separa stilul de punctul convențional. selectoare din apropiere trebuie să reglementeze distanța dintre imagine și conținutul sub ea. Acest lucru se face prin stabilirea margin-top, cu un argument negativ sau pozitiv, care depinde de distanța dorită.

selectoare din apropiere sunt acceptate numai de Internet Explorer începând cu versiunea 7.

Imagine și semnătura în caseta

Pentru a separa imaginea de conținutul principal, dastatkova a pus imaginea cu semnătura în cadru cu fundalul, așa cum este prezentat în Fig. 2.

Fig. 2. Tastați legenda în caseta

Pentru a dezvolta o astfel de semnătură utilizând eticheta

. acționează ca un container în care este pus imaginea prin intermediul etichetei . și semnătura să-l - cu o etichetă

. Pentru fiecare element al acestui design, puteți seta opțiunile de stil, care vă permite să personalizați flexibil aspectul său. Singura trăsătură - necesitatea de a defini lățimea blocului în pixeli sau procente peste atribut lățime. așa cum este prezentat în Exemplul 3.

Exemplul 3. Text model în cadru

Poziția: relativă; / * Poziționarea relativă * /
stânga: 50%; / * Bloc Nivelarea centrata * /
margin-left: -125px; / * Muta blocul spre stânga cu semilățimea * /
>
.frontieră pic img: 1px solid # 333; / * * Rama imago /
>
.pic p margin: 0; / * Îndepărtați spațiul din jurul unui paragraf * /
padding-top: 5px; / * Distanța de la modelul de la conținutul * /
>

- Ei bine, - am ezitat Pooh - Aș putea sta un pic mai mult, dacă faci. dacă aveți. - bâlbâi el, și, în același timp, pentru un motiv oarecare nu a luat ochii de la bufet.

- Într-adevăr, - a spus el Rabbit - M-am fost pe cale de a merge la o plimbare.

- Ah, ei bine, atunci voi merge. O zi bună.

- Ei bine, toate bune, dacă nu vrei nimic mai mult.

Winnie the Pooh într-o vizită la Rabbit

- Mai este ceva de mâncare? - a întrebat sperăm Pooh, împrospătează din nou. Rabbit se uita la toate oalele și borcane, și a spus cu un oftat:

- Din păcate, nimic mai rămas!

- M-am gândit așa, - a spus Pooh înțelegător, clătinând din cap. - Ei bine, la revedere, trebuie să plec.

Alinierea bloc cu o imagine și semnătura în centrul de o varietate de moduri. În acest exemplu poziționarea relativă este aplicată trecerea chiar cu 50%. Deoarece coordonata de numărare de la marginea din stânga a stratului, apoi se transferă la 50% nedastatkova pentru a poziționa cu precizie stratul din mijloc. De aceea, un alt strat este necesară pentru a deplasa jumătatea stângă a lățimii sale datorită marja din stânga cu o valoare negativă.

Textul din dreapta imaginii

Uneori, din motive de proiectare sau de descriere a imaginii de aspect ar trebui să fie plasate la stânga sau la dreapta imago. În acest scop, este mai convenabil să se aplice o limită invizibilă a mesei. Datorită numărului mare de parametri în tag-ul , aliniați în mod specific și valign, semnătura poate fi aliniat la partea de sus, la marginea de jos sau centrul imaginii.

Pentru conținutul aflat pe eticheta din dreapta Doriți să setați valoarea proprietății float la stânga. Aceasta stabilește alinierea partea stângă și, respectiv, debitul în jurul conținutului de pe dreapta. Dar acest nedastatkova, înălțimea de bloc, în acest caz, este format din conținut, mai degrabă decât imaginea care strică toate lucrările. Prin urmare, este necesar să se anuleze învelitorii și fac necesară după desen și a conținutului, folosind tag-ul stilistic clar. de exemplu, adăugarea
. Exemplul 4 prezintă o variantă alternativă a fluxului de anulare prin containerul gol

Exemplul 4 dreapta Semnătura figurii

Rezultatul acestui exemplu este prezentată în Fig. 3.

Fig. 3. Textul din dreapta imago

Când se utilizează plutitorul elementele sunt aliniate de-a lungul marginii de sus, astfel încât în acest exemplu, se adaugă câmpul superior paragraf (padding-top), permite stramuta conținut multiple în jos.

Notă. Undefined variable: o în /home/www-html/data/www/www-html.ru/-id=112.htm on line 266

DIV
elementul DIV este un element bloc și este proiectat pentru a evidenția un fragment element pentru a modifica conținutul formularului.

P
Definește punctul kontentovy. Meta element de P bloc este, înainte de a fi întotdeauna adăugat la șirul gol, punctele de conținut care ating unul în spatele celuilalt, sunt separate printr-un decalaj vertical.

TD
Conceput pentru a dezvolta o singură celulă de tabel. TD tag-ul trebuie să fie plasat în interiorul containerului TR, care la rândul său, se află în interiorul tag TABLE.

CSS (CSS) pe această temă

culoare de fundal
Aceasta stabilește culoarea de fundal a elementului.

frontieră
Opțiunea vă permite să setați simultan grosimea, stilul și culoarea marginii din jurul unui element. Valorile pot fi în orice ordine, separate printr-un spațiu, browser-ul va decide care dintre ele corespunde cu atributul dorit.

clar
Acest parametru determină care parte a elementului este interzis să-l înfășurați celelalte elemente. Dacă este setat să curgă în jurul elementului folosind float, proprietatea clar anulează efectul pentru aceste părți.

plutitor
Acesta determină care parte a elementului va fi aliniat, cu restul elementelor se va încheia în jurul acestuia cu alte părți.

line-height
spațiere Seturi linie (spațiere) conținut, numărând de la fontul de bază. În condiții normale, distanța dintre linii depinde de tipul și dimensiunea fontului este determinată automat de către browser.

margin-top
Setează crestătura pe marginea superioară a elementului.

text-align
Specifică alinierea orizontală a conținutului în interiorul unui element.

lățime
Setează lățimea blocului sau elementelor care pot fi înlocuite. Lățimea graniței nu include grosimea în jurul domeniilor de valori elementului și liniuțe.

articole similare

Pagina anterioară

Pagina următoare