Your SlideShare is downloading. ×
Exemplositecss
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Exemplositecss

187
views

Published on

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
187
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Documento sem título</title><link href="stilo.css" type="text/css" rel="stylesheet" /></head><body><div id="conteiner"><div id="cabecalho">aqui o cabeçalho<div class="links_cabecalho"><ul><br /><li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 1</a></li><li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 2</a></li><li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 3</a></li><li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 4</a></li></ul></div></div><div id="barra_menu"><div class="links_menu"><ul><li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 1</a></li><li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 2</a></li><li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 3</a></li><li><a href="http://www.comofazerumsite.com/design/tutorial-css.html">link 4</a></li>
  • 2. </ul></div></div><div id="barralateral_esq">barra lateral esquerda</div><div id="barralateral-dir">barra lateral direita</div><div id="corpo">copro<br/><div class="caixa">texto no interior da caixa<br/></div></div><div id="rodape">rodape</div></div></body></html>#conteiner{ width:850px; text-align:center;}#cabecalho{ width:850px; height:150px; position:relative; background:url(imagens/img_cabecalho_ostudio.jpg); border-bottom:2px solid #000;}#cabecalho a{ text-decoration:underline;
  • 3. font-weight:bold; color:#000; font-family:Arial, Helvetica, sans-serif; font-size:14px; background:#000;}#cabecalho a:visited{ color:#00F; text-decoration:underline; font-weight:bold;}#cabecalho a:hover{ color:#F00; text-decoration:none; font-weight:bold; background:#333;}.links_cabecalho { position:absolute; top: 2px; left:150px;}.links_cabecalho ul{ margin:0px;}.links_cabecalho li{ margin:0px 20px 0px 0px; list-style:none;
  • 4. display:inline;}.links_menu li a{ color:#FFF; padding:5px 12px 7px; text-decoration:none; font-size:16px; font-family:Arial, Helvetica, sans-serif;}.links_menu a:hover{ color:#FFF; background:#060;}#barra_menu{ width:850px; height:30px; position:relative; background:#0F0; border-bottom:2px solid #000;}.links_menu{ position:absolute; top: 4px; left:200px;}.links_menu ul{ margin:auto;
  • 5. }.links_menu li{ margin: 0px 18px 0px 0px; list-style-type:none; display:inline;}#barralateral_esq{ float:left; background-color:#0F0; width:150px; height:390px; border:2px solid #000;}#barralateral-dir{ float:right; background-color:#0F0; width:150px; height:390px; border:2px solid #000;}#corpo{ width:auto;}#rodape{ clear:both; background-color:#090;}
  • 6. .caixa{ margin-top:10px; padding:5px 5px 5px 5px; background:#CCC; border:2px solid #06F; width:500px; color:#000;}