Sie sind auf Seite 1von 283

29/02/2016 W3.

CSSIncio

W3.CSS Tutorial
Anterior Prximocaptulo"

W3.CSS
maisrpidaemelhor
WebSitesResponsive

Demonstrao dedemonstrao demonstrao


dedemonstrao demonstrao de
demonstrao

O que W3.CSS?
W3.CSSumquadroCSSpequeno,rpidoemoderno,combuiltincapacidadede
resposta:

ProjetadoparasermenoremaisrpidodoqueoutrosquadrosCSS.
Projetadoparasermaisfcildeaprender,emaisfcildeusardoqueoutros
quadrosCSS.
ConcebidoparaproporcionaraigualdadeCSSparatodososdispositivos:PC,
laptop,tabletemvel.
ConcebidoparautilizarapenasCSSpadro(NohnecessidadedejQueryou
JavaScript).
ProjetadoparaaceleraraplicativosHTMLmveis.

W3.CSS gratuito
1/3
29/02/2016 W3.CSSIncio

W3.CSSlivreparausar.Nenhumalicenanecessria.

Fcil de usar
Tornloomaissimplespossvel,masnomaissimples.
AlbertEinstein

Exemplo

<divclass="w3containerw3teal">
<h1>MyHeader</h1>
</div>

<imgsrc="img_car.png"alt="Car">

<divclass="w3container">
<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.</p>
</div>

<divclass="w3containerw3teal">
<p>MyFooter</p>
</div>

Tentevocmesmo"

Como
ParausarW3.CSSnoseusite,bastaadicionarumlinkpara"w3.css"desuaspginas
daweb:

Exemplo

<!DOCTYPEhtml>
<html>
<metaname="viewport"content="width=devicewidth,initial
2/3
29/02/2016 W3.CSSIncio

scale=1">

<linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">

Tentevocmesmo"

Oubaixarw3.cssdew3css_downloadseadicionarumlinkparaumapastanoseu
prprioWebsite:

Exemplo

<!DOCTYPEhtml>
<html>
<metaname="viewport"content="width=devicewidth,initial
scale=1">

<linkrel="stylesheet"href="/lib/w3.css">

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

3/3
29/02/2016 W3.CSSDemonstrao

W3.CSS Demonstrao
Anterior Prximocaptulo"

W3.CSS Cores
Osw3coloraulassoinspiradasemcoresmodernasusadasemmarketing,sinais
detrnsito,enotas:

Vermelho

Azul

Azulacinzentado

Cerceta

Amarelo

laranja

Painis W3.CSS, Notas e Cotaes


Ow3containerclassepodeexibirtodosostiposdenotasecitaes:

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReinoUnido,

1/17
29/02/2016 W3.CSSDemonstrao

comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReinoUnido,
comumareametropolitanademaisde13milhesdehabitantes.

"Tornloomaissimplespossvel,masnomaissimples."
AlbertEinstein

W3.CSS cabealhos e rodaps


Ow3containerclassetambmfornecesoluesparatodosostiposdecabealhos
erodaps:

Londres

meu Rodap
informaesderodapvaiaqui

W3.CSS Alertas
OW3recipienteclassetambmpodeserutilizadoparatodosostiposdealertas:

Perigo!
Overmelhoindicafrequentementeumaaoperigosaoupotencialmente
negativa.

Aviso!
Amarelo,muitasvezesindicaumavisodequepodeprecisardeateno.

2/17
29/02/2016 W3.CSSDemonstrao

Sucesso!
Verde,muitasvezesindicaalgobemsucedidaoupositivo.

Perigo!
Overmelhoindicafrequentementeumaaoperigosaoupotencialmente
negativa.

Aviso!
Amarelo,muitasvezesindicaumavisodequepodeprecisardeateno.

Sucesso!
Verde,muitasvezesindicaalgobemsucedidaoupositivo.

W3.CSS Cartes
Osw3decartodeclassessosuitibleparaimagensenotas:

3/17
29/02/2016 W3.CSSDemonstrao

w3card2

4/17
29/02/2016 W3.CSSDemonstrao

w3card4

5/17
29/02/2016 W3.CSSDemonstrao

w3card8

Cabealho
Umcarroumveculomotorizadorodado,autoalimentadoutilizadoparao
transporte.Amaioriadasdefiniesdotermoespecificaqueoscarrosso
projetadosparafuncionarprincipalmenteemestradas,parateroassentoparaum
aoitopessoasetipicamenteterquatrorodas.(Wikipedia)

Nota
Lembromeestefimdesemana!

Nota
Lembromeestefimdesemana!

6/17
29/02/2016 W3.CSSDemonstrao

Tabelas W3.CSS
Osw3mesaclassespodemlidarcomtodosostiposdetabelas:

Primeironome ltimonome Pontos

Jill ferreiro 50
vspera Jackson 94

Ado Johnson 67

Primeironome ltimonome Pontos


Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67

Primeironome ltimonome Pontos


Jill ferreiro 50
vspera Jackson 94

Ado Johnson 67

Primeironome ltimonome Pontos


Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67

W3.CSS Botes
Obtnw3classefornecebotesdetodosostamanhosetipos.

Boto Boto Boto Boto

Boto Boto Boto

7/17
29/02/2016 W3.CSSDemonstrao

DelarguracompletaBotes

Sombra Sombra Sombra

Minsculo Pequeno Xlarge


XXLarge
Volta Rounder eRounder

W3.CSS flutuante Botes


OsflutuantebtnW3botessocircularesedestinadoafunesimportantes.

+ +

W3.CSS Tags e emblemas


Osw3tagew3crachaulassocapazesdeexibirtodosostiposdeetiquetas,
emblemasesinais:

Tokyo 6

London 8

FalconRidgeParkway

S UMA eu E

8/17
29/02/2016 W3.CSSDemonstrao

NO
RESPIRAR
DEBAIXODEGUA

Listas W3.CSS
Aclassew3ulpodelidarcomtodosostiposdelistas:

Lista normal:
Jill

vspera

Ado

Grande e Red:

Jill

vspera

Ado

Minscula e limitado:
Jill

vspera

Ado

Pequeno e plido:
Jill

vspera

Ado

9/17
29/02/2016 W3.CSSDemonstrao

apresentaes de slides

W3.CSS Modais
Ow3modalclassefornecedilogomodalemHTMLpuro:

CliqueparaabrirModal

W3.CSS Dropdowns
Osw3suspensasclassesfornecemdropdowns:

Passeme!

Cliqueme!

W3.CSS Acordees
10/17
29/02/2016 W3.CSSDemonstrao

Ow3acordeoclassefornecemacordees:

AbrirSeo1

AbrirSeo2

AbrirSeo3

W3.CSS Navigation
Ow3navbarclassecriaumabarradenavegao:

Casa link1 link2 Suspenso

Link1 Link2 Link3

Aclassew3sidenavcriaumanavegaolateral:

Menu
Home Page content..
About

Contact

Dropdown

Support

W3.CSS Paginao

11/17
29/02/2016 W3.CSSDemonstrao

Ow3paginationclasseforneceumamaneirasimplesparanavegaodepgina:

1 2 3 4 5 6

Anterior Prximo"

Casa link1 link2

W3.CSS fontes
ComW3.CSSextremamentefcildeadicionarfontesaumapginadaweb:

Tornaraweblindo!
Tornar a web!
W3.CSS Tabs
Tabssoperfeitosparaaplicaesnicapginadaweb,ouparapginasWebcapaz
deexibirdiferentesassuntos.

Londres Paris Tquio

Londres
LondresacidadecapitaldaInglaterra.

acidademaispopulosadoReinoUnido,comumareametropolitanademais
de13milhesdehabitantes.

W3.CSS Receptividade
12/17
29/02/2016 W3.CSSDemonstrao

Osw3responsiveclassesfornecemacapacidadederespostaparatodosostiposde
dispositivos:PC,laptop,tabletemvel.

Redimensionar a pgina para ver o efeito!

W3meia
AclasseW3meiautilizaametade(50%)dajaneladoecr.

Emtelaspequenas(mximode600pixels)queredimensionaautomaticamente
alarguradetelacheia.

W3meia

W3 tero
Ow3deterceiraclasseusaumtero(33,33%)davivatela.

Emtelaspequenas(mximode600pixels)queredimensionaautomaticamente
alarguradetelacheia.

W3 tero

W3 tero

w3 trimestre
Aclassew3trimestreusaumquarto(25%)dajaneladoecr.

Emtelaspequenas(mximode600pixels)queredimensionaautomaticamente
alarguradetelacheia.

w3 trimestre

w3 trimestre

w3 trimestre
13/17
29/02/2016 W3.CSSDemonstrao

W3.CSStambmsuportaumagradefludica12colunamvel,primeirocom
pequenas,mdiasegrandesclasses.

Formulrios de entrada W3.CSS


Osw3entradaaulassoparaformulriosdeentrada:

Formulrio de entrada

Nome

Oemail

Sujeito

Leite

Acar

Lemon(Disabled)

Formulrio de entrada

Nome

Oemail

Sujeito

14/17
29/02/2016 W3.CSSDemonstrao

Masculino

Fmea

Nosei(Disabled)

W3.CSS Animations
Osw3Animarclassesfornecemumamaneirafcildedeslizarefadeinelementos:

Topo Inferior Esquerda Certo FadeIn zoom

Girar

Animao divertimento!

W3.CSS Tooltips
Ow3dicaclassepodeexibirtodosostiposdedicasdeferramentas:

Passeomousesobreestetexto!

Passeomousesobreestetexto!

Passeomousesobreestetexto!

15/17
29/02/2016 W3.CSSDemonstrao

Bares W3.CSS Progresso


Ow3progressbarclassecriabarrasdeprogresso:

Cliqueemmim

Temas de celular Cor


Ostemasdecoresprdefinidassoespecialmenteadequadoparaaplicaesweb
mveis.

tema Indigo

Filmes 2014

16/17
29/02/2016 W3.CSSDemonstrao

Congeladas
Arespostaparaasanimaeseraridculo

A culpa em nossas estrelas


Tocar,emocionanteerealmentebemfeito

Os Vingadores
UmenormesucessoparaaMarveleDisney

Teal tema

Filmes 2014

Congeladas
Arespostaparaasanimaeseraridculo

A culpa em nossas estrelas


Tocar,emocionanteerealmentebemfeito

Os Vingadores
UmenormesucessoparaaMarveleDisney

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

17/17
29/02/2016 W3.CSSCores

W3.CSS Cores
Anterior Prximocaptulo"

Classes de cor
W3.CSSusaclassesdecor.

Asclassesdecorsoinspiradosporcoresusadasemmarketing,sinaisdetrnsito,e
notas.

W3vermelho

w3rosa

w3roxo

w3deeppurple

w3indigo

w3blue

w3azulclaro

w3ciano

1/8
29/02/2016 W3.CSSCores

w3Aqua

w3teal

w3verde

w3luzverde

w3lime

w3deareia

w3khaki

w3amarelo

w3mbar

W3laranja

w3deeplaranja

w3azulcinzento

w3brown

2/8
29/02/2016 W3.CSSCores

w3cinzaclaro

w3cinza

w3cinzaescuro

w3preta

w3plidovermelho

w3amareloplido

w3verdeclaro

w3azulclaro

Cores Hover
Osw3hovercorclassesdepermitirousodetodasascoresacimacomocoresem
foco.

Passeomousesobreestesbotes:

Preto Amarelo Azul Vermelho Branco

Usando classes de cor


classesdecorespodeserusadoemqualquerelementoHTML.

3/8
29/02/2016 W3.CSSCores

Teclas coloridas
caqui Amarelo laranja Vermelho Roxa

Colorido Containers
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

Tabelas coloridas
Nome Pontos
JillSmith 50
EveJackson 94
AdamJohnson 67
BoNilson 35

Colorido Cartes
Umcarroumveculomotorizado
rodado,autoalimentadoutilizadopara
otransporte.Amaioriadasdefinies
dotermoespecificaqueoscarrosso
projetadosparafuncionar
principalmenteemestradas,parater
oassentoparaumaoitopovos,
tipicamenteterdeumaoitopovos,
tipicamenteterquatrorodas.
(Wikipedia)

4/8
29/02/2016 W3.CSSCores

Classes texto da cor

No preto
w3textvermelho

w3textrosa

w3textroxo

w3textdeeproxo

w3textindigo

w3textazul

w3textazulclaro

w3textciano

w3textAqua

w3textteal

w3textverde

w3textluzverde

w3textcal

w3textareia

w3textkhaki

w3textamarelo

w3textmbar

w3textlaranja

w3textdeeplaranja

w3textazulcinzento

w3textmarrom

w3textcinzaclaro

5/8
29/02/2016 W3.CSSCores

w3textcinza

w3textcinzaescuro

w3textpreta

W3textobranco

No cinza
w3textvermelho

w3textrosa

w3textroxo

w3textdeeproxo

w3textindigo

w3textazul

w3textazulclaro

w3textciano

w3textAqua

w3textteal

w3textverde

w3textluzverde

w3textcal

w3textareia

w3textkhaki

w3textamarelo

w3textmbar

w3textlaranja

w3textdeeplaranja

w3textazulcinzento

w3textmarrom
6/8
29/02/2016 W3.CSSCores

w3textcinzaclaro

w3textcinza

w3textcinzaescuro

w3textpreta

W3textobranco

No Branco
w3textvermelho

w3textrosa

w3textroxo

w3textdeeproxo

w3textindigo

w3textazul

w3textazulclaro

w3textciano

w3textAqua

w3textteal

w3textverde

w3textluzverde

w3textcal

w3textareia

w3textkhaki

w3textamarelo

w3textmbar

w3textlaranja

w3textdeeplaranja

7/8
29/02/2016 W3.CSSCores

w3textazulcinzento

w3textmarrom

w3textcinzaclaro

w3textcinza

w3textcinzaescuro

w3textpreta

W3textobranco

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

8/8
29/02/2016 W3.CSSUtilities

W3.CSS Utilities Helpers


Anterior Prximocaptulo"

Cor Utilities Helpers


LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

Exemplo

<divclass="w3containerw3orange">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>

<divclass="w3containerw3red">
<p>LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>

Tentevocmesmo"

Utilitriossofreqentementechamadosdeajudantes.
1/6
29/02/2016 W3.CSSUtilities

Utilitrios de preenchimento Helpers

LondresacidadecapitaldaInglaterra.acidademaispopulosado
ReinoUnido,comumareametropolitanademaisde13milhesde
habitantes.

Exemplo

<divclass="w3paddingjumbow3orange">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>

Tentevocmesmo"

Exemplo

<divclass="w3padding16w3orange">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>

Tentevocmesmo"

Utilitrios de fronteira
2/6
29/02/2016 W3.CSSUtilities

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

Exemplo

<divclass="w3borderleftw3borderright">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>

Tentevocmesmo"

Exemplo

<divclass="w3border">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>

Tentevocmesmo"

Utilities Tamanho
Estoupequena(usandow3tiny)

Estoupequena(usandow3pequeno)

3/6
29/02/2016 W3.CSSUtilities

Eusoumdio.Opadro.

Estougrande(usandow3large)

Estouxlarge(usandow3xlarge)

Exemplo

<pclass="w3small">I'msmall(usingw3small)</p>
<p>I'mmedium.Thedefault.</p>
<pclass="w3large">I'mlarge(usingw3large)</p>
<pclass="w3xlarge">I'mxlarge(usingw3xlarge)</p>

Tentevocmesmo"

Utilitrios de margem
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademais
populosadoReinoUnido,comumareametropolitanademais
de13milhesdehabitantes.

Exemplo

<divclass="w3containerw3margin64">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
4/6
29/02/2016 W3.CSSUtilities

</p>

</div>

Tentevocmesmo"

Crculo

Exemplo

<imgclass="w3circle"src="img_car.png"alt="Car">

Tentevocmesmo"

Centro

5/6
29/02/2016 W3.CSSUtilities

Exemplo

<divclass="w3containerw3centerw3blackw3card2">
<imgclass="w3circle"src="img_car.png"alt="Car">
</div>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

6/6
29/02/2016 W3.CSSContainers

W3.CSS Containers
Anterior Prximocaptulo"

HTML Containers
ElementostpicosdecontinerHTMLso:

<Div>
<Header>
<Footer>
<Artigo>
<Section>
<Blockquote>

Classes de continer
Classesrecipientessoimportantesparaofornecimento:

margenscomuns
paddingscomuns
alinhamentosverticaiscomuns
alinhamentoshorizontaiscomuns
fontescomuns
Ascorescomuns

OW3.CSSw3containerclasseaclasseCSSperfeitopararecipientesHTML.Ele
podeserusadoparaexibirtodosostiposdecabealhos,rodaps,artigos,sees,
alertas,notas,painis,oucitaes.

Sdependedequaisascoresquevocescolher!!!

Exemplo

1/11
29/02/2016 W3.CSSContainers

<divclass="w3container">

<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.</p>

</div>

Tentevocmesmo"

Paraadicionarumacor,bastaadicionarumaclassedecor:

Exemplo

<divclass="w3containerw3red">

<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.</p>

</div>

Tentevocmesmo"

Exibindo Painis e Notas


Asnotassofrequentementeapresentadoscomumacorplidaeumabarracolorida:

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

Exemplo

2/11
29/02/2016 W3.CSSContainers

<divclass="w3containerw3palebluew3leftbarw3borderblue">
<p>LondonisthemostpopulouscityintheUnitedKingdom,
withametropolitanareaofover13millioninhabitants.</p>
</div>

Tentevocmesmo"

Ospainispodemserexibidosemummilhodemaneirasdiferentes:

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.

Exemplo

<divclass="w3containerw3lightgreyw3border">
<p>LondonisthemostpopulouscityintheUnitedKingdom,
withametropolitanareaofover13millioninhabitants.</p>
3/11
29/02/2016 W3.CSSContainers

</div>

Tentevocmesmo"

Exibindo Quotes
Ow3containerclassepodeserusadaparaexibircitaes.

"Tornloomaissimplespossvel,masnomaissimples."

AlbertEinstein

"Tornloomaissimplespossvel,masnomaissimples."

AlbertEinstein

"Tornloomaissimplespossvel,mas
nomaissimples."
AlbertEinstein

Exemplo

<divclass="w3containerw3leftbarw3lightgrey">
<p><i>"Makeitassimpleaspossible,butnotsimpler."</i></p>
<p>AlbertEinstein</p>
</div>

Tentevocmesmo"

4/11
29/02/2016 W3.CSSContainers

SevocusarHTML<blockquote>,lembresequeoHTMLiradicionarumamargem
extraesquerda:

"Tornloomaissimplespossvel,masnomaissimples."

AlbertEinstein

"Tornloomaissimplespossvel,masnomaissimples."

AlbertEinstein

"Tornloomaissimplespossvel,
masnomaissimples."
AlbertEinstein

Exemplo

<blockquoteclass="w3containerw3leftbarw3lightgrey">
<p><i>"Makeitassimpleaspossible,butnotsimpler."</i></p>
<p>AlbertEinstein</p>
</blockquote>

Tentevocmesmo"

Cabealhos e rodaps
Aoestilodeumcabealho,utilizeow3containerdeclasse:

Ttulo 1
5/11
29/02/2016 W3.CSSContainers

Exemplo

<headerclass="w3containerw3teal">
<h1>Heading1</h1>
</header>

Tentevocmesmo"

Aoestilodeumrodap,utilizeow3containerdeclasse:

Rodap
informaesderodapvaiaqui

Exemplo

<footerclass="w3containerw3teal">
<h5>Footer</h5>
<p>Footerinformationgoeshere</p>
</footer>

Tentevocmesmo"

Artigos e Seces
Aoestilodeumartigo,useow3containerdeclasse:

Exemplo

<articleclass="w3container">

<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.</p>

</article>

6/11
29/02/2016 W3.CSSContainers

Tentevocmesmo"

Aoestilodeumaseo,utilizeow3containerdeclasse:

Exemplo

<sectionclass="w3container">

<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.</p>

</section>

Tentevocmesmo"

Preenchimento
Aclassew3containertemestofode1px(superioreinferior),e16px(esquerdae
direita).

Sevocquiseralteraropreenchimentodeumrecipiente,vocpodeusarumaclasse
w3padding:

Exemplo

<divclass="w3containerw3padding32w3red">

<h2>London</h2>

<p>LondonisthecapitalcityofEngland.
ItisthemostpopulouscityintheUnitedKingdom,
withametropolitanareaofover13millioninhabitants.</p>

</div>

Tentevocmesmo"

7/11
29/02/2016 W3.CSSContainers

cdigo Containers

Exemplo HTML

<divclass="w3codehtmlHigh">

..HTMLcodegoeshere

</div>

Tentevocmesmo"

Exemplo CSS

<divclass="w3codecssHigh">

..CSScodehere

</div>

Tentevocmesmo"

Exemplo JavaScript

<divclass="w3codejsHigh">

..JavaScriptcodehere

</div>

Tentevocmesmo"

8/11
29/02/2016 W3.CSSContainers

Escondendo Containers fechamento


Esconderoufecharumrecipientefcil:

Exemplo

<divclass="w3containerw3red">

<spanclass="w3closebtn"
onclick="this.parentElement.style.display='none'">X</span>

<p>Toclosethiscontainer,clickontheXintheupperright
corner.</p>

</div>

Tentevocmesmo"

combinaes

Cabealho

9/11
29/02/2016 W3.CSSContainers

bomcarro

Umcarroumveculomotorizadorodado,autoalimentadoutilizadoparao
transporte.Amaioriadasdefiniesdotermoespecificaqueoscarrossoprojetados
parafuncionarprimeiramenteemestradas.(Wikipedia)

Rodap

Exemplo usando <div> elementos HTML

<divclass="w3containerw3red">
<h1>Header</h1>
</div>

<divclass="w3image">
<imgsrc="img_car.png"alt="Car"style="width:100%">
<divclass="w3titlew3textblack">NiceCar</div>
</div>

<divclass="w3container">
<p>Acarisawheeled,selfpoweredmotorvehicleusedfor

10/11
29/02/2016 W3.CSSContainers

transportation.Mostdefinitionsofthetermspecifythatcarsare
designedtorunprimarilyonroads.(Wikipedia)</p>
</div>

<divclass="w3containerw3red">
<h5>Footer</h5>
</div>

Tentevocmesmo"

Exemplo usando elementos semnticos HTML

<headerclass="w3containerw3red">
<h1>Header</h1>
</header>

<divclass="w3image">
<imgsrc="img_car.png"alt="Car"style="width:100%">
<divclass="w3titlew3textblack">NiceCar</div>
</div>

<articleclass="w3container">
<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.Mostdefinitionsofthetermspecifythatcarsare
designedtorunprimarilyonroads.(Wikipedia)</p>
</article>

<footerclass="w3containerw3red">
<h5>Footer</h5>
</footer>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

11/11
29/02/2016 W3.CSSBotes

W3.CSS Botes
Anterior Prximocaptulo"

botes
ComW3.CSS,todososelementosHTMLpodemserbotes.

Masoselementosmaiscomunsso<input>,<button>,e<a>:

botodeentrada boto FazeraligaoBoto

Exemplo

<inputclass="w3btn"value="InputButton">

<buttonclass="w3btn">ButtonButton</button>

<aclass="w3btn"href="http://www.w3schools.com">LinkButton</a>

Tentevocmesmo"

Cores do boto
Botesvmemtodasascoresquevocprecisa:

caqui Amarelo laranja Vermelho Roxa Areia

Ciano gua Azul ndigo Verde Cerceta

Exemplo

1/8
29/02/2016 W3.CSSBotes

<buttonclass="w3btnw3khaki">Khaki</button>
<buttonclass="w3btnw3yellow">Yellow</button>
<buttonclass="w3btnw3orange">Orange</button>
<buttonclass="w3btnw3red">Red</button>
<buttonclass="w3btnw3purple">Purple</button>

Tentevocmesmo"

Cores Hover
Passeefeitosvmemtodasascoresquevocprecisa:

caqui Branco Vermelho Roxa

gua Azul Verde Cerceta

Exemplo

<buttonclass="w3btnw3hoverkhaki">Khaki</button>
<buttonclass="w3btnw3hoverwhite">White</button>
<buttonclass="w3btnw3hoverred">Red</button>
<buttonclass="w3btnw3hoverpurple">Purple</button>

Tentevocmesmo"

Formas de boto
Botesvmemtodasasformasquevocprecisa:

Normal Volta Rounder

eRounder eRounder

2/8
29/02/2016 W3.CSSBotes

Exemplo

<buttonclass="w3btn">Normal</button>
<buttonclass="w3btnw3round">Round</button>
<buttonclass="w3btnw3roundlarge">Rounder</button>
<buttonclass="w3btnw3roundxlarge">andRounder</button>
<buttonclass="w3btnw3roundxxlarge">andRounder</button>

Tentevocmesmo"

tamanhos de boto
Botesvmemtodosostamanhosquevocprecisa:

Minsculo Pequeno Mdio Grande Xlarge Xlarge

Exemplo

<buttonclass="w3btnw3tiny">Tiny</button>
<buttonclass="w3btnw3small">Small</button>
<buttonclass="w3btnw3medium">Medium</button>
<buttonclass="w3btnw3large">Large</button>
<buttonclass="w3btnw3xlarge">xLarge</button>

Tentevocmesmo"

Fronteiras boto
Osbotespodemterfronteiras.

Boto Boto Boto

3/8
29/02/2016 W3.CSSBotes

Exemplo

<buttonclass="w3btnw3whitew3border">Button</button>
<buttonclass="w3btnw3khakiw3border">Button</button>
<buttonclass="w3btnw3yelloww3border">Button</button>

Tentevocmesmo"

Botes com efeitos de texto


Osbotespodemterefeitosdetextoemitlicoenegrito.

Normal itlico Negrito

Exemplo

<buttonclass="w3btn">Normal</button>
<buttonclass="w3btn"><i>Italic</i></button>
<buttonclass="w3btn"><b>Bold</b></button>

Tentevocmesmo"

Osbotespodemterefeitosdetextosombra.

Sombra Sombra Sombra

Exemplo

<buttonclass="w3btnw3redw3textshadow">Shadow</button>
<buttonclass="w3btnw3redw3textshadow"><i>Shadow</i>
</button>
<buttonclass="w3btnw3redw3textshadow"><b>Shadow</b>
</button>

4/8
29/02/2016 W3.CSSBotes

Tentevocmesmo"

Osbotespodemterefeitosdetextofinoelargura.

Normal Fino Largo

Exemplo

<buttonclass="w3btn">Normal</button>
<buttonclass="w3btnw3slim">Slim</button>
<buttonclass="w3btnw3wide">Wide</button>

Tentevocmesmo"

De largura completa Botes


Paracriarumbotodelarguracompleta,adicioneobtnw3blockclasseaum
elemento.

Delarguratotalteclastemumalargurade100%,eseestendeportodaalargurado
elementopai:

Boto

Boto

Exemplo

<buttonclass="w3btnblock">Button</button>
<buttonclass="w3btnblockw3teal">Button</button>

Tentevocmesmo"

5/8
29/02/2016 W3.CSSBotes

Hover Effects / pessoas com mobilidade Botes


Botessedestacaquandovocpassaomousesobreeles.

botesnormaisexibirumponteirodedo.

botescomdeficinciasoopacaseexibiruma"nenhumsinaldoestacionamento".

Boto Boto

boto boto

boto boto

Exemplo

<buttonclass="w3btn">Button</button>
<buttonclass="w3btnw3disabled">Button</button>

<inputtype="button"class="w3btn"value="Button">
<inputtype="button"class="w3btn"value="Button"disabled>

Tentevocmesmo"

Botes com efeitos em cascata


Osbotespodemterefeitosemcascataquandoelessoclicados:

Boto Boto Boto

Exemplo

<buttonclass="w3btnw3ripple">Button</button>
<buttonclass="w3btnw3ripplew3red">Button</button>
<buttonclass="w3btnw3ripplew3yellow">Button</button>

6/8
29/02/2016 W3.CSSBotes

Tentevocmesmo"

boto Grupos
Osbotespodemseragrupadas(semespaoentreelas),utilizando"btnw3group":

Boto Boto Boto

Exemplo

<divclass="w3btngroup">
<buttonclass="w3btnw3ripple">Button</button>
<buttonclass="w3btnw3ripplew3red">Button</button>
<buttonclass="w3btnw3ripplew3yellow">Button</button>
</div>

Tentevocmesmo"

Elementos de boto
ComW3.CSS,todososelementospodeserumboto.

Umaimagempodeserumboto

Qualquerdiv,cabealho,rodapououtrosrecipientespodeserumboto.

7/8
29/02/2016 W3.CSSBotes

flutuante Botes
Obtnw3flutuanteclasse,criabotescircularesquesodestinadosparafunes
importantes:

+
+

Exemplo

<aclass="w3btnfloatingw3teal">+</a>
<aclass="w3btnfloatingw3disabled">+</a>

Tentevocmesmo"

Useagrandeflutuandobtnw3classparagrandesbotesflutuantes:

+ +

Exemplo

<aclass="w3btnfloatinglargew3teal">+</a>
<aclass="w3btnfloatinglargew3disabled">+</a>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

8/8
29/02/2016 W3.CSSCartes

W3.CSS Cartes
Anterior Prximocaptulo"

Cartes exibindo

Joo
Arquitetoeengenheiro

Classe define
W3card RecipienteparaqualquercontedoHTML(commargem)

w3card2 RecipienteparaqualquercontedoHTML(sombracom
borda2px)

w3card4 RecipienteparaqualquercontedoHTML(sombracom
borda4px)
w3card8 RecipienteparaqualquercontedoHTML(sombracom
borda8px)
w3card12 RecipienteparaqualquercontedoHTML(12pxfronteira
desombra)

1/7
29/02/2016 W3.CSSCartes

w3card16 RecipienteparaqualquercontedoHTML(16pxfronteira
desombra)
w3card24 RecipienteparaqualquercontedoHTML(24pxfronteira
desombra)

Colorido Cartes
Criarcartesdepapellikecomasw3decartodeaulas,eusarumw3color
classeparaadicionarumacor:

w3card2

w3card4

w3card8

Exemplo Amarelos

<divclass="w3cardw3yellow">
<p>w3card</p>
</div>

Tentevocmesmo"

Exemplo Branco Cards

<divclass="w3card">

2/7
29/02/2016 W3.CSSCartes

<p>w3card</p>
</div>

Tentevocmesmo"

carto da foto

AlnguadoTrollemHardanger,
Noruega

Exemplo

<divclass="w3card12">
<imgsrc="img_fjords.jpg"alt="Norway">
<divclass="w3containerw3center">
<p>TheTroll'stongueinHardanger,Norway</p>
</div>
</div>

Tentevocmesmo"

contedo do carto

3/7
29/02/2016 W3.CSSCartes

Cabealho
Algumtexto..Loremipsumdolorsit
amet,consecteturadipisicingelit,sed
noeiusmodtemporutincididunt
laboreetdoloremagnaaliqua.Ut
enimadminimveniam,Quisnostrud
exercitationullamcolaborisnisiut
aliquipexeacommodoconsequat.

Boto

Rodap

Exemplo

<divclass="w3card4">

<headerclass="w3containerw3blue">
<h1>Header</h1>
</header>

<divclass="w3container">
<p>Loremipsum...</p>
<buttonclass="w3btn">Button</button>
</div>

<footerclass="w3containerw3blue">
<h5>Footer</h5>
</footer>

</div>

Tentevocmesmo"

4/7
29/02/2016 W3.CSSCartes

mais Exemplos
Pedido de amizade

John Doe

Aceitar Declnio

Exemplo

<divclass="w3card8w3darkgrey">

<divclass="w3containerw3center">
<h3>Friendrequest</h3>
<imgsrc="img_avatar3.png"alt="Avatar"style="width:80%">
<h5>JohnDoe</h5>

<buttonclass="w3btnw3green">Accept</button>
<buttonclass="w3btnw3red">Decline</button>
</div>

</div>

Tentevocmesmo"

5/7
29/02/2016 W3.CSSCartes

Exemplo

<divclass="w3card4w3lightgrey">

<divclass="w3containerw3center">
<imgsrc="img_avatar4.png"alt="Avatar"class="w3circle">
<h5>example@email.com</h5>

<inputclass="w3inputw3border"type="text"
placeholder="Password">
<buttonclass="w3btnw3btnblockw3green">Login</button>
<ahref="#"class="w3leftw3textgreen">Forgotpassword?</a>
</div>

</div>

Tentevocmesmo"

John Doe

1novopedidodeamigo

CEOdaPoderosoEscolas.
Marketingepublicidade.
Procurandoumnovo
empregoenovasoportunidades.

+Ligue

Exemplo

<divclass="w3card4">

<headerclass="w3containerw3lightgrey">
<h3>JohnDoe</h3>

6/7
29/02/2016 W3.CSSCartes

</header>

<divclass="w3container">

<p>1newfriendrequest</p>
<hr>

<imgsrc="img_avatar3.png"alt="Avatar"class="w3leftw3
circle">

<p>President/CEOatMightySchools...</p>
</div>

<buttonclass="w3btnblockw3darkgrey">+Connect</button>

</div>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

7/7
29/02/2016 W3.CSSAlertas

W3.CSS Alertas
Anterior Prximocaptulo"

Exibindo Alertas

Perigo!

Overmelhoindicafrequentementeumaaoperigosaoupotencialmente
negativa.

Aviso!Amareloelaranja,muitasvezesindicaumavisodequepodeprecisar
deateno.

Sucesso!Verdeindicafrequentementeumaaobemsucedidaoupositivo.

Informaes!Azul,muitasvezesindicaumamudanainformativaneutraou
ao.

Umacaixadealertaapenasumw3containercomumacor:

Exemplo

<divclass="w3containerw3red">
<h3>Danger!</h3>
<p>Redoftenindicatesadangerousorpotentiallynegative
action.</p>
</div>

Tentevocmesmo"

1/4
29/02/2016 W3.CSSAlertas

W3.CSS Cores
Osalertassofrequentementeexibidoscomumacorforte,mastodaacorpodeser
usado:

Perigo!
Overmelhoindicafrequentementeumaaoperigosaoupotencialmente
negativa.

Aviso!
Amarelo,muitasvezesindicaumavisodequepodeprecisardeateno.

Sucesso!
Verde,muitasvezesindicaalgobemsucedidaoupositivo.

Perigo!

Aviso!

Sucesso!

Alertas de fechamento
Parafecharestescontentores,cliquenoXnocantosuperiordireito:

Perigo!

Overmelhoindicafrequentementeumaaoperigosaoupotencialmente
negativa.

Aviso!

2/4
29/02/2016 W3.CSSAlertas

Amarelo,muitasvezesindicaumavisodequepodeprecisardeateno.

Sucesso!

Overdeindicafrequentementeumaaobemsucedidaoupositivo.

Fechandoumalertapodeserfeitousandoumonclickeventoemumw3closebtn:

Exemplo

<spanonclick="this.parentElement.style.display='none'"class="w3
closebtn">x</span>

Tentevocmesmo"

Alertas arredondados
Useasw3redondasaulassevocquisercantosarredondados:

w3round

w3largeround

w3roundXXLarge

Exemplo

<divclass="w3containerw3greenw3round">

Tentevocmesmo"

3/4
29/02/2016 W3.CSSAlertas

Alerta como um carto


w3card8

Exemplo

<divclass="w3containerw3redw3card8">

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

4/4
29/02/2016 TabelasW3.CSS

W3.CSS Tabelas
Anterior Prximocaptulo"

Exibindo uma Tabela


Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Bo Nilsson 50

Mike Ross 35

Tabela bsica
Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Exemplo

<tableclass="w3table">
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Points</th>
</tr>
<tr>
1/11
29/02/2016 TabelasW3.CSS

<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>

</table>

Tentevocmesmo"

Tabela delimitada
Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Exemplo

<tableclass="w3tablew3border">

Tentevocmesmo"

Tabela listrado
Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Exemplo

2/11
29/02/2016 TabelasW3.CSS

<tableclass="w3tablew3striped">

Tentevocmesmo"

Tabela Listrado Bordered


Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Exemplo

<tableclass="w3tablew3borderedw3striped">

Tentevocmesmo"

Border torno de uma mesa listrada


Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Exemplo

<tableclass="w3tablew3borderedw3stripedw3border">

3/11
29/02/2016 TabelasW3.CSS

Tentevocmesmo"

Lanando as listras
Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Parainverteraslistras,bastaadicionar<thead>emtornodocabealhodatabela:

Exemplo

<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Points</th>
</tr>
</thead>

Tentevocmesmo"

Tabela Hoverable
Passeomousesobreaslinhasdatabela:

Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

4/11
29/02/2016 TabelasW3.CSS

Exemplo

<tableclass="w3tablew3borderedw3stripedw3borderw3
hoverable">

Tentevocmesmo"

Tabela com um ponto colorido


Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Exemplo

<thead>
<trclass="w3red">
<th>FirstName</th>
<th>LastName</th>
<th>Points</th>
</tr>
</thead>

Tentevocmesmo"

Cores de mesa
Primeironome ltimonome Pontos

Jill ferreiro 50

5/11
29/02/2016 TabelasW3.CSS

vspera Jackson 94

Ado Johnson 67

Exemplo

<tableclass="w3tablew3blue">

Tentevocmesmo"

Tabela como um carto


Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Exemplo

<tableclass="w3tablew3borderedw3stripedw3card4">

Tentevocmesmo"

Tabela Responsive
Umamesasensvelirexibirumabarraderolagemhorizontalseatelamuito
pequenaparaexibirocontedocompleto.

Tenteredimensionaroecrparaveroefeito.

Primeiro ltimo Pontos Pontos Pontos Pontos Pontos Pontos


nome nome
6/11
29/02/2016 TabelasW3.CSS

Jill ferreiro 5000 5000 5000 5000 5000 5000

vspera Jackson 9400 9400 9400 9400 9400 9400

Ado Johnson 6700 6700 6700 6700 6700 6700

Exemplo

<divclass="w3responsive">

<tableclass="w3tablew3borderedw3striped">
...tablecontent...
</table>

</div>

Tentevocmesmo"

Tabela pequena
Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Exemplo

<tableclass="w3tablew3borderedw3stripedw3tiny">

Tentevocmesmo"

Pequena mesa
7/11
29/02/2016 TabelasW3.CSS

Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Exemplo

<tableclass="w3tablew3borderedw3stripedw3small">

Tentevocmesmo"

Grande Tabela
Primeironome ltimonome Pontos

Jill ferreiro 50

vspera Jackson 94

Ado Johnson 67

Exemplo

<tableclass="w3tablew3borderedw3stripedw3large">

Tentevocmesmo"

XLarge Tabela
Primeironome ltimonome Pontos
Jill ferreiro 50
8/11
29/02/2016 TabelasW3.CSS

vspera Jackson 94
Ado Johnson 67

Exemplo

<tableclass="w3tablew3borderedw3stripedw3xlarge">

Tentevocmesmo"

XXLarge Tabela
Nome Pontos
JillSmith 50
EveJackson 94
AdamJohnson 67
BoNilson 35

Exemplo

<tableclass="w3tablew3borderedw3stripedw3xxlarge">

Tentevocmesmo"

9/11
29/02/2016 TabelasW3.CSS

XXXLarge Tabela
Nome Pontos
ferreiro 50
Jackson 94
Johnson 67
Nilson 35
Exemplo

<tableclass="w3tablew3borderedw3stripedw3xxxlarge">

Tentevocmesmo"

Tabela jumbo
Nome Pontos
10/11
29/02/2016 TabelasW3.CSS

ferreiro 50
Jackson 94
Johnson 67
Nilson 35
Exemplo

<tableclass="w3tablew3borderedw3stripedw3jumbo">

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

11/11
29/02/2016 ListasW3.CSS

W3.CSS Lists
Anterior Prximocaptulo"

Exibio de uma lista


Jill

vspera

Ado

Exemplo

<ulclass="w3ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

Lista delimitada
Jill

vspera

Ado

Exemplo
1/8
29/02/2016 ListasW3.CSS

<ulclass="w3ulw3border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

Lista como um carto


Jill

vspera

Ado

Exemplo

<ulclass="w3ulw3card4">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

Lista Colorido
Jill

vspera

Ado

2/8
29/02/2016 ListasW3.CSS

Exemplo

<ulclass="w3ulw3red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

Lista Colored item


Jill

vspera

Ado

Exemplo

<ulclass="w3ul">
<liclass="w3blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

lista Hoverable
Passeomousesobreositensdalista:

Jill

vspera

3/8
29/02/2016 ListasW3.CSS

Ado

Exemplo

<ulclass="w3ulw3hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

Lista minsculo
Jill

vspera

Ado

Exemplo

<ulclass="w3ulw3tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

Lista Pequena
Jill

vspera

4/8
29/02/2016 ListasW3.CSS

Ado

Exemplo

<ulclass="w3ulw3small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

Lista Grande
Jill

vspera

Ado

Exemplo

<ulclass="w3ulw3large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

Lista XLarge

5/8
29/02/2016 ListasW3.CSS

Jill

vspera

Ado

Exemplo

<ulclass="w3ulw3xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

Lista XXLarge

Jill
vspera
Ado

Exemplo

<ulclass="w3ulw3xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
6/8
29/02/2016 ListasW3.CSS

Tentevocmesmo"

Lista XXXLarge

Jill
vspera
Ado
Exemplo

<ulclass="w3ulw3xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

Lista jumbo

Jill
7/8
29/02/2016 ListasW3.CSS

vspera
Ado
Exemplo

<ulclass="w3ulw3jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

8/8
29/02/2016 ImagensW3.CSS

W3.CSS Imagens
Anterior Prximocaptulo"

Exibio de imagens
Cantosarredondados:

Crculo:

1/11
29/02/2016 ImagensW3.CSS

delimitada:

imagem arredondada

2/11
29/02/2016 ImagensW3.CSS

Ow3roundclasseadicionacantosarredondadosaumaimagem:

Exemplo

<imgsrc="img_fjords.jpg"class="w3round"alt="Norway">

Tentevocmesmo"

imagem circulou

Ow3crculoclassemoldaumaimagemparaumcrculo:

Exemplo

<imgsrc="fjords.jpg"class="w3circle"alt="Norway">

Tentevocmesmo"

imagem limitada
3/11
29/02/2016 ImagensW3.CSS

Ow3borderclasseadicionabordasaoredordaimagem:

Exemplo

<imgsrc="fjords.jpg"class="w3borderw3padding"alt="Norway">

Tentevocmesmo"

imagem Hoverable

Ow3pairaropacidadeclasseacrescentatransparnciaimagemaopassaro
mouse:

Exemplo

<imgsrc="fjords.jpg"class="w3hoveropacity"alt="Norway">

Tentevocmesmo"

4/11
29/02/2016 ImagensW3.CSS

Imagem como carto


Enrolequalquerumdos*w3cartoaulasemtodooelemento<img>paraexibilo
comoumcarto(adicionarsombras):

Simon
Ochefedetodososchefes
5/11
29/02/2016 ImagensW3.CSS

Exemplo

<divclass="w3card4">
<imgsrc="img_avatar.png"alt="Person">
</div>

Tentevocmesmo"

Outro exemplo de carto

example@email.com

Password

Entrar

Esqueceuasenha?

Exemplo

<divclass="w3card4w3lightgrey">

<divclass="w3containerw3center">
<imgsrc="img_avatar4.png"alt="Avatar"class="w3circle">
<h5>example@email.com</h5>
6/11
29/02/2016 ImagensW3.CSS

<inputclass="w3inputw3border"type="text"
placeholder="Password">

<buttonclass="w3btnw3btnblockw3green">Login</button>

<ahref="#"class="w3leftw3textgreen">Forgotpassword?</a>
</div>

</div>

Tentevocmesmo"

imagem do texto
Posicionarotextoemumaimagemcomosw3displayaulas:

TopLeft Cantosuperiordireito

Meio

Inferioresquerdo Cantoinferiordireito

Exemplo

<divclass="w3displaycontainer">
<imgsrc="img_lights.jpg"alt="Lights">
<divclass="w3displaytopleftw3container">TopLeft</div>
<divclass="w3displaytoprightw3container">TopRight</div>
<divclass="w3displaybottomleftw3container">Bottom
Left</div>
<divclass="w3displaybottomrightw3container">Bottom
Right</div>
7/11
29/02/2016 ImagensW3.CSS

<divclass="w3displaymiddlew3large">Middle</div>
</div>

Tentevocmesmo"

Construindo um lbum de fotos


Nesteexemplo,usamososistemadaRedeResponsiveW3.CSSparacriarumlbum
defotosquepareceserbomemtodososdispositivos.Vocaprendermaissobre
issomaistarde.

vero 2015

5 Terre

8/11
29/02/2016 ImagensW3.CSS

Monterosso

Vernazza

9/11
29/02/2016 ImagensW3.CSS

Manarola

Corniglia

10/11
29/02/2016 ImagensW3.CSS

Riomaggiore

Exemplo

<divclass="w3third">
<divclass="w3card2">
<imgsrc="img_monterosso.png"style="width:100%">
<divclass="w3container">
<h4>Monterosso</h4>
</div>
</div>
</div>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

11/11
29/02/2016 EntradaW3.CSS

W3.CSS Input
Anterior Prximocaptulo"

Formulrio de entrada

Nome

Oemail

Sujeito

Leite
Acar
Lemon(Disabled)

Masculino
Fmea
Nosei(Disabled)

Mandar

Melhores Marcadores

1/12
29/02/2016 EntradaW3.CSS

Formulrio de entrada

Primeironome

ltimonome

Exemplo

<formclass="w3container">

<label>FirstName</label>
<inputclass="w3input"type="text">

<label>LastNamel</label>
<inputclass="w3input"type="text">

</form>

Tentevocmesmo"

Etiquetas de fundo

Formulrio de entrada

Primeironome

ltimonome

2/12
29/02/2016 EntradaW3.CSS

Exemplo

<formclass="w3container">

<inputclass="w3input"type="text">
<label>FirstName</label>

<inputclass="w3input"type="text">
<label>LastName</label>

</form>

Tentevocmesmo"

Cartes de entrada

Cabealho
Primeironome

ltimonome

Exemplo

<divclass="w3card4">

<divclass="w3containerw3green">
<h2>Header</h2>
</div>

3/12
29/02/2016 EntradaW3.CSS

<formclass="w3container">

<labelclass="w3label">FirstName</label>
<inputclass="w3input"type="text">

<labelclass="w3label">LastName</label>
<inputclass="w3input"type="text">

</form>

</div>

Tentevocmesmo"

Etiquetas verdes
Etiquetascomclass="rtulow3"soverdesporpadro:

Primeironome

ltimonome

Exemplo

<formclass="w3container">

<labelclass="w3label">FirstName</label>
<inputclass="w3input"type="text">

<labelclass="w3label">LastName</label>
<inputclass="w3input"type="text">

</form>
4/12
29/02/2016 EntradaW3.CSS

Tentevocmesmo"

validando Labels
etiquetasdevalidaosoovermelho,eficaverdequandoaentradasetornavlido.

Paratornarosrtulosdevalidao,adicionarumaclassew3validarasuaclasse
labelw3.

Primeironome

ltimonome

Oemail

Exemplo

<formclass="w3container">

<inputclass="w3input"type="text"required>
<labelclass="w3labelw3validate">FirstName</label>

<inputclass="w3input"type="text"required>
<labelclass="w3labelw3validate">LastName</label>

<inputclass="w3input"type="email"required>
<labelclass="w3labelw3validate">Email</label>

</form>

5/12
29/02/2016 EntradaW3.CSS

Tentevocmesmo"

etiquetas coloridas
Usequalquerumdosw3textcoloraulasparacolorirassuasetiquetas:

Primeironome

ltimonome

Register

Exemplo

<formclass="w3container">

<labelclass="w3labelw3textblue"><b>FirstName</b></label>
<inputclass="w3inputw3border"type="text">

<labelclass="w3labelw3textblue"><b>LastName</b></label>
<inputclass="w3inputw3border"type="text">

<buttonclass="w3btnw3blue">Register</button>

</form>

Tentevocmesmo"

Entrada delimitada
Adicioneow3borderclasseparacriarentradascomlimites:

6/12
29/02/2016 EntradaW3.CSS

Primeironome

ltimonome

Exemplo

<inputclass="w3inputw3border"type="text">

<inputclass="w3inputw3border"type="text">

Tentevocmesmo"

arredondada Fronteiras
Usequalquerumdosw3redondasclassesparacriarbordasarredondadas:

Primeironome

ltimonome

Exemplo

<inputclass="w3inputw3borderw3round"type="text">

<inputclass="w3inputw3borderw3roundlarge"type="text">

7/12
29/02/2016 EntradaW3.CSS

Tentevocmesmo"

cores
Sintaselivreparausarseusestilosecoresfavoritos:

Formulrio de entrada
Primeironome

ltimonome

Register

Exemplo

<divclass="w3containerw3teal">
<h2>InputForm</h2>
</div>

<formclass="w3container">
<labelclass="w3labelw3textteal"><b>FirstName</b></label>
<inputclass="w3inputw3borderw3lightgrey"type="text">

<labelclass="w3labelw3textteal"><b>LastName</b></label>
<inputclass="w3inputw3borderw3lightgrey"type="text">

<buttonclass="w3btnw3bluegrey">Register</button>
</form>

Tentevocmesmo"

8/12
29/02/2016 EntradaW3.CSS

entradas Hoverable
Osw3hovercoraulasadicionaumacordefundodocampodeentradademouse:

Exemplo

<inputclass="w3inputw3hovergreen"type="text">
<inputclass="w3inputw3borderw3hoverred"type="text">
<inputclass="w3inputw3borderw3hoverblue"type="text">

Tentevocmesmo"

Entradas animados
Aanimadoinputw3classetransformaalarguradeumcampodeentradapara
100%quandoseobtmofoco:

Clickonme!

Clickonme!

Exemplo

<inputclass="w3inputw3animateinput"type="text"
style="width:30%">

9/12
29/02/2016 EntradaW3.CSS

Tentevocmesmo"

checkboxes
Leite

Acar

Lemon(Disabled)

Exemplo

<inputclass="w3check"type="checkbox"checked="checked">
<labelclass="w3validate">Milk</label>

<inputclass="w3check"type="checkbox">
<labelclass="w3validate">Sugar</label>

<inputclass="w3check"type="checkbox"disabled>
<labelclass="w3validate">Lemon(Disabled)</label>

Tentevocmesmo"

Botes do rdio
Masculino

Fmea

Nosei(Disabled)

10/12
29/02/2016 EntradaW3.CSS

Exemplo

<inputclass="w3radio"type="radio"name="gender"value="male"
checked>
<labelclass="w3validate">Male</label>

<inputclass="w3radio"type="radio"name="gender"value="female">
<labelclass="w3validate">Female</label>

<inputclass="w3radio"type="radio"name="gender"value=""
disabled>
<labelclass="w3validate">Don'tknow(Disabled)</label>

Tentevocmesmo"

Selecione as opes
Escolhasuaopo

Exemplo

<selectclass="w3select"name="option">
<optionvalue=""disabledselected>Chooseyouroption</option>
<optionvalue="1">Option1</option>
<optionvalue="2">Option2</option>
<optionvalue="3">Option3</option>
</select>

Tentevocmesmo"

11/12
29/02/2016 EntradaW3.CSS

Ladeado Seleccione Menu


Escolhasuaopo

Exemplo

<selectclass="w3selectw3border"name="option">

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

12/12
29/02/2016 W3.CSSemblemaseTag

W3.CSS Badges, Tags e Sinais


Anterior Prximocaptulo"

Exibindo Badges
Notcias 6

comentrios 8

atualizaes 9

Exemplo

<p>News<spanclass="w3badgew3green">6</span></p>
<p>Comments<spanclass="w3badgew3red">8</span></p>
<p>Updates<spanclass="w3badgew3darkgrey">9</span></p>

Tentevocmesmo"

Exibindo Tag
Exemplo Novo!

Comentrios maistarde!

Exemplo

<p>Example<spanclass="w3tagw3blue">New!</span></p>
<p>Comments<spanclass="w3tagw3teal">MoreLater!</span></p>

Tentevocmesmo"

1/7
29/02/2016 W3.CSSemblemaseTag

Lista com Badges


Jill 5

Eve 3

Adam 8

Exemplo

<ulclass="w3ulw3border">
<li>Jill<spanclass="w3badgew3greenw3right">5</span></li>
<li>Eve<spanclass="w3badgew3greenw3right">3</span></li>
<li>Adam<spanclass="w3badgew3greenw3right">8</span></li>
</ul>

Tentevocmesmo"

Exibindo um Tag como um sinal

LondonZoo
Exemplo

<divclass="w3tagw3orange">LondonZoo</div>

Tentevocmesmo"

Exibindo Tag in a Row

2/7
29/02/2016 W3.CSSemblemaseTag

S UMA eu E

Exemplo

<divclass="w3tagw3red">S</div>
<divclass="w3tagw3black">A</div>
<divclass="w3tagw3yellow">L</div>
<divclass="w3tagw3black">E</div>

Tentevocmesmo"

Exibindo sinais de estrada


FalconRidgeParkway

Exemplo

<divclass="w3tagw3roundw3green"style="padding:3px3px">
<divclass="w3tagw3roundw3green"style="border:1pxsolid
white">
FalconRidgeParkway
</div>
</div>

Tentevocmesmo"

Exibindo grandes Tag

3/7
29/02/2016 W3.CSSemblemaseTag

66
Exemplo

<spanclass="w3tagw3jumbow3paddinglargew3blue">66</span>
<divclass="w3tagw3red">
<spanclass="w3jumbo">49</span><spanclass="w3
xlarge">,99</span>
</div>

Tentevocmesmo"

Exibindo Badges grandes

66
Exemplo

<p><spanclass="w3badgew3jumbow3paddinglargew3
red">66</span></p>

Tentevocmesmo"

Indica sinais de grandes

4/7
29/02/2016 W3.CSSemblemaseTag

EMCASODE
EMERGNCIA
corrercomooinferno!

Exemplo

<spanclass="w3tagw3xxlargew3paddingw3orangew3center">
INCASEOF<br>
EMERGENCY<br>
RUNLIKEHELL!
</span>

Tentevocmesmo"

49 ,99

Exemplo

<divclass="w3tagw3jumbow3green">
<spanclass="w3xxlarge">49</span>
<spanclass="w3large">,99</span>
</div>

Tentevocmesmo"

Exibindo arredondados Signs

5/7
29/02/2016 W3.CSSemblemaseTag

NO
RESPIRAR
DEBAIXODEGUA

Exemplo

<spanclass="w3tagw3xxlargew3paddingw3roundlargew3red
w3center">
DONOT<br>
BREATHE<br>
UNDERWATER
</span>

Tentevocmesmo"

Resultados Letters como tags


JANUARY

Exemplo

<spanclass="w3tagw3black">J</span>
<spanclass="w3tagw3black">A</span>
<spanclass="w3tagw3black">N</span>
<spanclass="w3tagw3black">U</span>
<spanclass="w3tagw3black">A</span>
<spanclass="w3tagw3black">R</span>
<spanclass="w3tagw3black">Y</span>

Tentevocmesmo"

6/7
29/02/2016 W3.CSSemblemaseTag

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

7/7
29/02/2016 W3.CSSResponsive

W3.CSS uma responsabilidade inerente


Anterior Prximocaptulo"

Classes Responsive
Estassoasclassesderesposta:

Classe Descrio

W3meia Ocupa1/2dajanela(emtelasmdiasougrandes)

W3tero Ocupa1/3dajanela(emtelasmdiasougrandes)

w3twothird Ocupa2/3dajanela(emtelasmdiasougrandes)
w3trimestre Ocupa1/4dajanela(emtelasmdiasougrandes)

w3rest Defineorestodeumalinha

w3col Defineumacoluna(maisemumcaptuloposterior)

linhas Responsive
aulasResponsivedeveresidirdentrodeumalinhaasertotalmentesensvel.

Classe Descrio

w3row Defineumrecipientepaddingmenosparaasclassesde
resposta.

O W3meia Classe
Alarguradaw3meioclasse1/2doelementopai(style="width:50%").

Emtelasmenoresque601pixelsqueredimensionaa100%.

W3meia
1/8
29/02/2016 W3.CSSResponsive

W3meia

Exemplo

<divclass="w3row">
<divclass="w3containerw3half">
<h2>w3half</h2>
<p>Thisisaparagraph</p>
</div>
<divclass="w3containerw3half">
<h2>w3half</h2>
<p>Thisisaparagraph</p>
</div>
</div>

Tentevocmesmo"

O w3 de terceira classe
Alarguradaw3teroclasse1/3doelementopai(style="width:33,33%").

Emtelasmenoresque601pixelsqueredimensionaa100%.

W3 tero

W3 tero

W3 tero

Exemplo usando w3 tero

<divclass="w3row">
<divclass="w3containerw3third">
<h2>w3third</h2>
<p>Thisisaparagraph</p>
2/8
29/02/2016 W3.CSSResponsive

</div>

<divclass="w3containerw3third">
<h2>w3third</h2>

<p>Thisisaparagraph</p>
</div>

<divclass="w3containerw3third">
<h2>w3third</h2>

<p>Thisisaparagraph</p>
</div>
</div>

Tentevocmesmo"

A classe w3 trimestre
Alarguradaw3trimestreclasse1/4doelementopai(style="width:25%").

Emtelasmenoresque601pixelsqueredimensionaa100%.

w3 trimestre

Exemplo usando w3 trimestre

<divclass="w3row">
<divclass="w3containerw3quarter">
<h2>w3quarter</h2>
<p>Thisisaparagraph</p>
</div>
<divclass="w3containerw3quarter">
<h2>ww3quarter</h2>
<p>Thisisaparagraph</p>
</div>
<divclass="w3containerw3quarter">
<h2>w3quarter</h2>
<p>Thisisaparagraph</p>
</div>
</div>

3/8
29/02/2016 W3.CSSResponsive

Tentevocmesmo"

combinaes
w3 trimestre

w3 trimestre

w3 trimestre

w3 trimestre

w3 trimestre

W3meia

w3 trimestre

w3 trimestre

w3 trimestre

W3meia

Exemplo: W3meia Dentro W3meia

<divclass="w3row">
<divclass="w3halfw3container">
<h2>w3half</h2>
<divclass="w3row">

4/8
29/02/2016 W3.CSSResponsive

<divclass="w3halfw3containerw3red">
<h2>w3half</h2>

<p>Thisisaparagraph.</p>
</div>

<divclass="w3halfw3container">
<h2>w3half</h2>

<p>Thisisaparagraph.</p>
</div>
</div>
</div>

<divclass="w3halfw3container">
<h2>w3half</h2>

<divclass="w3row">

<divclass="w3halfw3containerw3red">
<h2>w3half</h2>

<p>Thisisaparagraph.</p>
</div>

<divclass="w3halfw3container">
<h2>w3half</h2>

<p>Thisisaparagraph.</p>
</div>
</div>
</div>
</div>

Tentevocmesmo"

Colunas usando REST


Estou150px Eusouoresto

Exemplo usando w3rest

<divclass="w3row">
<divclass="w3col"style="width:150px"><p>150px</p></div>
<divclass="w3rest"><p>rest</p></div>
</div>

5/8
29/02/2016 W3.CSSResponsive

Tentevocmesmo"

Colunas Utilizar percentagem


20% 60% 20%

Exemplo usando cento

<divclass="w3row">
<divclass="w3col"style="width:20%"><p>20%</p></div>
<divclass="w3col"style="width:60%"><p>60%</p></div>
<divclass="w3col"style="width:20%"><p>20%</p></div>
</div>

Tentevocmesmo"

A classe w3content

Exemplo

<bodyclass="w3content"style="maxwidth:600px">

<divclass="w3containerw3card2w3indigo">
<h1>Movies2014</h1>
</div>

<ulclass="w3ul">
<li>
<h3>Frozen</h3>
<p>Thesocialmediaresponse
totheanimationswasridiculous.</p>
</li>
<li>
<h3>TheFaultinOurStars</h3>
<p>Touching,grippingandgenuinelywellmade.</p>
6/8
29/02/2016 W3.CSSResponsive

</li>
<li>

<h3>TheAvengers</h3>

<p>TheAvengersisahugelybankablefranchiseforMarveland
Disney.</p>
</li>
</ul>

<divclass="w3containerw3indigow3xlarge">
<h5>Movies2014</h5>
</div>

</body>

Tentevocmesmo"

grade fluido responsivo 12 Coluna


W3.CSStambmsuportaum12colunadegrelhafluidoresponsivoavanado.

Redimensionarapginaparaveroefeito!

1
2
3
4
5
6
7
8
9
10
11
12

Estapartevaiocupar12colunasemumatelapequena,4emumatelademdio
e3emumatelagrande.

7/8
29/02/2016 W3.CSSResponsive

Estapartevaiocupar12colunasemumatelapequena,8emumatelademdio
e9emumatelagrande.

1
2
3
4
5
6
7
8
9
10
11
12

Vocvaiaprendermaissobreagradedefluidoemumcaptuloposterior.

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

8/8
29/02/2016 W3.CSSAnimate

W3.CSS Animate
Anterior Prximocaptulo"

ComanimaesW3.CSSvocpodedeslizarefadeemelementosHTML.

Topo

Inferior

Esquerda
Animao divertimento!
Certo

FadeIn

zoom

Girar

Deslize no Elements
Deslizeemumelementodapartesuperior,inferior,esquerdaoudireitadatelacom
os*w3animateclasses:

Classe define
w3animadotop Animaumelemento300pixelsapartirdo Tente
topodoecrpara0px
w3animado Animaumelemento300pixelsapartirdo Tente
bottom fundodatelapara0px
W3animado Animaumelemento300px,pelolado Tente
1/3
29/02/2016 W3.CSSAnimate

esquerda esquerdodatelapara0px

w3animado Animaumelemento300pxdoladodireitoda Tente


comoboto telapara0px
direito

Fade in Elements
Desvanecerseemumelementocomow3animadoopacidadeclasse:

Exemplo

<divclass="w3animateopacity">..</div>

Tentevocmesmo"

Zoom in Elements
Zoomumelementocomow3animadozoomdeclasse:

Exemplo

<divclass="w3animatezoom">..</div>

Tentevocmesmo"

Elementos de spin
Girarqualquerelemento360grauscomospinw3classe:

Exemplo

2/3
29/02/2016 W3.CSSAnimate

<divclass="w3spin">..</div>

Tentevocmesmo"

desaparecendo Infinito

Exemplo

<divclass="w3animatefading">..</div>

Tentevocmesmo"

desvaneceTodos

Exemplo

<imgclass="w3animatetop"src="img_01.jpg">
<imgclass="w3animatezoom"src="img_02.jpg">
<imgclass="w3animateleft"src="img_03.jpg">
<imgclass="w3animatebottom"src="img_04.jpg">

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

3/3
29/02/2016 W3.CSSDropdowns

W3.CSS Dropdowns
Anterior Prximocaptulo"

suspensa Hover
Passeme!

Ow3pendentepairarclassedefineumelementosuspensohoverable.

Aw3suspensocontedoclassedefineumapartesuspensaaserexibido.

Exemplo

<divclass="w3dropdownhover">
<buttonclass="w3btnw3red">HoverMe!</button>
<divclass="w3dropdowncontentw3border">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</div>

Tentevocmesmo"

Tantooelementopartehoverableeoelementosuspensopodeserqualquerelemento
HTML.

Noexemploanterior,apartehoverableeraum<button>,eapartesuspensadeum
<div>.

Noprximoexemplo,apartehoverableum<p>,eapartesuspensaum<span>.

Exemplo

1/4
29/02/2016 W3.CSSDropdowns

<divclass="w3dropdownhover">
<p>HoverMe!
<spanclass="w3dropdowncontentw3border">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</div>

Tentevocmesmo"

A Dropdown menu
Aclassew3pendentefocoperfeitoparamenusdenavegaosuspensa.

Vocvaiaprendermaissobrebarrasdenavegaonoprximocaptulo.

Casa link1 Suspenso

Exemplo

<ulclass="w3navbarw3card2w3lightgrey">
<li><ahref="#">Home</a></li>
<li><ahref="#">Link1</a></li>
<liclass="w3dropdownhover">
<ahref="#">Dropdown<iclass="fafacaretdown"></i></a>
<divclass="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</li>
</ul>

Tentevocmesmo"

2/4
29/02/2016 W3.CSSDropdowns

Uma lista suspensa Clickable


Ow3suspensocliqueclassesemelhanteaow3pendentefoco,excetoquea
listasuspensaabertaporJavaScript.

Cliqueemmim

Exemplo

<divclass="w3dropdownclick">
<buttononclick="myFunction()"class="w3btn">ClickMe</button>
<divid="Demo"class="w3dropdowncontentw3card">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</div>

<script>
functionmyFunction(){
document.getElementById("Demo").classList.toggle("w3show");
}
</script>

Tentevocmesmo"

Dropdowns imagem
Passeomousesobre"Monterosso":

MonterossoVernazzaManarola

Exemplo

<divclass="w3dropdownhover">Monterosso
<divclass="w3dropdowncontent"style="width:250px">
<imgsrc="img_monterosso.png"alt="Monterosso"
style="width:100%">
3/4
29/02/2016 W3.CSSDropdowns

</div>
</div>

VernazzaManarola

Tentevocmesmo"

Dropdowns carto
Passeomousesobre"London":

LondresTokyoParis

Exemplo

<divclass="w3dropdownhover">London
<divclass="w3dropdowncontentw3card4"style="width:250px">
<imgsrc="img_london.png"alt="London"style="width:100%">
<divclass="w3container">
<p>LondonisthecapitalcityofEngland.</p>
<p>ItisthemostpopulouscityintheUK.</p>
</div>
</div>
</div>
TokyoParis

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

4/4
29/02/2016 W3.CSSAcordees

W3.CSS Acordees
Anterior Prximocaptulo"

Acordeo
Umacordeousadoparamostrar(eesconder)contedoquedivididoemsees.

Cliquenosbotes"Abrir"abaixoparavercomoelefunciona:

AbrirSeo1

AbrirSeo2

Link1

Link2

Link3

AbrirSeo3

Ow3acordeoclassedefineumacordeo,eacordeocontedow3classe
defineaparteaserexibida:

Exemplo

<divclass="w3accordionw3lightgrey">
<buttononclick="myFunction('Demo1')"class="w3btnblockw3
leftalign">
OpenSection1
</button>
<divid="Demo1"class="w3accordioncontent">
<p>Sometext..</p>

1/2
29/02/2016 W3.CSSAcordees

</div>

<buttononclick="myFunction('Demo2')"class="w3btnblockw3
leftalign">

OpenSection2
</button>

<divid="Demo2"class="w3accordioncontent">
<p>Sometext..</p>
</div>
</div>

<script>

functionmyFunction(id){

document.getElementById(id).classList.toggle("w3show");
}

</script>

Tentevocmesmo"

Tantooelementoqueutilizadoparaabriraacordeoeocontedodoacordeo
podeserqualquerelementoHTML.

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

2/2
29/02/2016 W3.CSSNavigation

W3.CSS Navigation
Anterior Prximocaptulo"

W3.CSSfornecertodosostiposdebarrasdenavegao:

Vertical:

1/13
29/02/2016 W3.CSSNavigation

Incio

Link2

Ligao3

Ligao4

Ligao5

2/13
29/02/2016 W3.CSSNavigation

Horizontal(verticalemtelaspequenas):

Casa link1 link2 Suspenso

Casa link1 link2

Incio Link1 Link2 Ligao3

Navegao bsica
Ow3navbarclassecriaumabarradenavegaohorizontal:

Casa link1 link2 Aligao3

Exemplo

<ulclass="w3navbarw3black">
<li><ahref="#">Home</a></li>
<li><ahref="#">Link1</a></li>
<li><ahref="#">Link2</a></li>
<li><ahref="#">Link3</a></li>
</ul>

Tentevocmesmo"

Barras de navegao coloridas


Casa link1 link2 Aligao3

Casa link1 link2 Aligao3

3/13
29/02/2016 W3.CSSNavigation

Casa link1 link2 Aligao3

Exemplo

<ulclass="w3navbarw3lightgrey">
<ulclass="w3navbarw3green">
<ulclass="w3navbarw3blue">

Tentevocmesmo"

Bares limitou navegao


Casa link1 link2 Aligao3

Casa link1 link2 Aligao3

Casa link1 link2 Aligao3

Exemplo

<ulclass="w3navbarw3borderw3lightgrey">
<ulclass="w3navbarw3borderw3roundw3lightgrey">
<ulclass="w3navbarw3card8w3lightgrey">

Tentevocmesmo"

Ativo / Fazer a ligao atual


Casa link1 link2 Aligao3

Exemplo
4/13
29/02/2016 W3.CSSNavigation

<ulclass="w3navbarw3borderw3lightgrey">
<li><aclass="w3green"href="#">Home</a></li>
<li><ahref="#">Link1</a></li>
<li><ahref="#">Link2</a></li>
<li><ahref="#">Link3</a></li>
</ul>

Tentevocmesmo"

Ligaes Hoverable
Aopassaromousesobreoslinksdentrodabarradenavegao,acordefundomuda
paracinza.

Sevocquerumacordefundodiferenteemfoco,usequalquerumdosw3hover
corclasses:

Casa link1 link2 Aligao3

Exemplo

<ulclass="w3navbarw3borderw3lightgrey">
<li><aclass="w3hoverred"href="#">Home</a></li>
<li><aclass="w3hoverblue"href="#">Link1</a></li>
<li><aclass="w3hovergreen"href="#">Link2</a></li>
<li><aclass="w3hoverteal"href="#">Link3</a></li>
</ul>

Tentevocmesmo"

Ligaes alinhado direita


Casa link1 link2 Aligao3 ligao4

5/13
29/02/2016 W3.CSSNavigation

Exemplo

<ulclass="w3navbarw3lightgreyw3border">
<li><ahref="#">Home</a></li>
<li><ahref="#">Link1</a></li>
<li><ahref="#">Link2</a></li>
<ulclass="w3right">
<li><aclass="w3green"href="#">Link3</a></li>
<li><ahref="#">Link4</a></li>
</ul>
</ul>

Tentevocmesmo"

Barra de navegao Tamanho


Casa link1 link2 Aligao3

Casa link1 link2 Aligao3

Casa link1 link2 Aligao3

Exemplo

<ulclass="w3navbarw3greenw3large">
<ulclass="w3navbarw3greenw3xlarge">
<ulclass="w3navbarw3greenw3xxlarge">

Tentevocmesmo"

Barra de navegao com cones


6/13
29/02/2016 W3.CSSNavigation

Exemplo

<ulclass="w3navbarw3lightgreyw3borderw3large">
<li><aclass="w3green"href="#"><iclass="fafahomew3large">
</i></a></li>
<li><ahref="#"><iclass="fafasearchw3large"></i></a></li>
<li><ahref="#"><iclass="fafaenvelopew3large"></i></a></li>
<li><ahref="#"><iclass="fafaglobew3large"></i></a></li>
<li><ahref="#"><iclass="fafasigninw3large"></i></a></li>
</ul>

Tentevocmesmo"

Barra de navegao com Dropdown


Passeomousesobreolink"dropdown":

Casa link1 Suspenso

Exemplo

<ulclass="w3navbarw3card2w3lightgrey">
<li><ahref="#">Home</a></li>
<li><ahref="#">Link1</a></li>
<liclass="w3dropdownhover">
<ahref="#">Dropdown</a>
<divclass="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</li>
</ul>

7/13
29/02/2016 W3.CSSNavigation

Tentevocmesmo"

Nota:Quandoomenususpenso"aberto",olinksuspensarecebeumacordefundo
cinzaparaindicarqueeleestativo.Parasubstituirisso,adicioneumw3hovercor
classetantoparao"menususpenso"<li>e<a>:

Dica:Sevocquiserumsmbolosuspensaaoladodotextosuspenso,adicionarum
coneadequado(como ):

Casa link1 Suspenso

Exemplo

<liclass="w3dropdownhoverw3hovergreen">
<aclass="w3hovergreen"href="#">Dropdown<iclass="fafa
caretdown"></i></a>
<divclass="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</li>

Tentevocmesmo"

Usew3suspensocliquesevocpreferir,cliquenolinksuspensoemvezdepairar:

Casa link1 Suspenso

Exemplo

<liclass="w3dropdownclick">
<aonclick="myFunction()"href="#">Dropdown<iclass="fafa
caretdown"></i></a>
<divid="demo"class="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
8/13
29/02/2016 W3.CSSNavigation

<ahref="#">Link3</a>
</div>
</li>

<script>

functionmyFunction(){

document.getElementById("demo").classList.toggle("w3show");
}

</script>

Tentevocmesmo"

Corrigido barra de navegao


Paraforarabarradenavegaoparaficarnapartesuperiorounaparteinferiorda
pgina,mesmoquandoousuriorolaapgina,enroleumelemento<div>emtorno
do<ul>eadicioneow3topouw3bottomclasse:

Home Link1 Link2

Fixed Top
The w3top class forces the navigation bar to stay at
the top of the page, even when the user scrolls the
page.
Scroll this page to see the effect.

Top fixo

<divclass="w3top">
<ulclass="w3navbar">
...
</ul>
</div>

9/13
29/02/2016 W3.CSSNavigation

Tentevocmesmo"

Fixed Bottom
The w3bottom class forces the navigation bar to stay
at the bottom of the page, even when the user scrolls
the page.
Scroll this page to see the effect.
Home Link1 Link2
Sometexttoenablescrolling..

Parte inferior fixa

<divclass="w3bottom">
<ulclass="w3navbar">
...
</ul>
</div>

Tentevocmesmo"

Colapso da barra de navegao


Quandoabarradenavegaoocupamuitoespaoemumatelapequena,evocno
querexibiloverticalmenteporpadro,vocpodeusarclassesdeutilitriospara
ocultaremostrarlinksespecficosnabarradenavegao.

Noexemploabaixo,abarradenavegaosubstitudoporumboto()nocanto
superiordireitoquandomostradoemtabletsedispositivosmveis.Quandooboto
clicado,abarradenavegaoserexibidoverticalmente:

Exemplo

10/13
29/02/2016 W3.CSSNavigation

Home

Resizethebrowserwindowtoseetheeffect.

Tentevocmesmo"

topnav
Outroexemplodeumabarradenavegao,aW3topnavclasse.semelhanteao
w3navbar,excetoqueelevaiadicionarumsublinhadoquandovocpassaomouse
sobreoslinks,emvezdeumacordefundo:

Incio Link1 Link2 Ligao3 Ligao4

Incio Link1 Link2 Ligao3 Ligao4

Incio Link1 Link2 Ligao3 Ligao4

Exemplo

<navclass="w3topnavw3green">
<ahref="#">Home</a>
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
<ahref="#">Link4</a>
</nav>

11/13
29/02/2016 W3.CSSNavigation

Tentevocmesmo"

Exemplo com fonte cones impressionantes

<navclass="w3topnavw3green">
<ahref="#"><iclass="fafahome"></i></a>
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
<ahref="#">Link4</a>
</nav>

Tentevocmesmo"

navegao lateral
Ow3sidenavclassecriaumabarradenavegaovertical:

Menu
Home Page content..
About

Contact

Dropdown

Support

Vparaoprximocaptuloparaaprendermaissobreanavegaolateral.

Anterior Prximocaptulo"
12/13
29/02/2016 W3.CSSNavigation

Copyright19992015byRefsnesData.AllRightsReserved.

13/13
29/02/2016 W3.CSSnavegaolateral

W3.CSS navegao lateral


Anterior Prximocaptulo"

Vertical Navigation Bar


Menu
Home Page content..
About

Contact

Dropdown

Support

Comnavegaolateral,voctemvriasopes:

Sempreexibiropaineldenavegaoesquerdadocontedodapgina.
Useumanavegaolateraldobrvel"totalmenteautomtica"responsivo.
Abraopaineldenavegao,escondendoaparteesquerdadocontedoda
pgina.
Abraopaineldenavegao,escondendotodoocontedodapgina.
Mudarocontedodapginaparaadireita,aoabriropaineldenavegao.

Exemplo: Sempre Mostrar a navegao lateral

<navclass="w3sidenavw3white"style="width:25%">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
1/26
29/02/2016 W3.CSSnavegaolateral

<ahref="#">Link4</a>
</nav>

<divstyle="marginleft:25%">
...pagecontent...
</div>

Tentevocmesmo"

Sidenav Responsive dobrvel

<navclass="w3sidenavw3collapsew3white"style="width:200px">
<ahref="#"onclick="w3_close()"class="w3closenavw3hide
large">Closex</a>
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</nav>

<divclass="w3main"style="marginleft:200px">
<spanclass="w3opennavw3hidelarge"
onclick="w3_open()">/span>
...pagecontent...
</div>

<script>
functionw3_open(){
document.getElementsByClassName("w3sidenav")[0].style.display=
"block";
}
functionw3_close(){
document.getElementsByClassName("w3sidenav")[0].style.display=
"none";
}
</script>

Tentevocmesmo"

Abra o Painel de Navegao Ocultar uma parte do


2/26
29/02/2016 W3.CSSnavegaolateral

contedo

functionw3_open(){
document.getElementsByClassName("w3sidenav")[0].style.display
="block";
}
functionw3_close(){
document.getElementsByClassName("w3sidenav")[0].style.display
="none";
}

Tentevocmesmo"

Abra o Painel de Navegao Escondendo todo o


contedo

functionw3_open(){
document.getElementsByClassName("w3sidenav")[0].style.width=
"100%";
document.getElementsByClassName("w3sidenav")[0].style.display
="block";
}
functionw3_close(){
document.getElementsByClassName("w3sidenav")[0].style.display
="none";
}

Tentevocmesmo"

Deslocar o contedo para a direita

functionw3_open(){
document.getElementById("main").style.marginLeft="25%";
document.getElementsByClassName("w3sidenav")[0].style.width=
"25%";
document.getElementsByClassName("w3sidenav")[0].style.display=
"block";
3/26
29/02/2016 W3.CSSnavegaolateral

document.getElementsByClassName("w3opennav")[0].style.display=
'none';
}

functionw3_close(){

document.getElementById("main").style.marginLeft="0%";

document.getElementsByClassName("w3sidenav")[0].style.display=
"none";

document.getElementsByClassName("w3opennav")[0].style.display=
"inlineblock";
}

Tentevocmesmo"

Styling de navegao lateral


Adicioneow3corclasseparaow3sidenavparamudarasuacordefundo.Sevoc
querumlinkativo/atual,paraqueousuriosaibaqualpginaele/elaestligada,
adicioneow3corclasseparaumdoslinks,bemcomo:

4/26
29/02/2016 W3.CSSnavegaolateral

Link1

Link2

Link3

Link4

5/26
29/02/2016 W3.CSSnavegaolateral

Link1

Link2

Link3

Link4

6/26
29/02/2016 W3.CSSnavegaolateral

Link1

Link2

Link3

Link4

7/26
29/02/2016 W3.CSSnavegaolateral

Exemplo

<navclass="w3sidenavw3lightgrey">
<aclass="w3green"href="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</nav>

Tentevocmesmo"

Bordered navegao lateral


Useow3borderclasseparaadicionarumabordaemtornodasidenav:

8/26
29/02/2016 W3.CSSnavegaolateral

Link1

Link2

Link3

9/26
29/02/2016 W3.CSSnavegaolateral

Exemplo

<navclass="w3sidenavw3border">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</nav>

Tentevocmesmo"

Adicioneow3borderbottomclasseparaoslinksparacriardivisoresdelink:

10/26
29/02/2016 W3.CSSnavegaolateral

Link1

Link2

Link3

11/26
29/02/2016 W3.CSSnavegaolateral

Exemplo

<navclass="w3sidenavw3border">
<aclass="w3borderbottom"href="#">Link1</a>
<aclass="w3borderbottom"href="#">Link2</a>
<ahref="#">Link3</a>
</nav>

Tentevocmesmo"

Useow3cardclassparaexibirosidenavcomoumcarto:

12/26
29/02/2016 W3.CSSnavegaolateral

Link1

Link2

Link3

13/26
29/02/2016 W3.CSSnavegaolateral

Exemplo

<navclass="w3sidenavw3card8">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</nav>

Tentevocmesmo"

Ligaes Hoverable
Aopassaromousesobreoslinksdentrodosidenav,acordefundomudaparacinza.

Sevocquerumacordefundodiferenteemfoco,usequalquerumdosw3pairar
corclasses:

14/26
29/02/2016 W3.CSSnavegaolateral

Link1

Link2

Link3

Link4

15/26
29/02/2016 W3.CSSnavegaolateral

Exemplo

<navclass="w3sidenav">
<aclass="w3hoverblack"href="#">Link1</a>
<aclass="w3hovergreen"href="#">Link2</a>
<aclass="w3hoverblue"href="#">Link3</a>
<aclass="w3hoverred"href="#">Link4</a>
</nav>

Tentevocmesmo"

Colaterais Tamanhos de navegao


Aumentofontsize(w3largeetc):

16/26
29/02/2016 W3.CSSnavegaolateral

Link1

Link2

Link3

17/26
29/02/2016 W3.CSSnavegaolateral

Oaumentodacobertura(w3estofamentoetc):

18/26
29/02/2016 W3.CSSnavegaolateral

Link1

Link2

Link3

19/26
29/02/2016 W3.CSSnavegaolateral

Exemplo

<navclass="w3sidenavw3large">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</nav>

Tentevocmesmo"

Navigation lado com cones

20/26
29/02/2016 W3.CSSnavegaolateral

21/26
29/02/2016 W3.CSSnavegaolateral

Exemplo

<navclass="w3sidenavw3black"style="width:70px">
<ahref="#"><iclass="fafahomew3xxlarge"></i></a>
<ahref="#"><iclass="fafasearchw3xxlarge"></i></a>
<ahref="#"><iclass="fafaenvelopew3xxlarge"></i></a>
<ahref="#"><iclass="fafaglobew3xxlarge"></i></a>
</nav>

Tentevocmesmo"

Navigation lado com Dropdown


Link1
Page content..
Link2
MovethemouseovertheDropdownlink!
Dropdown

Link3

Exemplo

<navclass="w3sidenavw3lightgrey">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<divclass="w3dropdownhover">
<ahref="#">Dropdown<iclass="fafacaretdown"></i></a>
<divclass="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>

22/26
29/02/2016 W3.CSSnavegaolateral

<ahref="#">Link3</a>
</div>
</div>

<ahref="#">Link3</a>
</nav>

Tentevocmesmo"

Nota:Quandoomenususpenso"aberto",olinksuspensarecebeumacordefundo
cinzaparaindicarqueeleestativo.Parasubstituirisso,adicioneumw3pairarcor
classetantoparao"menususpenso"<li>e<a>:

Nota:Usew3suspensocliquesevocpreferir,cliquenolinksuspensoemvezde
pairar:

Link1
Page content..
Link2
ClickontheDropdownlink!
Dropdown

Link3

Exemplo

<navclass="w3sidenavw3lightgrey">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<divclass="w3dropdownclickw3hovergreen">
<aclass="w3hovergreen"href="#">Dropdown<iclass="fafa
caretdown"></i></a>
<divclass="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>

23/26
29/02/2016 W3.CSSnavegaolateral

<ahref="#">Link3</a>
</div>
</div>

<ahref="#">Link3</a>
</nav>

Tentevocmesmo"

animated Sidenav
Usequalquerumdosw3animateaulasadesvanecerse,zoomouslidena
navegaolateral:


Page content..
Clickonthemenuicon()toslideinthesidenavigation.

Exemplo

<navclass="w3sidenavw3animateleft">

Tentevocmesmo"

contedo Sidenav
Adicioneoquequiserdentrodanavegaolateral:

24/26
29/02/2016 W3.CSSnavegaolateral

Menu
Page Content...
Addwhateveryoulikeinsidetheside
navigation.

Home

Projects 8

About

Contact

Loremipsumbox...

Exemplo

<navclass="w3sidenavw3lightgrey"style="width:50%">
<divclass="w3containerw3darkgrey">
<h4>Menu</h4>
</div>

<imgsrc="img_fjords.jpg">

<aclass="w3red"href="#">Home</a>
<ahref="#">Projects
<spanclass="w3tagw3redw3roundw3right">8</span>

25/26
29/02/2016 W3.CSSnavegaolateral

</a>

<ahref="#">About</a>

<ahref="#">Contact</a>

<divclass="w3container">

<divclass="w3borderw3roundw3paddingw3bluegrey">
<spanclass="w3closebtn">x</span>
<p>Loremipsumbox...</p>
</div>
</div>
</nav>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

26/26
29/02/2016 W3.CSSTabs

W3.CSS Tabs
Anterior Prximocaptulo"

Londres Paris Tquio

Londres
LondresacidadecapitaldaInglaterra.

acidademaispopulosadoReinoUnido,comumareametropolitanademais
de13milhesdehabitantes.

Tabs Tabulaes
Tabssoperfeitosparaaplicaesnicapginadaweb,ouparapginasWebcapaz
deexibirdiferentesassuntos.

Bastacriarmuitoselementoscomomesmonomedaclasse:

Exemplo

<divid="London"class="city">
<h2>London</h2>
<p>LondonisthecapitalcityofEngland.</p>
</div>

<divid="Paris"class="city">
<h2>Paris</h2>
<p>ParisisthecapitalofFrance.</p>
</div>

<divid="Tokyo"class="city">
<h2>Tokyo</h2>
<p>TokyoisthecapitalofJapan.</p>
1/5
29/02/2016 W3.CSSTabs

</div>

Emseguida,adicionealgunsbotesclicveis
paraabrirocontedo(botesnico,

barradenavegao,abarralateral):

Exemplo

<ulclass="w3navbar">
<li><ahref="#"onclick="openCity('London')">London</a></li>
<li><ahref="#"onclick="openCity('Paris')">Paris</a></li>
<li><ahref="#"onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>

EadicionarumJavaScriptparaselecionaroselementos:

Exemplo

openCity("London");

functionopenCity(cityName){
vari;
varx=document.getElementsByClassName("city");
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
document.getElementById(cityName).style.display="block";
}

Tentevocmesmo"

JavaScript Explicado
Emprimeirolugar,chamarOpenCity()paraabrir"London"(id="London).

Emseguida,chamarabertodacidade()comumnomedecidadediferente(id=
"Paris)quandoousurioclicaemumdosbotesdomenu.

AfunoOpenCity()ocultatodososelementos(display="none")comonome
2/5
29/02/2016 W3.CSSTabs

daclasse"dacidade",eexibeoelemento(display="block")comoIDdacidade.

/ Tab atual ativa


London Paris Tokyo

London
LondonisthecapitalcityofEngland.

Sevocquiserdestacaroactualseparador/pginaqueousurioestligado,utilize
JavaScripteadicionarumaclassecorespecficaparaolinkguiaatual.Noexemplo
abaixo,nsadicionamosumaclasse"tablink"paracadalink.Dessaforma,fcilde
obtertodososlinksqueestassociadocomabas,edarolinkabaatualumaclasse
"w3vermelho",paradestaclo:

Exemplo

functionopenCity(evt,cityName){
vari,x,tablinks;
x=document.getElementsByClassName("city");
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
tablinks=document.getElementsByClassName("tablink");
for(i=0;i<x.length;i++){
tablinks[i].classList.remove("w3red");
}
document.getElementById(cityName).style.display="block";
evt.currentTarget.classList.add("w3red");
}

Tentevocmesmo"

Tabs verticais
3/5
29/02/2016 W3.CSSTabs

Menu
London
London
LondonisthecapitalcityofEngland.
Paris

Tokyo ItisthemostpopulouscityintheUnitedKingdom,witha
metropolitanareaofover13millioninhabitants.

Exemplo

<navclass="w3sidenavw3lightgrey"style="width:130px">
<ahref="#"class="tablink"onclick="openCity(event,
'London')">London</a>
<ahref="#"class="tablink"onclick="openCity(event,
'Paris')">Paris</a>
<ahref="#"class="tablink"onclick="openCity(event,
'Tokyo')">Tokyo</a>
</nav>

Tentevocmesmo"

Tab Animated contedo


Usequalquerumdosw3animateaulasadesvanecerse,zoomouslidenocontedo
guia:

4/5
29/02/2016 W3.CSSTabs

Fade Fade in
Left
LondonisthecapitalcityofEngland.
Right
ItisthemostpopulouscityintheUnitedKingdom,witha
Top
metropolitanareaofover13millioninhabitants.
Bottom
Zoom

Exemplo

<divid="London"class="w3containercityw3animateleft">
<p>LondonisthecapitalcityofEngland.</p>
</div>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

5/5
29/02/2016 W3.CSSPaginao

W3.CSS Paginao
Anterior Prximocaptulo"

W3.CSS paginaes
Sevoctemumsitecommuitaspginas,vocpodequereradicionaralgumtipode
paginaoparacadapgina:

1 2 3 4 5 6 7 8

Paginao Bsico
1 2 3 4 5

Paracriarumapaginaobsica,adicioneow3paginationclasseaumelemento
<ul>:

Exemplo

<ulclass="w3pagination">
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
</ul>

Tentevocmesmo"

1/6
29/02/2016 W3.CSSPaginao

setas de paginao
UseentidadesHTMLouconesdeumabibliotecadeconeparaadicionarsetasde
paginao:

1 2 3 4 5

Exemplo

<ulclass="w3pagination">
<li><ahref="#">&laquo;</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
<li><ahref="#">&raquo;</a></li>
</ul>

Tentevocmesmo"

Ativo / Fazer a ligao atual


1 2 3 4 5

Useumdosw3corclassesparaindicarqualapginaqueousurioestem:

Exemplo

<ulclass="w3pagination">
<li><ahref="#">&laquo;</a></li>
<li><aclass="w3green"href="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>

2/6
29/02/2016 W3.CSSPaginao

<li><ahref="#">&raquo;</a></li>
</ul>

Tentevocmesmo"

Hover Cor
1 2 3 4

Porpadro,quandovocmoveromousesobreoslinksdepaginao,querecebem
umacordefundocinza.Usequalquerumdosw3hovercoraulasparamudaracor
defoco:

Exemplo

<ulclass="w3pagination">
<li><ahref="#"class="w3hoverpurple">&laquo;</a></li>
<li><ahref="#"class="w3hovergreen">1</a></li>
<li><ahref="#"class="w3hoverred">2</a></li>
<li><ahref="#"class="w3hoverblue">3</a></li>
<li><ahref="#"class="w3hoverblack">4</a></li>
<li><ahref="#"class="w3hoverorange">&raquo;</a></li>
</ul>

Tentevocmesmo"

paginao Dimensionamento
1 2 3 4 5 1 2 3 4 5

Usew3tiny,w3pequena,w3large,w3xlarge,w3XXLargeouw3
XXXLargeaotamanhodapaginao:

3/6
29/02/2016 W3.CSSPaginao

Exemplo

<ulclass="w3paginationw3xlarge">

Tentevocmesmo"

Bordered Paginao
1 2 3 4 5

Adicioneow3borderclasseparacriarumapaginaocombordas:

Exemplo

<ulclass="w3paginationw3border">

Tentevocmesmo"

arredondada Fronteiras
1 2 3 4 5

Adicioneow3roundclasse,prximaw3fronteiraparaasfronteirasarredondados:

Exemplo

<ulclass="w3paginationw3borderw3round">

Tentevocmesmo"

4/6
29/02/2016 W3.CSSPaginao

Paginao centrado
1 2 3 4 5

Paracentralizarapaginao,enroleumelemento<div>comclass="w3center"
emtornode<ul>:

Exemplo

<divclass="w3center">
<ulclass="w3paginationw3xlarge">
...
</ul>
</div>

Tentevocmesmo"

Outros exemplos de paginao

Anterior Prximo

Exemplo seguinte / anterior

<ulclass="w3paginationw3borderw3round">
<li><ahref="#">&#10094;Previous</a></li>
<li><ahref="#">Next&#10095;</a></li>
</ul>

Tentevocmesmo"

Casa link1 link2 Aligao3

5/6
29/02/2016 W3.CSSPaginao

Exemplo de menu

<ulclass="w3paginationw3border">
<li><ahref="#"class="w3lightgrey">Home</a></li>
<li><ahref="#">Link1</a></li>
<li><ahref="#">Link2</a></li>
<li><ahref="#">Link3</a></li>
</ul>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

6/6
29/02/2016 BaresW3.CSSProgresso

W3.CSS barras de progresso


Anterior Prximocaptulo"

As barras de progresso
Umabarradeprogressopodeserusadaparamostrarquantotempoumusurioest
emumprocesso:

20%

Cliqueemmim

Bar Progresso Bsico

Ow3progresscontainerclassedefineumrecipienteparaabarradeprogresso,eo
w3progressbardefineabarradeprogressoreal(rea"cheio").Definiralargurada
barradeprogressocomapropriedadedelarguraCSS:

Exemplo

<divclass="w3progresscontainer">
<divclass="w3progressbar"style="width:10%"></div>
</div>

Tentevocmesmo"

Tamanhos barra de progresso


Definiralargura/tamanhodabarradeprogressocomumvalorpercentualde0a

1/5
29/02/2016 BaresW3.CSSProgresso

100%:

Exemplo

<divclass="w3progresscontainer">
<divclass="w3progressbar"style="width:50%"></div>
</div>

Tentevocmesmo"

Progress Bar Colors


Porpadro,acordaw3progresscontainercinzaclaroeow3progressbarcinza:

MudarsuacorcomqualquerumadasclassesdecorW3.CSS:

Exemplo

<divclass="w3progresscontainerw3lightblue">
<divclass="w3progressbarw3blue"style="width:75%"></div>
</div>

Tentevocmesmo"

2/5
29/02/2016 BaresW3.CSSProgresso

Etiquetas Progress Bar


Adicionarumnovoelementodentrodo"w3progressbar"paraadicionarumrtulo
paraabarradeprogresso.

Dica:Useaclassew3centerparamantersempreortulocentrado.Seforomitido,
eleseralinhadoesquerda.

25%

50%

75%

Exemplo

<divclass="w3progresscontainer">
<divid="myBar"class="w3progressbarw3green"
style="width:25%">
<divclass="w3centerw3textwhite">25%</div>
</div>
</div>

Tentevocmesmo"

Barra de progresso dinmica


UseJavaScriptparacriarumabarradeprogressodinmico:

Cliqueemmim

Exemplo

<divclass="w3progresscontainer">
<divid="myBar"class="w3progressbarw3green"
style="width:1%"></div>

3/5
29/02/2016 BaresW3.CSSProgresso

</div>

<buttonclass="w3btn"onclick="move()">ClickMe</button>

<script>

functionmove(){

varelem=document.getElementById("myBar");
varwidth=1;

varid=setInterval(frame,10);
functionframe(){

if(width>=100){

clearInterval(id);
}else{

width++;

elem.style.width=width+'%';
}
}
}

</script>

Tentevocmesmo"

Barra de progresso dinmico com Labels


etiquetacentrado:

Exemplo

20%

ClickMe

Tentevocmesmo"

Alinhadoesquerdanortulo:

4/5
29/02/2016 BaresW3.CSSProgresso

Exemplo

20%

ClickMe

Tentevocmesmo"

Rotularforadabarradeprogresso:

Exemplo

20%

ClickMe

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

5/5
29/02/2016 W3.CSSTipografia

W3.CSS Tipografia
Anterior Prximocaptulo"

Fcil de ler
pginasW3.CSSsofceisdeler,mesmoparaaspessoascomligeirasdificuldades
deleitura.

Todasasfontesutilizadassofceisfonteslegveis15pxsansserif
Afontepadro(Verdana)temumespaamentomuitoboacarta
Olineespaamentopadro(1.5)tambmmuitobom

HTML Ttulos <h1> <h6>


Porpadrocabealhosestilosw3.cssHTMLdestamaneira:

Exemplo

<h1>Heading 1 36px</h1>
<h2>Heading 2 30px</h2>
<h3>Heading 3 24px</h3>
<h4>Heading 4 20px</h4>
<h5>Heading 5 18px</h5>
<h6>Heading 6 16px</h6>

Tentevocmesmo"

1/3
29/02/2016 W3.CSSTipografia

Classes fontsize
Osttulosdevemserusados
paraoqueso:ttulos.

ComW3.CSS,tamanhosdefontepodeserdefinidoporclasses:

Exemplo
w3tiny
w3small
w3medium(Default)
w3large
w3xlarge
w3xxlarge
w3xxxlarge
w3jumbo
Tentevocmesmo"

Substituindo as Normas
SubstituindoospadresW3.CSSmuitofcil.

Voctempelomenostrsopessimples:

1.Substituiropadronaseo<head>desuapgina
2.AdicioneseuprprioarquivoCSSapsW3.CSS
3.FaaodownloadealterarocontedodoarquivoW3.CSS

Substituir no <head>

h1{fontsize:64px;}

2/3
29/02/2016 W3.CSSTipografia

h2{fontsize:48px;}
h3{fontsize:36px;}
h4{fontsize:24px;}
h5{fontsize:20px;}
h6{fontsize:18px;}

Tentevocmesmo"

Adicione seu prprio CSS

<linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<linkrel="stylesheet"href="myStyle.css">

mudana W3.CSS

h1{fontsize:36px}h2{fontsize:30px}h3{fontsize:24px}h4{font
size:20px}h5{fontsize:18px}h6{fontsize:16px}

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

3/3
29/02/2016 W3.CSSfontes

W3.CSS fontes
Anterior Prximocaptulo"

W3.CSS fontes
ComW3.CSSextremamentefcildeadicionarfontesaumapginadaweb.

Muitofcildeusar(apenasCSSeHTML)
usoilimitadodebibliotecasdefontesexternas(comooGoogleFonts)
Funcionaemtodososnavegadoresmodernos

Tornaraweblindo!
Exemplo

<html>
<linkrel="stylesheet"href="https://fonts.googleapis.com/css?
family=Tangerine">
<style>
.w3tangerine{
fontfamily:'Tangerine',serif;
}
</style>

<body>
<pclass="w3tangerine">MakingtheWebBeautiful!</p>
</body>

</html>

Tentevocmesmo"

1/2
29/02/2016 W3.CSSfontes

mais Exemplos

Tornar a web!
Exemplo

<linkrel="stylesheet"href="https://fonts.googleapis.com/css?
family=Lobster">

Tentevocmesmo"

Efeitos de fonte

Tornar a web!
Exemplo

<linkrel="stylesheet"href="https://fonts.googleapis.com/css?
family=Roboto&effect=bricksign">

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

2/2
29/02/2016 conesW3.CSS

W3.CSS Icons
Anterior(w3css_fonts.asp) Prximocaptulo"(w3css_slideshow

Bibliotecas cone
ComW3.CSSvocpodeusarqualquerbibliotecadeconecomo:

conesimpressionantesFont
conesdoGoogleMateriais
conesBootstrap

usando cones
Parausarumcone,bastaadicionaronomedoconeparaaclassedeumHTML<i>
elemento.

Paracontrolarotamanhodocone,altereapropriedadefontsizedoconeouuseas
classes:

w3tiny
w3small
w3large
w3XXLarge
w3XXXLarge

cones impressionantes Font


fafahome


fafabares


1/6
29/02/2016 conesW3.CSS

fafasetaparaaesquerda


fafasetaparaadireita


fafasearch


fafaclose

fafarefresh


fafatrash


fafamacho


fafacar


fafacaminho


fafaplane

Exemplo

<!DOCTYPEhtml>
<html>
<title>W3.CSS</title>
<metaname="viewport"content="width=devicewidth,initial
scale=1">
<linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<linkrel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font
awesome/4.4.0/css/fontawesome.min.css">
2/6
29/02/2016 conesW3.CSS

<body>

<iclass="fafacloud"></i>

<iclass="fafacloudw3large"></i>
<iclass="fafacloudw3xlarge"></i>
<iclass="fafacloudw3xxlarge"></i>
<iclass="fafacloudw3xxxlarge"></i>

<iclass="fafacloudw3textteal"style="fontsize:64px"></i>

</body>
</html>

Tentevocmesmo"(tryit.asp?filename=tryw3css_icons_awesome)

Paraumalistacompletadoscones:Visiteanossarefernciacone
(/icons/default.asp)

Google material de concepo Icons

casa
casa

Menu
Menu


arrow_back


arrow_forward

Pesquisa
pesquisa

perto
perto

3/6
29/02/2016 conesW3.CSS

refresh

apagar
apagar

pessoa
pessoa


directions_car


local_shipping


local_airport

Exemplo

<!DOCTYPEhtml>
<html>
<title>W3.CSS</title>
<metaname="viewport"content="width=devicewidth,initial
scale=1">
<linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<linkrel="stylesheet"href="https://fonts.googleapis.com/icon?
family=Material+Icons">
<body>

<iclass="materialicons">cloud</i>
<iclass="materialiconsw3large">cloud</i>
<iclass="materialiconsw3xlarge">cloud</i>
<iclass="materialiconsw3xxlarge">cloud</i>
<iclass="materialiconsw3xxxlarge">cloud</i>
<iclass="materialiconsw3textteal"style="font
size:64px">cloud</i>

</body>
</html>

4/6
29/02/2016 conesW3.CSS

Tentevocmesmo"(tryit.asp?filename=tryw3css_icons_google)

cones Bootstrap


casa


Menuhamburger


arrow_back


arrow_forward


pesquisa


remover

refrescar


lixo


doutilizador


Arquivo

5/6
29/02/2016 conesW3.CSS


impresso


avio

Exemplo

<!DOCTYPEhtml>
<html>
<title>W3.CSS</title>
<metaname="viewport"content="width=devicewidth,initial
scale=1">
<linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<linkrel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap
.min.css">
<body>

<iclass="glyphiconglyphiconcloud"></i>
<iclass="glyphiconglyphiconcloudw3large"></i>
<iclass="glyphiconglyphiconcloudw3xlarge"></i>
<iclass="glyphiconglyphiconcloudw3xxlarge"></i>
<iclass="glyphiconglyphiconcloudw3xxxlarge"></i>
<iclass="glyphiconglyphiconcloudw3textteal"style="font
size:64px"></i>

</body>
</html>

Tentevocmesmo"(tryit.asp?filename=tryw3css_icons_bootstrap)

Anterior(w3css_fonts.asp) Prximocaptulo"(w3css_slideshow
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRights
Reserved.

6/6
29/02/2016 EfeitosW3.CSS

W3.CSS efeitos do texto


Anterior Prximocaptulo"

texto da sombra
Aclassew3textshadowprojetadoparatrabalharcomtodasascores:

texto da sombra

texto da sombra

texto da sombra

texto da sombra

Exemplo

<divclass="w3containerw3deeppurple">
<h2class="w3textshadow">TextShadow</h2>
</div>

Tentevocmesmo"

Opacidade do texto
1/3
29/02/2016 EfeitosW3.CSS

Aclassew3opacidadeprojetadoparatrabalharcomtodasascores:

Opacidade do texto

Opacidade do texto

Opacidade do texto

Opacidade do texto

Opacidade do texto

Opacidade do texto

Exemplo

<divclass="w3containerw3deeppurple">
<h2class="w3opacity">TextOpacity</h2>
</div>

Tentevocmesmo"

Efeitos especiais
Combinandoopacidadeenegrito:

2/3
29/02/2016 EfeitosW3.CSS

Opacidade do texto
MisturandoColors:

Amarelo + sombra +
Negrito
Combinandosombra,negritoeopacidade:

Sombra + Opacidade +
Negrito
MisturandoColors:

Amarelo + sombra +
Negrito
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

3/3
29/02/2016 W3.CSSSlideshow

W3.CSS Slideshow
Anterior Prximocaptulo"

Slideshow manual
ExibindoumaapresentaodeslidesmanualcomW3.CSSmuitofcil.

Bastacriarmuitoselementoscomomesmonomedaclasse:

Exemplo

<imgclass="mySlides"src="img_fjords.jpg">
<imgclass="mySlides"src="img_lights.jpg">
<imgclass="mySlides"src="img_mountains.jpg">
<imgclass="mySlides"src="img_forest.jpg">
1/5
29/02/2016 W3.CSSSlideshow

Edoisbotespararolarasimagens:

Exemplo

<aclass="w3btnfloating"onclick="plusDivs(1)">&#10094;</a>
<aclass="w3btnfloating"onclick="plusDivs(+1)">&#10095;</a>

EadicionarumJavaScriptparaselecionarasimagens:

Exemplo

varslideIndex=1;
showDivs(slideIndex);

functionplusDivs(n){
showDivs(slideIndex+=n);
}

functionshowDivs(n){
vari;
varx=document.getElementsByClassName("mySlides");
if(n>x.length){slideIndex=1}
if(n<1){slideIndex=x.length};
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
x[slideIndex1].style.display="block";
}

Tentevocmesmo"

JavaScript Explicado
Primeiro,definaoslideIndexa1.(primeiraimagem)

Emseguida,chamarShowDivs()paravisualizaraprimeiraimagem.

2/5
29/02/2016 W3.CSSSlideshow

QuandoousurioclicaemumdosboteschamarplusDivs().

AfunoplusDivs()subtraiumouadicionaumparaoslideIndex.

OsshowDiv()courosdefuno(display="none")todososelementoscomo
nomedaclasse"mySlides",eexibe(display="bloco"),oelementocomodado
slideIndex.

SeoslideIndexmaiordoqueonmerodeelementos(x.length),oslideIndex
definidocomozero.

SeoslideIndexinferiora1,definidocomoonmerodeelementos(x.length).

Slideshow automtico
Paraexibirumaapresentaodeslidesautomticaaindamaissimples.

VocsprecisadeumpoucodeJavaScriptdiferente:

Exemplo

varslideIndex=0;
carousel();

functioncarousel(){
vari;
varx=document.getElementsByClassName("mySlides");
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
slideIndex++;
if(slideIndex>x.length){slideIndex=1}
x[slideIndex1].style.display="block";
setTimeout(carousel,2000);
}

Tentevocmesmo"

Slides HTML
3/5
29/02/2016 W3.CSSSlideshow

Osslidesnotemqueserimagens.

ElespodemserqualquercontedoHTML:

Exemplo

<divclass="mySlides">
<divclass="w3containerw3orange">
<h1><b>DidYouKnow?</b></h1>
<h1><i>Weplantoselltripstothemooninthe2020s</i></h1>
</div>

Tentevocmesmo"

slides animados

Exemplo

<imgclass="mySlidesw3animatetop"src="img_01.jpg">
<imgclass="mySlidesw3animatebottom"src="img_02.jpg">
<imgclass="mySlidesw3animatetop"src="img_03.jpg">
<imgclass="mySlidesw3animatebottom"src="img_04.jpg">

Tentevocmesmo"

Animao Faded

Exemplo

<imgclass="mySlidesw3animatefading"src="img_01.jpg">
<imgclass="mySlidesw3animatefading"src="img_02.jpg">
<imgclass="mySlidesw3animatefading"src="img_03.jpg">
<imgclass="mySlidesw3animatefading"src="img_04.jpg">

4/5
29/02/2016 W3.CSSSlideshow

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

5/5
29/02/2016 EfeitosW3.CSS

W3.CSS efeitos do texto


Anterior Prximocaptulo"

texto da sombra
Aclassew3textshadowprojetadoparatrabalharcomtodasascores:

texto da sombra

texto da sombra

texto da sombra

texto da sombra

Exemplo

<divclass="w3containerw3deeppurple">
<h2class="w3textshadow">TextShadow</h2>
</div>

Tentevocmesmo"

Opacidade do texto
1/3
29/02/2016 EfeitosW3.CSS

Aclassew3opacidadeprojetadoparatrabalharcomtodasascores:

Opacidade do texto

Opacidade do texto

Opacidade do texto

Opacidade do texto

Opacidade do texto

Opacidade do texto

Exemplo

<divclass="w3containerw3deeppurple">
<h2class="w3opacity">TextOpacity</h2>
</div>

Tentevocmesmo"

Efeitos especiais
Combinandoopacidadeenegrito:

2/3
29/02/2016 EfeitosW3.CSS

Opacidade do texto
MisturandoColors:

Amarelo + sombra +
Negrito
Combinandosombra,negritoeopacidade:

Sombra + Opacidade +
Negrito
MisturandoColors:

Amarelo + sombra +
Negrito
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

3/3
29/02/2016 W3.CSSModal

W3.CSS Modal
Anterior Prximocaptulo"

W3.CSS Modal
Amodalumajaneladecaixadedilogo/popupqueexibidanotopodapgina
atual:

AbrirModal

Como criar um Modal

Exemplo

<!Trigger/OpentheModal>
<button
onclick="document.getElementById('id01').style.display='block'"
class="w3btn">OpenModal</button>

<!TheModal>
<divid="id01"class="w3modal">
<divclass="w3modalcontent">
<divclass="w3container">
<span
onclick="document.getElementById('id01').style.display='none'"
class="w3closebtn">&times;</span>
<p>SometextintheModal..</p>
<p>SometextintheModal..</p>
</div>
</div>
</div>

1/7
29/02/2016 W3.CSSModal

Tentevocmesmo"

The Class "w3modal"


AmodalqualquerrecipienteHTML(comoum<div>)comclass="w3modal".

The Class "modalcontent w3"


TodoocontedomodaldevesercolocadoemumrecipienteHTMLcomclass="
contentw3modal".

contedoModalpodeserqualquerelementoHTML(cabealhos,pargrafos,imagens,
etc.)

Abra um Modal
UsequalquerelementoHTMLparaabriromodal.Issomuitasvezesumbotoou
link.

Adicioneoonclickatributoeaponteparaoiddomodal(ID01nonossoexemplo),
usandoomtododocument.getElementById()eespecificarumaidentificaonica
quecorrespondeaobotode"gatilho"(ID01).

Fechando um Modal
Parafecharummodal,adicioneow3closebtnclasseaumelementojuntamente
comumatributoonclickqueapontaparaoiddomodal(ID01).

&vezes(X)umaentidadeHTMLqueoconedeprefernciapara
botesdefecho,emvezdealetra"X".

Modal Cabealho e Rodap


Dentrodo<div>comclass="modalcontentw3",ousow3contentoresclasses
paracriarseesdiferentesnomodal:

2/7
29/02/2016 W3.CSSModal

AbrirModalcomContainers

Exemplo

<divid="id01"class="w3modal">
<divclass="w3modalcontent">
<headerclass="w3containerw3teal">
<span
onclick="document.getElementById('id01').style.display='none'"
class="w3closebtn">&times;</span>
<h2>ModalHeader</h2>
</header>
<divclass="w3container">
<p>Sometext..</p>
<p>Sometext..</p>
</div>
<footerclass="w3containerw3teal">
<p>ModalFooter</p>
</footer>
</div>
</div>

Tentevocmesmo"

Modal como um carto


Paraexibiromodalcomoumcarto,adicioneow3carto*classeparaow3
modalcontedodorecipiente:

AbrirModalcomoumcarto

Exemplo

<divclass="w3modalcontentw3card8">

Tentevocmesmo"

3/7
29/02/2016 W3.CSSModal

Modais animados
Usequalquerumdosw3animadozoom|top|bottom|direito|leftclasses
paradeslizarnamodalapartirdeumadireoespecfica:

MaisZoom Topo Inferior Esquerda Certo

Exemplo

<divclass="w3modalcontentw3animatezoom">
<divclass="w3modalcontentw3animatetop">
<divclass="w3modalcontentw3animatebottom">
<divclass="w3modalcontentw3animateleft">
<divclass="w3modalcontentw3animateright">

Tentevocmesmo"

modal imagem
Cliquenaimagemparaexibilaemtamanhoreal:

Exemplo

<imgsrc="img_car.png"
onclick="document.getElementById('modal01').style.display='block'"
>

<divid="modal01"class="w3modal"
onclick="this.style.display='none'">

4/7
29/02/2016 W3.CSSModal

<imgclass="w3modalcontent"src="img_car.png">
</div>

Tentevocmesmo"

Modal Galeria de Imagens


Cliquenaimagemparaexibilaemtamanhoreal:

5/7
29/02/2016 W3.CSSModal

Exemplo
6/7
29/02/2016 W3.CSSModal

<divclass="w3rowpadding">
<divclass="w3containerw3third">
<imgsrc="img_manarola.png"style="width:100%"
onclick="onClick(this)">
</div>
<divclass="w3containerw3third">
<imgsrc="img_monterosso.png"style="width:100%"
onclick="onClick(this)">
</div>
<divclass="w3containerw3third">
<imgsrc="img_vernazza.png"style="width:100%"
onclick="onClick(this);">
</div>
</div>

<divid="m01"class="w3modal"
onclick="this.style.display='none'">
<imgclass="w3modalcontent"id="img01"style="width:100%">
</div>

<script>
functiononClick(element){
document.getElementById("img01").src=element.src;
document.getElementById("m01").style.display="block";
}
</script>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

7/7
29/02/2016 W3.CSSTooltips

W3.CSS Tooltips
Anterior Prximocaptulo"

Asdicasdeferramentasexibirotexto(ououtrocontedo)quandovocpassao
mousesobreumelementoHTML.

Inline Tooltip Texto


Passeomousesobreasentenaabaixo!

LondresacidadecapitaldaInglaterra.

Ow3dicaclassedefineoelementoHTMLapairarsobre(containersugesto).

Ow3textclassedefineotextodica:

Exemplo

<pclass="w3tooltip">London
<spanclass="w3text">9million</span>
isthecapitalcityofEngland</p>

Tentevocmesmo"

Tag Tooltip inline


Passeomousesobreasentenaabaixo!

LondresacidadecapitaldaInglaterra.

Ow3dicaclassedefineoelementoHTMLapairarsobre(containersugesto).

Ow3textclassedefineotextodica:

1/5
29/02/2016 W3.CSSTooltips

Exemplo

<pclass="w3tooltip">London
<spanclass="w3textw3tag">9million</span>
isthecapitalcityofEngland</p>

Tentevocmesmo"

Grande Tooltip
Passeomousesobreestaimagemparaveroefeito:

Ow3dicaclassedefineoelementoHTMLapairarsobre(containersugesto).

Ow3textclassedefineotextodica:

Exemplo texto antes de a foto

<divclass="w3tooltip">

<pclass="w3text">Acarisawheeled,selfpoweredmotorvehicle
usedfortransportation.Mostdefinitionsofthetermspecifythat
carstypicallyhavefourwheels.(Wikipedia)</p>

<imgsrc="img_car.png"alt="Car"style="width:100%">

</div>

2/5
29/02/2016 W3.CSSTooltips

Tentevocmesmo"

Exemplo texto aps a imagem

<divclass="w3tooltip">

<imgsrc="img_car.png"alt="Car"style="width:100%">

<pclass="w3text">Acarisawheeled,selfpoweredmotorvehicle
usedfortransportation.Mostdefinitionsofthetermspecifythat
carstypicallyhavefourwheels.(Wikipedia)</p>

</div>

Tentevocmesmo"

Dica absoluta
Sevocquiseradicadeferramentaparaapareceremumaposioabsoluta,
posicionarotextodicadeferramenta(w3texto):

Exemplo

<pclass="w3tooltip">LondonisthecapitalcityofEngland.
<spanstyle="position:absolute;left:0;bottom:18px"
class="w3textw3tag">9million</span></p>

Tentevocmesmo"

Colorido Tooltip
Sevocquerumadicadeferramentadecor,useasclassesw3color:

3/5
29/02/2016 W3.CSSTooltips

Exemplo

<spanclass="w3textw3tagw3red">9million</span>

Tentevocmesmo"

Dica arredondada
Sevocquerumadicadeferramentaarredondada,useasclassesw3redondas:

Exemplo

<spanclass="w3textw3tagw3round">9million</span>

Tentevocmesmo"

Dica pequena
Sevocquiserumapequenadicadeferramenta,useaclassew3pequenas:

Exemplo

<spanclass="w3textw3tagw3small">9million</span>

Tentevocmesmo"

Dica minsculo
Sevocquiserumapequenadicadeferramenta,useaclassew3tiny:

4/5
29/02/2016 W3.CSSTooltips

Exemplo

<spanclass="w3textw3tagw3tiny">9million</span>

Tentevocmesmo"

Grande Tooltip
Sevocquiserumagrandedicadeferramenta,useasclassesw3grande:

Exemplo

<spanclass="w3textw3tagw3xlarge">9million</span>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

5/5
29/02/2016 W3.CSSGradeFluid

W3.CSS Grade Fluid Responsive


Anterior Prximocaptulo"

Grade Responsive
W3.CSSsuportaumagrelhadefluido12responsivocoluna.

Redimensionarapginaparaveroefeito!

1
2
3
4
5
6
7
8
9
10
11
12

Estapartevaiocupar12colunasemumatelapequena,4emumatelademdio
e3emumatelagrande.

Estapartevaiocupar12colunasemumatelapequena,8emumatelademdio
e9emumatelagrande.

1/5
29/02/2016 W3.CSSGradeFluid

1
2
3
4
5
6
7
8
9
10
11
12

Exemplo

<divclass="w3row">
<divclass="w3colm4l3">
<p>
Iwilloccupy12columnsonasmallscreen,4onamedium
screen,and3onalargescreen.
</p>
</div>
<divclass="w3colm8l9">
<p>
Iwilloccupy12columnsonasmallscreen,8onamedium
screen,and9onalargescreen.
</p>
</div>
</div>

Tentevocmesmo"

linhas Responsive
Colunasdevemresidirdentrodeumalinhaasertotalmentesensvel.

2/5
29/02/2016 W3.CSSGradeFluid

Classe Descrio
w3row Defineumrecipientepaddingmenosparacolunas
responsivos.
w3col Defineumacolunacomsubclasses

w3coltemasseguintesclassessub:

Colunas para telas pequenas telefones inteligentes tpicos:


Classe Descrio
s1 Define1de12colunas(largura:08,33%)paratelas
pequenas
s2 Define2de12colunas(largura:16,66%)paratelas
pequenas
s3 Define3de12colunas(largura:25,00%)paratelas
pequenas
s4 Define4de12colunas(largura:33,33%)paratelas
pequenas
S5S11
s12 Define12de12colunas(largura:100%).Padroparatelas
pequenas

Colunas de telas mdias comprimidos tpicos:


Classe Descrio

m1 Define1de12colunas(largura:08,33%)paratelasmdias
m2 Define2de12colunas(largura:16,66%)paratelasmdias
m3 Define3de12colunas(largura:25,00%)paratelasmdias
m4 Define4de12colunas(largura:33,33%)paratelasmdias
m5m11
m12 Define12de12colunas(largura:100%).Padroparatelas
mdias

Colunas para telas grandes laptops tpicos:


Classe Descrio
L1 Define1de12colunas(largura:08,33%)paraasgrandes
telas

3/5
29/02/2016 W3.CSSGradeFluid

l2 Define2de12colunas(largura:16,66%)paraasgrandes
telas
l3 Define3de12colunas(largura:25,00%)paraasgrandes
telas
l4 Define4de12colunas(largura:33,33%)paraasgrandes
telas
l5l11
l12 Define12de12colunas(largura:100%).Padroparatelas
grandes)

Exemplo

<divclass="w3row">
<divclass="w3colm4"><p>m4</p></div>
<divclass="w3colm4"><p>m4</p></div>
<divclass="w3colm4"><p>m4</p></div>
</div>

<divclass="w3row">
<divclass="w3colm3"><p>m3</p></div>
<divclass="w3colm3"><p>m3</p></div>
<divclass="w3colm3"><p>m3</p></div>
<divclass="w3colm3"><p>m3</p></div>
</div>

Tentevocmesmo"

recipientes exemplo, utilizando

<divclass="w3container">

<divclass="w3row">
<divclass="w3colw3containerm4"><p>m4</p></div>
<divclass="w3colw3containerm4"><p>m4</p></div>
<divclass="w3colw3containerm4"><p>m4</p></div>
</div>

<divclass="w3row">

4/5
29/02/2016 W3.CSSGradeFluid

<divclass="w3colw3containerm3"><p>m3</p></div>
<divclass="w3colw3containerm3"><p>m3</p></div>
<divclass="w3colw3containerm3"><p>m3</p></div>
<divclass="w3colw3containerm3"><p>m3</p></div>
</div>

</div>

Tentevocmesmo"

Exemplo usando cento

<divclass="w3row">
<divclass="w3col"style="width:20%"><p>20%</p></div>
<divclass="w3col"style="width:60%"><p>60%</p></div>
<divclass="w3col"style="width:20%"><p>20%</p></div>
</div>

Tentevocmesmo"

Exemplo usando o resto

<divclass="w3row">
<divclass="w3col"style="width:75px"><p>75px</p></div>
<divclass="w3rest"><p>rest</p></div>
</div>

Tentevocmesmo"

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

5/5
29/02/2016 TemasW3.CSSCor

W3.CSS Temas de cor


Anterior Prximocaptulo"

Temas de cor
ComW3.CSS,fcildepersonalizarsuasaplicaescomtemasdecores.

Exemplo

<!DOCTYPEhtml>
<html>
<metaname="viewport"content="width=devicewidth,initial
scale=1">
<linkrel="stylesheet"href="w3.css">
<linkrel="stylesheet"href="w3themeindigo.css">

Tentevocmesmo"

temas predefinidos
EmaplicaesHTML,vocpodelimitarousodecores,escolhendodiferentesmatizes
decoresprdefinidas:

W3vermelho Tente

w3rosa Tente

w3roxo Tente

w3deeppurple Tente

w3indigo Tente

1/6
29/02/2016 TemasW3.CSSCor

w3blue Tente

w3azulclaro Tente

w3ciano Tente

w3teal Tente

w3verde Tente

w3luzverde Tente

w3lime Tente

w3khaki Tente

w3amarelo Tente

w3mbar Tente

W3laranja Tente

w3deeplaranja Tente

w3azulcinzento Tente

w3brown Tente

w3cinza Tente

w3cinzaescuro Tente

w3preta Tente

w3w3schools Tente

W3Schools

Filmes 2014

Congeladas
Arespostaparaasanimaeseraridculo

2/6
29/02/2016 TemasW3.CSSCor

A culpa em nossas estrelas


Tocar,emocionanteerealmentebemfeito

Os Vingadores
UmenormesucessoparaaMarveleDisney

Tentevocmesmo"

W3Schools

Filmes 2014

Congeladas
Arespostaparaasanimaeseraridculo

A culpa em nossas estrelas


Tocar,emocionanteerealmentebemfeito

Os Vingadores
UmenormesucessoparaaMarveleDisney

Tentevocmesmo"

Temas particulares
3/6
29/02/2016 TemasW3.CSSCor

ComW3.CSS,fcildepersonalizarumaplicativoscomumtemadecoresprivado.

Vocpodeconectarseaumtemaparticularemumatag<link>,ouvocpode
colocarotemaprivadaemumatag<style>:

Exemplo

<style>
.w3theme{
color:#fff!important;backgroundcolor:#3f51b5!important}
.w3themelight{
color:#000!important;backgroundcolor:#e8eaf6!important}
.w3themedark{
color:#fff!important;backgroundcolor:#1a237e!important}
.w3themel5{
color:#000!important;backgroundcolor:#e8eaf6!important}
.w3themel4{
color:#000!important;backgroundcolor:#c5cae9!important}
.w3themel3{
color:#000!important;backgroundcolor:#9fa8da!important}
.w3themel2{
color:#fff!important;backgroundcolor:#7986cb!important}
.w3themel1{
color:#fff!important;backgroundcolor:#5c6bc0!important}
.w3themed1{
color:#fff!important;backgroundcolor:#3949ab!important}
.w3themed2{
color:#fff!important;backgroundcolor:#303f9f!important}
.w3themed3{
color:#fff!important;backgroundcolor:#283593!important}
.w3themed4{
color:#fff!important;backgroundcolor:#1a237e!important}
.w3themeaction{
color:#fff!important;backgroundcolor:#311b92!important}
.w3texttheme{
color:#1a237e!important}
</style>

Tentevocmesmo"

4/6
29/02/2016 TemasW3.CSSCor

adicionando gradientes
Umleitorenviounosestasugesto:Vocpodequererconsideraraadiodeum
gradienteparacadatema.

EuuseiascoresL2eL1dotemaazulparacriarestagradiente:

Exemplo

.w3themegradient{
color:#000!important;
background:webkitlineargradient(top,#64B5F625%,#42A5F575%)}
.w3themegradient{
color:#000!important;
background:mozlineargradient(top,#64B5F625%,#42A5F575%)}
.w3themegradient{
color:#000!important;
background:olineargradient(top,#64B5F625%,#42A5F575%)}
.w3themegradient{
color:#000!important;
background:mslineargradient(top,#64B5F625%,#42A5F575%)}
.w3themegradient{
color:#000!important;
background:lineargradient(top,#64B5F625%,#42A5F575%)}

Tentevocmesmo"

Temas de cor
Aquiestoalgunstemasdecoresparadownloadinspiradopelodesigndemateriais
doGoogle:

Folhadeestilos Descrio

w3theme Temadecoresmbar
amber.css
w3themeblack.css Temadecorespreto
w3themeblue.css Temadecoresazul

5/6
29/02/2016 TemasW3.CSSCor

w3themeblue Temadecorescinzaazul
grey.css
w3theme CorTemaBrown
brown.css
w3themecyan.css CorTemaCyan
w3themedark TemadecoresCinzaescuro
grey.css
w3themedeep Temadecoreslaranjaprofunda
orange.css

w3themedeep CordotemaDeepPurple
purple.css

w3themegreen.css Temadecoresverde
w3themegrey.css TemadecoresCinza

w3theme CordotemaIndigo
indigo.css
w3themekhaki.css Temadecorescqui

w3themelight Temadecoresazulclaro
blue.css

w3themelight Cordotemadaluzverde
green.css
w3themelime.css CorLimeTema

w3theme Temadecoreslaranja
orange.css

w3themepink.css PinkThemecor
w3theme Temadecoresroxo
purple.css

w3themered.css Temadacorvermelha

w3themeteal.css CorTealTema
w3theme Temadecoresamarela
yellow.css

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

6/6
29/02/2016 W3.CSSPaletas

W3.CSS Paletas de cores


Anterior Prximocaptulo"

#2196f3 CriarTema

sugestes

207 Hue+ Hue

0.90 Sat+ Sentou

Criado Tema
#f6fbffw3themel5

#d2eafdw3themel4

#a6d4faw3themel3

#79bff8w3themel2

#4daaf6w3themel1

#2196f3w3theme

#0c87ebw3themed1

#0b78d1w3themed2

1/9
29/02/2016 W3.CSSPaletas

#0a69b7w3themed3

#085a9dw3themed4

#074b83w3themed5

Tema In Use:

Filmes de 2014
Congeladas

Arespostaparaasanimaeseraridculo.


Star Wars: The Force desperta

AspessoasestosaiuparaonovofilmedeStarWars.

Os Vingadores

UmenormesucessoparaaMarveleDisney.

+
W3Schools2016

CSS gerado:
2/9
29/02/2016 W3.CSSPaletas

.w3texttheme{color:#2196f3!important}
.w3theme{color:#fff!important;backgroundcolor:#2196f3
!important}

.w3themel5{color:#000!important;backgroundcolor:#f6fbff
!important}
.w3themel4{color:#000!important;backgroundcolor:#d2eafd
!important}
.w3themel3{color:#000!important;backgroundcolor:#a6d4fa
!important}
.w3themel2{color:#000!important;backgroundcolor:#79bff8
!important}
.w3themel1{color:#000!important;backgroundcolor:#4daaf6
!important}
.w3themed1{color:#fff!important;backgroundcolor:#0c87eb
!important}
.w3themed2{color:#fff!important;backgroundcolor:#0b78d1
!important}
.w3themed3{color:#fff!important;backgroundcolor:#0a69b7
!important}
.w3themed4{color:#fff!important;backgroundcolor:#085a9d
!important}
.w3themed5{color:#fff!important;backgroundcolor:#074b83
!important}

.w3themelight{color:#000!important;backgroundcolor:#4daaf6
!important}
.w3themedark{color:#fff!important;backgroundcolor:#085a9d
!important}
.w3themeaction{color:#fff!important;backgroundcolor:#074b83
!important}

My Web
Cardpio

Link1
Link2
Link3

3/9
29/02/2016 W3.CSSPaletas

Simplifique

Vazio
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

Reservar
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

encontrado
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

My Web
Cardpio

Link1
Link2
Link3

Simplifique
4/9
29/02/2016 W3.CSSPaletas

Vazio
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

Reservar
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

encontrado
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

My Web
Cardpio

Link1
Link2
Link3

Simplifique

5/9
29/02/2016 W3.CSSPaletas

Vazio
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

Reservar
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

encontrado
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

My Web
Cardpio

Link1
Link2
Link3

Simplifique

Vazio
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor

6/9
29/02/2016 W3.CSSPaletas

utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

Reservar
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

encontrado
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

My Web
Cardpio

Link1
Link2
Link3

Simplifique

Vazio
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

7/9
29/02/2016 W3.CSSPaletas

Reservar
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

encontrado
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.

Os valores originais
HEX RGB HSL Nome

#2196f3 rgb(33,150,243) hsl(207,90%,54%)

Variaes saturao e Lumination


Valor HSLSaturao HSLLumination

0% #8a8a8a #000000
5% #848a90 #010e18
10% #7e8b95 #031c30
15% #788b9b #042a49
20% #728ca1 #053861
25% #6c8da7 #064579
30% #678dad #085391
35% #618eb3 #0961aa
40% #5b8eb9 #0a6fc2
45% #558fbe #0b7dda
50% #4f90c4 #0d8bf2
55% #4990ca #2597f4
60% #4391d0 #3da2f5

8/9
29/02/2016 W3.CSSPaletas

65% #3d91d6 #55aef6


70% #3892dc #6eb9f7
75% #3292e2 #86c5f9
80% #2c93e8 #9ed1fa
85% #2694ed #b6dcfb
90% #2094f3 #cfe8fc
95% #1a95f9 #e7f3fe
100% #1495ff #ffffff

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

9/9
29/02/2016 W3.CSSBibliotecasdeCores

W3.CSS Bibliotecas de Cores


Anterior Prximocaptulo"

Cores de rodovias
NomeCor

(10055)w3estradamarrom

(11086)w3estradavermelho

(12243)w3estradalaranja

(13415)w3estradaschoolbus

(13507)w3estradaamarelo

(14066)w3estradaverde

(15065)w3estradablue

OsnmerosentreparntesessorefernciasaNormaFederal595.

Osvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosasimularcoresestradaem
HTML.

Exemplo

<divclass="w3tagw3highwaygreen">FalconRidgeParkway</div>

<divclass="w3tagw3highwayschoolbus">SchoolbusStop</div>

Tentevocmesmo BaixeoCSS

Cores de segurana
NomeCor

(11120)w3seguranavermelho

(12300)w3seguranalaranja

(13591)w3amarelosegurana

(14120)w3verdesegurana

1/7
29/02/2016 W3.CSSBibliotecasdeCores

(15092)w3azulsegurana

(17155)w3roxosegurana

OsnmerosentreparntesessorefernciasaNormaFederal595.

Osvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosparasimularcoresde
seguranaemHTML.

Exemplo

<divclass="w3tagw3safetyred">DANGER</div>

Tentevocmesmo BaixeoCSS

ANA Cores Army Navy Aero

ColorName

(ANA501)w3anablue

(ANA502)w3anainsigniablue

(ANA503)w3anawillowgreen

2/7
29/02/2016 W3.CSSBibliotecasdeCores

(ANA503)w3anaoxygentankgreen

(ANA504)w3anaolivedrab

(ANA505)w3analemonyellow

(ANA506)w3anaorangeyellow

(ANA507)w3anaaircraftcream

(ANA508)w3anainternationalorange

(ANA508)w3anaaircraftorange

(ANA509)w3anainsigniared

(ANA510)w3anamaroon

(ANA511)w3anainsigniawhite

(ANA512)w3anaaircraftgrey

(ANA513)w3anaenginegray

(ANA514)w3anainstrumentblack

(ANA515)w3anablack

(ANA516)w3anastratablue

(ANA516)w3anaaircraftblue

(ANA601)w3anainternationalwhite

(ANA601)w3anaaircraftwhite

(ANA602)w3analightgray

(ANA603)w3anaseagray

(ANA603)w3anagunshipgray

(ANA604)w3anainternationalblack

(ANA604)w3ananavyblack

(ANA605)w3anaaircraftinsigniablue

(ANA606)w3anaaircraftseablue

(ANA607)w3anaseablue

(ANA608)w3ananavyblue

(ANA609)w3anaazureblue

(ANA610)w3ana610

(ANA611)w3anainteriorgreen

(ANA612)w3anagunshipgreen

(ANA614)w3anainternationyellow

(ANA615)w3anatan

3/7
29/02/2016 W3.CSSBibliotecasdeCores

(ANA616)w3anadesertsand

(ANA617)w3anafielddrab

(ANA618)w3anadullred

(ANA619)w3anainternationalred

(ANA619)w3anaaircraftred

(ANA621)w3anainternationalgray

(ANA622)w3anaaircraftblack

(ANA623)w3anatealblue

(ANA625)w3anaseaplanegray

(ANA626)w3ana626

(ANA627)w3anafieldgreen

(ANA628)w3anasierratan

OsnmerosentreparntesessorefernciasaNormaFederal595.

OsvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosasimularcoresANAemHTML.

Exemplo

<divclass="w3tagw3olivedrab">

<p>LondonisthecapitalcityofEngland.
ItisthemostpopulouscityintheUnitedKingdom,
withametropolitanareaofover13millioninhabitants.</p>

</div>

Tentevocmesmo BaixeoCSS

cores de camuflagem
NomeCor

(30051)w3camomarrom

(30090)w3camovermelho

(33070)w3camooliva

(33105)w3camocampo

(33245)camoterraw3

(33303)w3camoareia

4/7
29/02/2016 W3.CSSBibliotecasdeCores

(33446)w3camotan

(33510)w3camoarenito

(34082)w3camoverdeescuro

(34086)w3camofloresta

(34089)w3camoluzverde

(34094)w3camoverde

(36170)w3camocinzaescuro

(36300)w3camocinzento

(37030)w3camopreto

OsnmerosentreparntesessorefernciasaNormaFederal595.

Osvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosparasimularcoresde
camuflagememHTML.

Exemplo

<divclass="w3camoearth">CamouflagedTruck</div>

<divclass="w3camogrey">CamouflagedShip</div>

Tentevocmesmo BaixeoCSS

Cores vivas
NomeCor

w3vivasderosa

w3vivasvermelho

w3vivaslaranja

w3vivasamarelo

w3vivasverde

w3vivasblue

w3vivasvioleta

w3vivasroxo

w3vivaspreta

w3vivasbranco

w3vivasamarelorosa
5/7
29/02/2016 W3.CSSBibliotecasdeCores

w3vivaslaranjaavermelhado

w3vivasamareloalaranjado

w3vivasamareloesverdeado

w3vivasamareloverde

w3vivasverdeamarelado

w3vivasverdeazulado

w3vivasazulesverdeado

w3vivasprpuraazul

w3vivasprpuraavermelhada

w3vivasvermelhoarroxeado

Osw3nomessorefernciasaISCCNBS.

Osvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosparasimularcoresvivasdo
HTML.

Exemplo

<divclass="w3vividred">

<p>LondonisthecapitalcityofEngland.
ItisthemostpopulouscityintheUnitedKingdom,
withametropolitanareaofover13millioninhabitants.</p>

</div>

Tentevocmesmo BaixeoCSS

cores de sinalizao
NomeCor

(1003)w3sinalamarelo

(2010)w3sinallaranja

(3001)w3sinalvermelho

(4008)w3signalvioleta

(5005)w3sinalblue

(6032)w3sinalverde

(7004)w3sinalacinzentado

6/7
29/02/2016 W3.CSSBibliotecasdeCores

(8002)w3sinalbrown

(9003)w3sinalbranco

(9004)w3sinalpreta

OsnmerosentreparntesessorefernciasparaoRALCorpadro.

Osvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosparasimularcoresde
sinalizaoemHTML.

Exemplo

<divclass="w3tagw3signalred">Stopp</div>

<divclass="w3tagw3signalyellow">Wait</div>

<divclass="w3tagw3signalgreen">Go</div>

Tentevocmesmo BaixeoCSS

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

7/7
29/02/2016 ExemplosW3.CSS

W3.CSS Exemplos
Anterior Prximocaptulo"

W3.CSS lbum de fotografias

Demonstrao VerFonte

W3.CSS jornal

Demonstrao VerFonte

1/4
29/02/2016 ExemplosW3.CSS

W3.CSS Blog

Demonstrao VerFonte

Anncios W3.CSS

Demonstrao VerFonte

W3.CSS material design


2/4
29/02/2016 ExemplosW3.CSS

Demonstrao VerFonte

mais Exemplos
PhotoAlbumcomtexto programademonstrativo VerFonte

sitededemonstrao programademonstrativo VerFonte

Demonstraomaterial programademonstrativo VerFonte


design

correiode programademonstrativo VerFonte


demonstrao

demonstrao programademonstrativo VerFonte


Homepage

Jornalcommaior programademonstrativo VerFonte


Preenchimento

Revistade programademonstrativo VerFonte


demonstrao

maisanncios programademonstrativo VerFonte

DemoAlbumWine programademonstrativo VerFonte

Demonstraopgina programademonstrativo VerFonte


delogin

FoneTemaAzul
3/4
29/02/2016 ExemplosW3.CSS

programademonstrativo VerFonte

TealTemamvel programademonstrativo VerFonte

FoneTemaVermelho programademonstrativo VerFonte

FoneTemaVerde programademonstrativo VerFonte

FoneTemaPreto programademonstrativo VerFonte

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

4/4
29/02/2016 ModelosW3.CSS

demo_template_portfolio.htm

<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Body>

<Divclass="w3topnavw3largew3verdew3center">
<ahref="#">Portfolio</a>
<ahref="#">Incio</a>
<ahref="#">Sobre</a>
<ahref="#">Galeria</a>
<ahref="#">Contact</a>
</Div>

<Divclass="w3cinzaclarow3containerw3padding64w3marginbottomw3

<H1class="w3jumbo">MinhaPasta</
h1>
<P>Algumtextoquerepresenta"Me"...</p>
</Div>

<Divclass="w3containerw3centerw3marginbottom">
<H3>algunsdosmeustrabalhos</h3><br>
<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
</Div>

http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS

<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
</Div><br>
</Div>

<Classrodap="w3containerw3centerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>

</Body>
</Html>

http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS

demo_teal.htm

<!DOCTYPEhtml>
<Html>
<Title>DemonstraoW3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3themeteal.
<Linkrel="stylesheet"href="http://cdnjs.cloudflare.com/ajax/libs/font
<Body>

<!NavigationSide>
<Navclass="w3sidenavw3whitew3card2w3animadoesquerda"style="di
<ahref="javascript:void(0)"onclick="w3_close()"class="w3closenavw3xx
<ahref="javascript:void(0)">Link1</a>
<ahref="javascript:void(0)">Link2</a>
<ahref="javascript:void(0)">ligao3</a>
<ahref="javascript:void(0)">Fazeraligao4</a>
<ahref="javascript:void(0)">Fazeraligao5</a>
</Nav>

<!Cabealho>
<Classheader="w3containerw3themew3preenchimento"id="myHeader">
<Ionclick="w3_open()"class="fafabaresw3xlargew3opennav"></i
<Divclass="w3center">
<H5>BONITASSITESresponsivo</H5>
<H1class="w3animadobottom">CONSTRUDOCOMW3.CSS</h1>
<Divclass="w3padding32">
<ahref="#id01"class="w3btnw3xxlargew3themedark"style="fontwe
</Div>
</Div>
</Header>

<!Modal>
<Divid="ID01"class="w3modal">
<Divclass="modalcontentw3w3card8w3animadotop">
<Classheader="w3containerw3tema">
<ahref=""class="w3closebtn"></a>
<H4>Ohpresso!Nsapenasmostroulheummodal..</h4>
<H5>Porquenspodemos<iclass="fafasorrisoo"></i></H5>
</Header>
<Divclass="w3preenchimento">
<P>Coolhuh?Ok,provocaosuficienteemtorno..</p>
http://www.w3schools.com/w3css/w3css_templates.asp 1/10
29/02/2016 ModelosW3.CSS

<P>Vaonosso<aclass="w3btn"href="/w3css/default.asp">W3.CSS
</Div>
<Classrodap="w3containerw3tema">
<P>Modalrodap</p>
</Footer>
</Div>
</Div>

<Divclass="w3rowpreenchimentow3centerw3margintop">
<Divclass="w3tero">
<Divclass="2cardw3w3paddingtop"style="minheight:460px">
<H4>Responsive</h4><br>
<Iclass="fafadesktopw3margeminferiorw3texttema"style="fonts

<P>Builtincapacidadederesposta</
p>
<P>gradeprimeirofluidomvel</p>
<P>Serveparaqualquertamanhosdetela</p>
<P>TabletPCemobile</p>
</Div>
</Div>

<Divclass="w3tero">
<Divclass="2cardw3w3paddingtop"style="minheight:460px">
<H4>CSSPadro</h4><br>
<Iclass="fafacss3w3margeminferiorw3texttema"style="fontsize
<P>PadroCSSnica</p>
<P>Fcildeaprender</p>
<P>NohnecessidadedejQuery</p>
<P>bibliotecaSemJavaScript</p>
</Div>
</Div>

<Divclass="w3tero">
<Divclass="2cardw3w3paddingtop"style="minheight:460px">
<H4>Design</h4><br>
<Iclass="fafadiamantew3margeminferiorw3texttema"style="font
<P>Papercomooprojeto</p>
<P>Coresfortesesombras</p>
<P>Aigualdadeentreplataformas</p>
<P>Aigualdadeatravsdedispositivos</p>
</Div>
</Div>
</Div>

<Divclass="w3container">

http://www.w3schools.com/w3css/w3css_templates.asp 2/10
29/02/2016 ModelosW3.CSS

<Hr>
<Divclass="w3center">
<H2>Classesdecores</h2>
</Div>

<Divclass="w3fila">
<Divclass="w3colw3containerm2w3red"><p>Red</p></div>
<Divclass="w3colw3containerm2w3blue"><p>Blue</p></div>
<Divclass="w3colw3containerm2w3azulcinzento"><p>BlueCinza</
<Divclass="w3colw3containerm2w3teal"><p>Teal</p></div>
<Divclass="w3colw3containerm2w3amarelo"><p>Yellow</p></div>
<Divclass="w3colw3containerm2w3laranja"><p>Orange</p></div>
</Div>

<Hr>
<Divclass="w3center">

<H2>Builtincapacidadederesposta</
h2>
<Pclass="w3large">redimensionarapginaparaveroefeito!</P>
</Div>
<br>

<Divclass="w3roww3border">
<Divclass="w3meiow3containerw3bluew3border">
<H5>w3metade</H5>
<P>Aclassew3metadeusaametade(50%)dajaneladoecr.</P>
<P>Emtelaspequenas(mximode600pixels)queredimensionaautomatica
</Div>
<Divclass="w3meiow3container">
<H5>w3metade</H5>
</Div>
</Div>
<br>

<Divclass="w3roww3border">
<Divclass="w3terow3containerw3green">
<H5>w3tero</H5>
<P>Ow3deterceiraclasseusaumtero(33,33%)davivatela.</P>
<P>Emtelaspequenas(mximode600pixels)queredimensionaautomatica
</Div>
<Divclass="w3terow3container">
<H5>w3tero</H5>
</Div>
<Divclass="w3terow3container">
<H5>w3tero</H5>

http://www.w3schools.com/w3css/w3css_templates.asp 3/10
29/02/2016 ModelosW3.CSS

</Div>
</Div>
<br>

<Divclass="w3roww3border">
<Divclass="w3trimestrew3containerw3red">
<H5>w3trimestre</H5>
<P>Aclassew3trimestreusaumquarto(25%)dajaneladoecr.</P>
<P>Emtelaspequenas(mximode600pixels)queredimensionaautomatica
</Div>
<Divclass="w3trimestrew3container">
<H5>w3trimestre</H5>
</Div>
<Divclass="w3trimestrew3container">
<H5>w3trimestre</H5>
</Div>
<Divclass="w3trimestrew3container">
<H5>w3trimestre</H5>
</Div>
</Div>

<Divclass="w3center">
<H2>Containers</h2>
<P>Userecipientesparacriarcabealhos,seeserodaps.</P>
</Div>

<Headerclass="w3containerw3azulcinzento">
<H2>Header</h2>
</Header>

<Divclass="w3preenchimentow3branco">
<Spanonclick="this.parentElement.style.display='none'"class="w3te
<H2>Londres</h2>
<P>LondresacidadecapitaldaInglaterra.acidademaispopulosado
comumareametropolitanademaisde13milhesdehabitantes.</p>
<P>DepsobreorioTamisa,Londrestemsidoumgrandepovoadopordois
asuahistriaqueremontasuafundaopelosromanos,quelhechamaram
<P>Apropsito,vocpodeadicionarumconedepertodetodososrecipie
</Div>

<Rodapclass="w3containerw3azulcinzento">
<H5>rodap</H5>
<Pclass="w3opacidade">informaesrodapvaiaqui</p>
</Footer>

http://www.w3schools.com/w3css/w3css_templates.asp 4/10
29/02/2016 ModelosW3.CSS

<Hr>
<Divclass="w3center">
<H2>Temasdecor</h2>
<P>Ostemasdecoresforamprojetadosparatrabalharemharmoniaunscom
</Div>
</Div>

<Divclass="w3rowpreenchimento">

<Divclass="w3metade">
<Divclass="w3cartobranco">
<Divclass="w3containerw3ndigo">
<H3>TemaIndigo</h3>
</Div>
<Divclass="w3container">
<h3class="textow3ndigo">Filmes2014</h3>
</Div>
<Ulclass="w3ulw3bordertop">
<Li>
<H3>Frozen</h3>
<P>Arespostaparaasanimaeseraridculo</p>
</Li>
<Li>
<H3>Afalhaemnossasestrelas</h3>
<P>Tocar,emocionanteerealmentebemfeito</p>
</Li>
<Li>
<H3>OsVingadores</h3>
<P>UmenormesucessoparaaMarveleDisney</p>
</Li>
</Ul>
<Divclass="w3containerw3indigow3xlarge">
<Spanclass="w3right"></span>
</Div>
</Div>
</Div>

<Divclass="w3metade">
<Divclass="w3cartobranco">
<Divclass="w3containerw3tema">
<H3>tema</h3>
</Div>
<Divclass="w3container">

http://www.w3schools.com/w3css/w3css_templates.asp 5/10
29/02/2016 ModelosW3.CSS

<h3class="textow3tema">Filmes2014</h3>
</Div>
<Ulclass="w3ulw3bordertop">
<Li>
<H3>Frozen</h3>
<P>Arespostaparaasanimaeseraridculo</p>
</Li>
<Li>
<H3>Afalhaemnossasestrelas</h3>
<P>Tocar,emocionanteerealmentebemfeito</p>
</Li>
<Li>
<H3>OsVingadores</h3>
<P>UmenormesucessoparaaMarveleDisney</p>
</Li>
</Ul>
<Divclass="w3containerw3themew3xlarge">
<Spanclass="w3right"></span>
</Div>
</Div>
</Div>
</Div>

<Divclass="w3containerw3center">
<Hr>
<H3>PapellikeCartescomsombras</h3>
</Div>

<Divclass="w3rowpreenchimento">

<Divclass="w3tero">
<Divclass="w3card2">
<Imgsrc="img_car.png"alt="Car"style="width:100%">
<Divclass="w3container">
<P>w3card2</p>
</Div>
</Div>
</Div>

<Divclass="w3tero">
<Divclass="w3card4">
<Imgsrc="img_car.png"alt="Car"style="width:100%">
<Divclass="w3container">
<P>w3card4</p>

http://www.w3schools.com/w3css/w3css_templates.asp 6/10
29/02/2016 ModelosW3.CSS

</Div>
</Div>
</Div>

<Divclass="w3tero">
<Divclass="w3card8">
<Imgsrc="img_car.png"alt="Car"style="width:100%">
<Divclass="w3container">
<P>w3card8</p>
</Div>
</Div>
</Div>
</Div>

<Divclass="w3container">
<Hr>
<Divclass="w3center">
<H2>Tabelas</h2>
<Pw3class="w3large">Nosepreocupe.W3.CSScuidadesuastabelas.
</Div>
<Divclass="w3responsivew3card4">
<Class=mesa"mesaw3w3listradow3limitado">
<Thead>
<Trclass="w3tema">
<Th>Nome</th>
<Th>Apelido</th>
<th>Pontos</th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Jill</td>
<Td>Smith</td>
<Td>50</td>
</Tr>
<Trclass="w3branco">
<Td>Eve</td>
<Td>Jackson</td>
<Td>94</td>
</Tr>
<Tr>
<Td>Adam</td>
<Td>Johnson</td>
<Td>67</td>

http://www.w3schools.com/w3css/w3css_templates.asp 7/10
29/02/2016 ModelosW3.CSS

</Tr>
</Tbody>
</Table>
</Div>

<Hr>
<H2class="w3center">Formulrioselistas</h2>
</Div>

<Divclass="w3rowpreenchimento">

<Divclass="w3metade">
<Classedeformulrio="w3containerw3card4">

<Divclass="w3grupo">
<Inputclass=Tipo"deentradaw3"="text"necessria>
<Classlabel="rtulow3w3validate">Nome</label>
</Div>
<Divclass="w3grupo">
<Inputclass=Tipo"deentradaw3"="text"necessria>
<Classlabel="rtulow3w3validate">Email</label>
</Div>
<Divclass="w3grupo">
<Classtextarea="w3input"></textarea>
<Labelclass="w3label">Assunto</label>
</Div>

<Divclass="w3fila">
<Divclass="w3metade">
<Inputid="leite"class="w3check"type="checkbox"checked="chec
<Classlabel="w3validate">Leite</label>
<br>
<Inputid=class"acar"="w3check"type="checkbox">
<Labelclass="w3validate">Sugar</label>
<br>
<Inputid=classe"limo"="w3check"type="checkbox"desativado>
<Labelclass="w3validate">Lemon(Disabled)</label>
<br>
</Div>

<Divclass="w3metade">
<Inputid=classe"macho"=tipo"w3rdio"="radio"name=value"gn
<Labelclass="w3validate">Masculino</label>
<br>

http://www.w3schools.com/w3css/w3css_templates.asp 8/10
29/02/2016 ModelosW3.CSS

<Inputid="feminino"class=tipo"w3rdio"="radio"name=value"g
<Labelclass="w3validate">Fmea</label>
<br>
<Inputid="desconhecido"class="w3radio"type="radio"name=valu
<Labelclass="w3validate">Nosei(Disabled)</label>
</Div>
</Div>

</Form>
</Div>
<Divclass="w3metade">
<Divclass="w3card4w3container">
<H2>listas</h2>
<Ulclass="w3ul">
<Li>Jill</li>
<Li>Eve</li>
<Li>Adam</li>
</Ul>
<br>
</Div>
</Div>
</Div>

<Divclass="w3container">
<Hr>
<Class="w3center"h2>Navegao</h2>

<Divclass="w3topnavw3largew3tema">
<ahref="javascript:void(0)"><iclass="fafahomew3xlarge"></i></a
<ahref="javascript:void(0)">Link1</a>
<ahref="javascript:void(0)">Link2</a>
<ahref="javascript:void(0)">ligao3</a>
<ahref="javascript:void(0)">Fazeraligao4</a>
</Div>

<Hr>
<H2class="w3center">Botes</h2>
<Divclass="w3center">
<br>
<aclass="w3btn">Boto</a>
<aclass="w3btnw3theme">Boto</a>
<aclass="w3btnw3disabled">Boto</a>
<br>
<aclass="w3btnfloatingw3teal"><iclass="fafaplus"></i></a>

http://www.w3schools.com/w3css/w3css_templates.asp 9/10
29/02/2016 ModelosW3.CSS

<aclass="w3btnfloatingw3disabled"><iclass="fafaplus"></i></a
<aclass="w3btnfloatingw3disabled"><iclass="fafaplus"></i></a
<br>
<aclass="w3btnfloatinglargew3teal"><iclass="fafaplus"></i><
<aclass="w3btnfloatinglargew3disabled"><iclass="fafaplus"></
<aclass="w3btnfloatinglargew3disabled"><iclass="fafaplus"></
</Div>
</Div>

<br>

<!Rodap>
<Rodapclass="w3containerw3themeescuro">
<H3>rodap</h3>
<P>Lembresedeverificaranossa<ahref="w3css_references.asp"class="w
<Divstyle="position:relativebottom:55px"class="w3dicaw3right
<Spanclass="w3textw3temaescuro">GoToTop</span>
<aclass="w3textwhite"href="#myHeader"><spanclass="w3xlarge">
<Iclass="fafachevroncircleup"></i></span></a>
</Div>

</P>
</Footer>

<!Scriptparanavegaolateral>
<Script>
w3_openfunction(){
document.getElementsByClassName("w3sidenav")[0].style.width="100%
document.getElementsByClassName("w3sidenav")[0].style.textAlign="
document.getElementsByClassName("w3sidenav")[0].style.fontSize="5
document.getElementsByClassName("W3sidenav")[0].style.paddingTop=
document.getElementsByClassName("w3sidenav")[0].style.display="bl
}
w3_closefunction(){
document.getElementsByClassName("w3sidenav")[0].style.display="no
}
</Script>

<Scriptsrc="http://www.w3schools.com/lib/w3codecolors.js"></script>
</Body>
</Html>

http://www.w3schools.com/w3css/w3css_templates.asp 10/10
29/02/2016 ModelosW3.CSS

demo_template_portfolio.htm

<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Body>

<Divclass="w3topnavw3largew3verdew3center">
<ahref="#">Portfolio</a>
<ahref="#">Incio</a>
<ahref="#">Sobre</a>
<ahref="#">Galeria</a>
<ahref="#">Contact</a>
</Div>

<Divclass="w3cinzaclarow3containerw3padding64w3marginbottomw3

<H1class="w3jumbo">MinhaPasta</
h1>
<P>Algumtextoquerepresenta"Me"...</p>
</Div>

<Divclass="w3containerw3centerw3marginbottom">
<H3>algunsdosmeustrabalhos</h3><br>
<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
</Div>

http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS

<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
</Div><br>
</Div>

<Classrodap="w3containerw3centerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>

</Body>
</Html>

http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS

demo_template_blog.htm

<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Linkrel="stylesheet"href="http://cdnjs.cloudflare.com/ajax/libs/font
<Body>

<Navclass="w3sidenavw3cinzaclaro"style="width:25%">
<Ahref="javascript:void(0)"
onclick="w3_close()"
"W3largew3closenav"class=>Fechar</a>
<ahref="#">class="w3textbluegrey"Incio</a>
<ahref="#">Amigos</a>
<ahref="#"></a>Famlia
<ahref="#">Fotos</a>
</Nav>

<Divid=estilo"main"="marginleft:25%"><!Comeceprincipal>

<Headerclass="w3containerw3azulcinzento">
<Spanclass="w3opennavw3xlarge"onclick="w3_open()"style="displ
<H1>MeuBlog</h1>
</Header>

<Divclass="w3container">
<H6class="w3opacidade">POSTSRECENTES</h6>
<Hr>
<H2>ILoveAlimentar</h2>
<H5><iclass="fafarelgioo"></i>MensagemporJaneDane,27deset
<Pclass="w3pequenas">Tags:<spanclass="w3tagw3pequenaw3red">
<P>Foodaminhapaixo.Loremipsumdolorsitamet,consecteturadipisc
<br>

<H6class="w3opacidade">POSTSRECENTES</h6>
<Hr>
<H2>OfficiallyBlogging</h2>
<H5><iclass="fafarelgioo"></i>MensagemporJohnDoe,24desete
<Pclass="w3pequenas">Tags:<spanclass="w3tagw3pequenaw3green"
<P>Loremipsumdolorsitamet,consecteturadipiscingelit,sedfazereiu
<Hr>
http://www.w3schools.com/w3css/w3css_templates.asp 1/3
29/02/2016 ModelosW3.CSS

<Divclass="w3card2w3container">
<H4>Deixeumcomentrio:</h4>
<Form>
<Class=textareaespaoreservado"w3input"="Digaalgobom.."nec
<br>
<Buttontype="submit"class="seow3w3btnw3green">Enviar</
<br>
</Form>
</Div>
<br>

<P><spanclass="w3emblemaw3black">1</span>Comentrio:</p><br>

<Divclass="w3fila">
<Divclass="w3cols2textcenter">
<Class="imagemw3w3circle"imgsrc="img_avatar.jpg"width="96"
</Div>
<Divclass="w3cols10w3container">
<H4>John<spanclass="w3opacidadew3mdio">29desetembrode201
<P>Mantenhaoexcelentetrabalho!Estoutorcendoporvoc!!Loremip
</Div>
</Div>
</Div>

<Rodapclass="w3containerw3azulcinzento">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>

</Div><!Endprincipal>

<Script>
w3_openfunction(){
document.getElementById("main").style.marginLeft="25%"
document.getElementsByClassName("w3sidenav")[0].style.width="25%"
document.getElementsByClassName("w3sidenav")[0].style.display="bloc
document.getElementsByClassName("w3opennav")[0].style.display='none
}
w3_closefunction(){
.Document.getElementById("main")style.marginLeft="0%"
document.getElementsByClassName("w3sidenav")[0].style.display="none
document.getElementsByClassName("w3opennav")[0].style.display="inli
}

http://www.w3schools.com/w3css/w3css_templates.asp 2/3
29/02/2016 ModelosW3.CSS

</Script>

</Body>

http://www.w3schools.com/w3css/w3css_templates.asp 3/3
29/02/2016 ModelosW3.CSS

demo_template_webpage.htm

<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Style>
/*Definiraalturadagradedemodoquecolesquerdaedireitapodeser10
.w3row{height:500px}

/*Definaumaalturade100%paraaesquerdaeparaadireitacol*/
.w3col.m2,w3col.m2{height:100%}

/*Emtelaspequenas,ajustedegradedealturapara'auto'*/
tela@mediae(maxwidth:601px){
.w3row{height:auto}
}
</Style>
<Body>

<Divclass="w3topnavw3largew3green">
<ahref="#">Portfolio</a>
<ahref="#">Incio</a>
<ahref="#">Sobre</a>
<ahref="#">Galeria</a>
<ahref="#">Contact</a>
</Div>

<Divclass="w3center">
<Divclass="w3fila">
<Divclass="w3colm2w3cinzaclaro">
<P><ahref="#">Fazeraligao</a></p>
<P><ahref="#">Fazeraligao</a></p>
<P><ahref="#">Fazeraligao</a></p>
</Div>
<Divclass="w3colm8w3container">
<H1>Welcome</h1>
<Pclass="w3justify">Loremipsumdolorsitamet,consecteturadipi
<Hr>
<H3>Test</h3>
<P>Loremipsum...</p>
</Div>
http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS

<Divclass="w3colm2w3cinzaclarow3preenchimento">
<Divclass="w3card2w3preenchimento">
<P>ADS</p>
</Div><br>
<Divclass="w3card2w3preenchimento">
<P>ADS</p>
</Div>
</Div>
</Div>
</Div>

<Classrodap="w3containerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>

</Body>
</Html>

http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS

<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Classbody="w3cinzaclaro">

<Divclass="w3topnavw3largew3teal">
<ahref="#">Incio</a>
<ahref="#">Mensagens</a>
<ahref="#">MinhaConta</a>
</Div>
<br>

<Divclass="w3containerw3center">
<Divclass="w3fila">
<Divclass="m3w3col">
<Divclass="w3card2w3roundw3branco">
<Divclass="w3container">
<P><ahref="#">Meuperfil</a></p>
<P><imgsrc="img_avatar.jpg"class="w3circle"height="75"width="75"alt="Avatar"></p>
</Div>
</Div>
<br>

<Divclass="w3card2w3roundw3branco">
<Divclass="w3container">
<P><ahref="#">Interesses</a></p>
<P>
<Spanclass="tagw3w3pequenaw3red">Notcias</span>
<Spanclass="w3tagw3pequenaw3blue">W3Schools</span>
<Spanclass="w3tagw3pequenaw3purple">Etiquetas</span>
<Spanclass="w3tagw3pequenaw3green">Jogos</span>
<Spanclass="w3tagw3pequenaw3brown">Friends</span>
<Spanclass="tagw3w3pequenaw3amarelo">famlia</span>
</P>
</Div>
</Div>
<br>
<Divclass="w3containerw3roundw3tealw3marginbottom">
<Spanonclick="this.parentElement.style.display='none'"class="w3closebtn"></span>
<P><strong>Ey!</Strong></p>
<P>Aspessoasestoolhandoparaoseuperfil.Descubraquem.</P>
</Div>
</Div>
<Divclass="m7w3col">

<Divclass="w3rowpreenchimento">
<Divclass="m12w3col">
<Divclass="w3card2w3roundw3branco">
<Divclass="w3containerw3preenchimentow3esquerdaalign">
<Pcontenteditable="true">Status:Sentimentoazul</p>
<Tipoboto="button"class="w3btnw3teal">Como</button>
</Div>
</Div>
</Div>
</Div>

<Divclass="w3rowpreenchimentow3margintop">
<Divclass="m3w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>John</p>
<P><imgsrc="img_avatar.jpg"class="w3imagew3circle"alt="Avatar"width="96"height="96"></p>
</Div>
</Div>
</Div>
<Divclass="M9w3col">
<Divclass="w3card2w3whitew3roundlarge">

http://www.w3schools.com/w3css/w3css_templates.asp 1/3
29/02/2016 ModelosW3.CSS
<Divclass="w3container">
<P>ApenasEsqueceuqueeutinhaquefalaralgumacoisasobrealgumcomalgumsobrecomoeuesquecialgumaco
</Div>
</Div>
</Div>
</Div>
<Divclass="w3rowpreenchimentow3margintop">
<Divclass="m3w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>John</p>
<P><imgsrc="img_avatar.jpg"class="w3imagew3circle"alt="Avatar"width="96"height="96"></p>
</Div>
</Div>
</Div>
<Divclass="M9w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>ApenasEsqueceuqueeutinhaquefalaralgumacoisasobrealgumcomalgumsobrecomoeuesquecialgumaco
</Div>
</Div>
</Div>
</Div>
<Divclass="w3rowpreenchimentow3margintop">
<Divclass="m3w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>John</p>
<P><imgsrc="img_avatar.jpg"class="w3imagew3circle"alt="Avatar"width="96"height="96"></p>
</Div>
</Div>
</Div>
<Divclass="M9w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>ApenasEsqueceuqueeutinhaquefalaralgumacoisasobrealgumcomalgumsobrecomoeuesquecialgumaco
</Div>
</Div>
</Div>
</Div>
<Divclass="w3rowpreenchimentow3margintopw3marginbottom">
<Divclass="m3w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>John</p>
<P><imgsrc="img_avatar.jpg"class="w3imagew3circle"alt="Avatar"width="96"height="96"></p>
</Div>
</Div>
</Div>
<Divclass="M9w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>ApenasEsqueceuqueeutinhaquefalaralgumacoisasobrealgumcomalgumsobrecomoeuesquecialgumaco
</Div>
</Div>
</Div>
</Div>
</Div>
<Divclass="w3colm2">
<Divclass="w3card2w3roundw3branco">
<Divclass="w3container">
<P>PrximosEventos:</p>
<Imgsrc="img_5terre.png"alt="CinqueTerre"style="width:100%">
<P><strong>Itlia</strong></p>
<P>Sextafeira15:00</p>
<P><class=boto"w3btn">Info</button></p>
</Div>
</Div>
<br>
<Divclass="w3card2w3roundw3whitew3padding16">
<P>ADS</p>

http://www.w3schools.com/w3css/w3css_templates.asp 2/3
29/02/2016 ModelosW3.CSS
</Div>
<Divclass="w3card2w3roundw3branco">
<P>ADS</p>
</Div>
</Div>
</Div>
</Div>
<br>

<Classrodap="w3containerw3teal">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>

</Body>
</Html>

http://www.w3schools.com/w3css/w3css_templates.asp 3/3
29/02/2016 ModelosW3.CSS

demo_template_marketing.htm

<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Body>

<Divclass="w3topnavw3largew3green">
<ahref="#">Logo</a>
<ahref="#">Sobre</a>
<ahref="#">Projetos</a>
<ahref="#">Contact</a>
</Div>

<Divclass="w3cinzaclarow3containerw3padding64w3marginbottomw3
<H1class="w3jumbo">IMAGEM</h1>
<P>Algumtexto..</p>
</Div>

<Divclass="w3containerw3centerw3marginbottom">
<H3>Oquefazemos</h3><br>
<Divclass="w3rowpreenchimento">
<Divclass="w3tero">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
<P>ProjetoAtual</p>
</Div>
<Divclass="w3tero">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
<P>Projeto2</p>
</Div>
<Divclass="w3tero">
<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div><br>
<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div>
</Div>
</Div>
<br>
</Div>
http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS

<Classrodap="w3containerw3centerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>

</Body>
</Html>

http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS

demo_template_marketing2.htm

<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Body>

<Divclass="w3topnavw3largew3cinzaescuro">
<ahref="#">Logo</a>
<ahref="#">Sobre</a>
<ahref="#">Projetos</a>
<ahref="#">Contact</a>
</Div>

<Divclass="w3roww3marginbottom">
<Divclass="m8w3col">
<Divclass="w3cinzaclarow3containerw3padding64w3center">
<H1class="w3jumbo">IMAGEM</h1>
<P>Algumtexto..</p>
</Div>
</Div>
<Divclass="m4w3col">
<Divclass="w3containerw3padding64w3centerw3green">
<H1class="w3jumbo">IM</h1>
<P>Algumtexto..</p>
</Div>
</Div>
</Div>

<Divclass="w3containerw3centerw3marginbottom">
<H3>Oquefazemos</h3><br>
<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
<P>ProjetoAtual</p>
</Div>
<Divclass="w3trimestre">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
<P>Projeto2</p>
</Div>
<Divclass="w3trimestre">
http://www.w3schools.com/w3css/w3css_templates.asp 1/3
29/02/2016 ModelosW3.CSS

<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div><br>
<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div>
</Div>
<Divclass="w3trimestre">
<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div><br>
<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div>
</Div>
</Div>
<Hr>

<H3>Parceiros</h3>
<br>
<Divclass="w3rowpreenchimento">
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro1</p>
</Div>
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro2</p>
</Div>
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro3</p>
</Div>
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro4</p>
</Div>
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro5</p>
</Div>
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro6</p>

http://www.w3schools.com/w3css/w3css_templates.asp 2/3
29/02/2016 ModelosW3.CSS

</Div>
</Div>
</Div>

<Classrodap="w3containerw3centerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>

</Body>
</Html>

http://www.w3schools.com/w3css/w3css_templates.asp 3/3
29/02/2016 ModelosW3.CSS

<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Style>
/*Definaosidenavalarguratotalquandoatelamenordoque600pixelsdelargura*/
@media(maxwidth:500px){
.w3sidenav{
width:100%importante!
}
}
</Style>
<Body>

<Navclass="w3sidenavw3cinzaclaro"style="width:25%">
<Ahref="javascript:void(0)"
onclick="w3_close()"
"W3paddingrightw3closenavw3largew3direito"class=></a>
<Divclass="w3container">
<H3>Logo</h3>
</Div>
<aclass="w3red"href="#">Painel</a>
<ahref="#">Idade</a>
<ahref="#">Sexo</a>
<ahref="#">Geo</a>
</Nav>

<Divid=estilo"main"="marginleft:25%"><!Comeceprincipal>
<br>

<Divclass="w3rowpreenchimento">
<Divclass="m12w3col">
<Div"w3card4w3containerw3cinzaclaro"class=>
<Spanclass="w3opennavw3xlarge"onclick="w3_open()"style="display:none"></span>
<H3>Painel</h3>
<P>Algumtexto...</p>
</Div>
</Div>
</Div>
<br>

<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H4>Usurios</h4>
<P>1milho</p>
</Div>
</Div>

<Divclass="w3trimestre">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H4>Pginas</h4>
<P>100Million</p>
</Div>
</Div>

<Divclass="w3trimestre">
<Divclass="w3card2w3cinzaclarow3preenchimento">

http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS
<H4>Sesses</h4>
<P>10milhes</p>
</Div>
</Div>

<Divclass="w3trimestre">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H4>Taxaderejeio</h4>
<P>30%</p>
</Div>
</Div>
</Div>
<br>

<Divclass="w3rowpreenchimento">
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>Texto..</h3>
</Div>
</Div>

<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>Texto..</h3>
</Div>
</Div>

<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>Texto..</h3>
</Div>
</Div>
</Div>
<br>

<Rodapclass="w3containerw3azulcinzento">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>

</Div><!Endprincipal>

<Script>
w3_openfunction(){
document.getElementById("main").style.marginLeft="25%"
document.getElementsByClassName("w3sidenav")[0].style.width="25%"
document.getElementsByClassName("w3sidenav")[0].style.display="bloco"
document.getElementsByClassName("w3opennav")[0].style.display='none'
}
w3_closefunction(){
.Document.getElementById("main")style.marginLeft="0%"
document.getElementsByClassName("w3sidenav")[0].style.display="none"
document.getElementsByClassName("w3opennav")[0].style.display="inlineblock"
}
</Script>

</Body>
</Html>

http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS

demo_template_store.htm

<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Body>

<Divclass="w3cinzaclarow3containerw3padding64w3center">
<H1class="w3jumbo">OnlineStore</h1>
<P>Misso,VissioneValores</p>
</Div>

<Divclass="w3topnavw3largew3centerw3green">
<ahref="#">Incio</a>
Produtos<ahref="#"></a>
Ofertas<ahref="#"></a>
Stores<ahref="#"></a>
<ahref="#">Contact</a>
<aContahref="#"></a>
</Div>

<Divclass="w3containerw3margemw3centerw3marginbottom">
<Divclass="w3rowpreenchimento">
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>

<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>

<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS

<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>
</Div>
<br>

<Divclass="w3rowpreenchimento">
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>

<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>

<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>
</Div>
</Div>

<Classrodap="w3containerw3centerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>

</Body>
</Html>

http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS

W3.CSS Templates
Anterior Prximocaptulo"

W3.CSS Modelos de Site


CrimosalgunsmodelosW3CSSresponsivosparavocusar.

Verafonte.Copiloeuslo.

Black Theme

Demonstrao VerFonte

mais modelos
SiteusandoRedTheme programademonstrativo VerFonte

SiteusandoTemaTeal programademonstrativo VerFonte

TemplatePortfolio programademonstrativo VerFonte

1/2
29/02/2016 ModelosW3.CSS

TemplateBlog programademonstrativo VerFonte

Templatepginada programademonstrativo VerFonte


Web

Templatesocial programademonstrativo VerFonte

TemplateMarketingI programademonstrativo VerFonte

TemplatedeMarketing programademonstrativo VerFonte


II

TemplateAnalytics programademonstrativo VerFonte

Templatelojaonline programademonstrativo VerFonte

Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

2/2

Das könnte Ihnen auch gefallen