E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Diverse (5)

Out of the box

22.04.2008
Out of the box

Este adevarat ca CSS se bazeaza foarte mult pe grid-uri - totul urmeaza coordonate xy, dar asta nu inseamna ca designul este neinteresant. Daca intelegi cum functioneaza un grid poti sa fragmentezi sau sa abstractizezi pentru a face layout-ul mai dinamic si mai interesant.

Total vizualizari: 12630 12630 afisari   |   Comentarii  0   |   Rating   |   (8 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Sitepoint.com  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 12 3 4567 »
comenteaza printeaza

Introducerea continutului
Vom adauga imagini, antete si alte elemente.

Iata HTML-ul:

<div id="page">
<div id="header">
<p>Header content</p>
<ul>
<li><a href="#">paginatie_link</a></li>
<li><a href="#">paginatie_link</a></li>
<li><a href="#">paginatie_link</a></li>
</ul>
</div>
<div id="content-primary">
<h1>Welcome to my awesome website.</h1>
<h2>Indeed, this is an awesome website.</h2>
<p><strong>Primary content.</strong> Lorem 
ipsum dolor sit amet, consectetuer adipiscing 
elit. Suspendisse pharetra, arcu in dapibus 
sagittis, felis leo rhoncus erat, non porttitor 
urna libero vitae nibh. Ut convallis eros sed magna.</p>
<img src="photo.jpg" alt="" />
<p>Aenean enim purus, adipiscing a, vehicula ut, 
tempor vitae, justo. Nam laoreet mauris vitae elit. 
Vivamus eros quam, euismod bibendum, pellentesque ut, 
tristique ut, nisl. <a href="#">Vestibulum ante ipsum 
primis</a> in faucibus orci luctus et ultrices posuere 
cubilia Curae; Suspendisse non metus. Nullam tempor 
dictum sapien. Duis enim. In ligula. Cras ut enim. 
Sed dapibus ante in eros. Nulla facilisi. In rhoncus 
eleifend nunc. Sed risus nulla, pretium in, porta 
eget, lacinia eu, nunc. In hac habitasse platea 
dictumst. Vestibulum feugiat lectus et justo. Cum 
sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Sed aliquet dolor 
nec ipsum.</p>
<h2>Oooh, more copy&hellip;</h2>
<p><a href="#">Ut erat nibh</a>, aliquet ut, congue 
at, tempus in, nunc. Ut aliquet leo et lectus volutpat 
molestie. Vivamus nunc. Nulla facilisi. Suspendisse 
dictum nunc tempus elit. Nullam urna quam, bibendum 
quis, tincidunt a, nonummy euismod, metus. Etiam 
convallis, dui venenatis feugiat elementum, justo 
lacus lobortis libero, vel iaculis nibh lectus eu urna. 
Vivamus arcu. In facilisis quam et lacus. Suspendisse sit 
amet neque ac enim lobortis ullamcorper. Etiam faucibus 
sapien ut nunc. Nullam consectetuer vehicula arcu.</p>
</div>
<div id="content-secondary">
<h3>Important Information</h3>
<p><strong>Secondary content.</strong> Lorem ipsum dolor 
sit amet, consectetuer adipiscing elit. Suspendisse pharetra, 
arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor 
urna libero vitae nibh. Ut convallis eros sed magna. Aenean 
enim purus, adipiscing a, vehicula ut, tempor vitae, justo.
Nam laoreet mauris vitae elit. This is interesting information. 
Ut erat nibh, aliquet ut, congue at, tempus in, nunc. Ut aliquet 
leo et lectus volutpat molestie. Vivamus nunc. 
 <a href="#">Read&nbsp;more&nbsp;&rarr;</a> </p>
</div>
<div id="footer">
<p>Photograph by <a href="http:/jinabolton.com">Jina Bolton</a>.</p>
</div>
</div>

Aici a fost adaugat un meniu (un sistem de navigare). Am adaugat si niste titluri si o fotografie.

Acum vom adauga niste formatari estetice.

Iata CSS-ul:

* {
margin: 0;
padding: 0;
}
body {
background: #eee;
font: 12px/18px "Lucida Grande", Verdana, sans-serif;
text-align: center;
color: #333;
}
a:paginatie_link, a:visited {
color: #633;
}
a:hover {
color: #966;
}
h1 {
margin-bottom: 11px;
padding-top: 15px;
padding-bottom: 21px;
border-bottom: 1px solid #ccc;
font: normal italic 1.5em/18px Georgia, serif;
color: #633;
}
h2, h3{
font-weight: normal;
font-size: 1em;
line-height: 18px;
}
h2 {
padding-top: 10px;
padding-bottom: 20px;
font-size: 1.25em;
text-transform: uppercase;
color: #999;
}
h3 {
padding-bottom: 6px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -1px;
color: #633;
}
#page {
margin: 0 auto;
width: 960px;
background: #fff url(page.gif) repeat-y;
text-align: left;
}
#header {
height: 192px;
background: #966;
}
#header p {
float: left;
padding: 60px 24px 24px 24px;
font-size: 1.5em;
line-height: 1em;
color: #fff;
}
#header ul {
padding-top: 62px;
padding-right: 12px;
text-align: right;
list-style: none;
}
#header li {
display: inline;
margin: 0 12px;
}
#header li a {
font-size: 1.25em;
line-height: 1em;
text-decoration: none;
color: #fff;
}
#header li a:hover {
color: #300;
}
#content-primary {
float: right;
margin: 24px;
width: 720px;
}
#content-primary p {
padding-bottom: 18px;
}
#content-primary img {
float: left;
margin: -6px 18px 0 -6px;
padding: 3px;
border: 3px solid #eee;
background: #fff;
}
#content-secondary {
float: right;
margin: 24px;
width: 144px;
font-size: 11px;
color: #300;
}
#content-secondary p {
padding-bottom: 18px;
}
#footer {
clear: right;
height: 192px;
background: #333;
font-size: 10px;
line-height: 1em;
text-shadow: 1px 1px 1px #333;
color: #fff;
}
#footer a:paginatie_link, #footer a:visited {
color: #c99;
}
#footer p {
padding: 24px;
}
.clear {
clear: both;
}
Pagina:
« 12 3 4567 »
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(8 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4930
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4875
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4740
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4695
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4510
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Fotografie XML Swift 3D CSS Gimp Action Script StyleSheet Lightroom Powerpoint Illustrator Ruby on Rails Excel Bridge SEO Dreamweaver MySQL AJAX SWF JSON XHTML Verilog RoR COREL DRAW Fireworks HTML Java Javascript Vista Flash Outlook Word PHP PSD Sony Vegas Photoshop Python
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software