interfaces

7/21/2019 Interfaces

http://slidepdf.com/reader/full/interfaces-56dcaf724f269 1/28

Nombre de la Interfaz Rastrear EncomiendaPropósito de la interfaz Esta interfaz permite al cliente ver la ubicación de su encomienda y el

tiempo que falta para que llegue a su destino.

Gráfica de la interfaz

Código de la interfaz

HTML

<!DOC"E #tml$

<#tml lang%&en&$<#ead$<title$<'title$<meta c#arset%&utf()&$<lin* rel%&styles#eet& #ref%&css'reset.css& type%&te+t'css& media%&all&$<lin* rel%&styles#eet& #ref%&css'layout.css& type%&te+t'css& media%&all&$<lin* rel%&styles#eet& #ref%&css'style.css& type%&te+t'css& media%&all&$<style type%&te+t'css&$,apDiv-

position/ absolute01idt#/ 234p+0#eig#t/ --2p+0z(inde+/ -0

left/ 25)p+0top/ -6-p+0

7,apDiv3

position/ absolute01idt#/ 3-)p+0#eig#t/ 56p+0z(inde+/ 30left/ 255p+0top/ 24p+0

7,apDiv2

position/ absolute0

1idt#/ 236p+0#eig#t/ 328p+0



z(inde+/ 20left/ )-2p+0top/ 5-5p+0

7<'style$<script type%&te+t'9avascript& src%&9s'9query(-.:.3.9s& $<'script$

<script type%&te+t'9avascript& src%&9s'cufon(yui.9s&$<'script$<script type%&te+t'9avascript& src%&9s'cufon(replace.9s&$<'script$<script type%&te+t'9avascript& src%&9s';yriad"roitalic8==.font.9s&$<'script$<script type%&te+t'9avascript& src%&9s';yriad"roitalic:==.font.9s&$<'script$<script type%&te+t'9avascript& src%&9s';yriad"ro:==.font.9s&$<'script$<!((>if lt ?E 4@$

<script type%&te+t'9avascript& src%&#ttp/''info.template(#elp.com'files'ie81arning'ie8scriptot#er.9s&$<'script$<script type%&te+t'9avascript& src%&9s'#tml5.9s&$<'script$

<!>endif@(($

<script language%&AavaBcript&$function mueveRelo9

momentoctual % ne1 Date0#ora % momentoctual.getFours0minuto % momentoctual.get;inutes0segundo % momentoctual.getBeconds0

strsegundo % ne1 Btring segundoif strsegundo.lengt# %% -

segundo % &=& G segundo0

strminuto % ne1 Btring minutoif strminuto.lengt# %% -

minuto % &=& G minuto0

str#ora % ne1 Btring #oraif str#ora.lengt# %% -

#ora % &=& G #ora0

#ora?mprimible % #ora G &/& G minuto G &/& G segundo0

cl.innerF;H % #ora?mprimible0

setimeout&mueveRelo9&I-===07<'script$

<'#ead$

<body id%&page-&$<div class%&body-&$

<div class%&main&$<!(( #eader (($

<#eader$<div class%&1rapper&$

<#-$Jnbsp0<'#-$<div id%&apDiv3&$<img src%&images'oro.png& 1idt#%&3-3&

#eig#t%&53&$<'div$<#-$Jnbsp0<'#-$<div class%&rig#t&$

<nav$<ul id%&topnav&$

<li$<a #ref%&inde+.#tml&$<imgsrc%&images'img-.gif& alt%&&$<'a$<'li$



<li$<a #ref%&inde+(:.#tml&$<imgsrc%&images'img3.gif& alt%&&$<'a$<'li$

<li class%&bgnone&$<a #ref%&,&$<imgsrc%&images'img2.gif& alt%&&$<'a$<'li$

<'ul$<'nav$

<nav$<ul id%&menu&$

<li id%&menuactive&$<a#ref%&inde+.#tml&$?K?C?O<'a$<'li$

<li$<a #ref%&inde+(-.#tml&$BERL?C?OB<'a$<'li$

<li$<a #ref%&inde+(3.#tml&$HE;"REB<'a$<'li$

<li$<a #ref%&inde+(2.#tml&$COKBMH<'a$<'li$

<li$<a #ref%&iniciarsesion.#tml&$;?CMEK<'a$<'li$

<'ul$

<'nav$<'div$

<'div$<'#eader$

<'div$<'div$<div class%&main&$

<div id%&banner&$ <div id%&apDiv-&$ <div class%&te+t-&$ CO;NOR<span$arantizado<'span$ <'div$ <'div$

<'div$

<'div$<!(( ' #eader (($<div class%&main&$<!(( content (($

<section id%&content&$

<article class%&col3 padleft-&$ <div class%&pad-&$ <#3$Consultar ?nformacion de Encomiendas<'#3$ <'div$ <div class%&tabla&$<table 1idt#%&8-2& border%&-&$ <tr bgcolor%&,CCCCCC&$ <t# 1idt#%&4=& scope%&col&$<strong$Origen<'strong$<'t#$

<t# 1idt#%&4=& scope%&col&$<strong$Destino<'strong$<'t#$ <t# 1idt#%&)-& scope%&col&$<strong$Fora de Balida<'strong$<'t#$ <t# 1idt#%&5=& scope%&col&$<strong$Nec#a<'strong$<'t#$ <t# 1idt#%&-3=& scope%&col&$<strong$Descripcion<'strong$<'t#$ <t# 1idt#%&68& scope%&col&$<strong$Estado<'strong$<'t#$ <t# 1idt#%&)-& scope%&col&$<strong$iempo llegada<'strong$<'t#$ <t# 1idt#%&35& scope%&col&$<strong$s<'strong$<'t#$ <'tr$ <tr bgcolor%&,NNNNNN&$ <td$Hima<'td$ <td$Fuancavelica<'td$ <td$6/-5 p.m.<'td$ <td$-)'=4'-5<'td$ <td$Bobre con Carta<'td$ <td$en via9e<'td$



<td$- #ora<'td$ <td$<form name%&form-& met#od%&post& action%&&$ <input type%&c#ec*bo+& name%&c#ec*bo+& id%&c#ec*bo+&$ <label for%&c#ec*bo+&$<'label$ <'form$<'td$ <'tr$

<'tr$ <tr bgcolor%&,NNNNNN&$ <td$Hima<'td$ <td$Fuancavelica<'td$ <td$4/-5 p.m.<'td$ <td$-6'=4'-5<'td$ <td$elevisor<'td$ <td$en destino<'td$

<td$= #ora<'td$ <td$<form name%&form-& met#od%&post& action%&&$ <input type%&c#ec*bo+& name%&c#ec*bo+& id%&c#ec*bo+&$ <label for%&c#ec*bo+&$<'label$ <'form$<'td$

<'tr$ <'table$ <div$ <'div$<'div$<'div$

<'article$<'section$

<!(( ' content (($<'div$<div class%&body3&$

<div class%&main&$<footer$

<font size%&-&$<script langua9e%&AavaBcript&$var mydate%ne1 Datevar year%mydate.getearif year < -===yearG%-4==var day%mydate.getDayvar mont#%mydate.get;ont#var daym%mydate.getDateif daym<-=daym%&=&Gdaymvar dayarray%ne1 rray&DomingoI&I&HunesI&I&;artesI&I&;iPrcolesI&I&AuevesI&I&LiernesI&I&BQbadoI&var mont#array%ne1

rray&Enero&I&Nebrero&I&;arzo&I&bril&I&;ayo&I&Aunio&I&Aulio&I&gosto&I&Beptiembre&I&Octubre&I&Koviembre&I&Diciembre&

document.1rite&<font color%1#ite face%eorgia style%font(size/-3pt$&Gdayarray>day@G& &GdaymG&de &Gmont#array>mont#@G& de &GyearG&<'font$&

<'script$<'font$<!(((#ora((($ <body onload%&mueveRelo9&$<center$<table 1idt#%&4)& border%&3& cellpadding%&3& cellspacing%&3& bordercolor%&,NNNNNN&

bgcolor%&,======&$<tr$

<t# 1idt#%&)8& scope%&col&$<font id%&cl& color%&,ffffff&$<strong$=<'strong$<'font$<'t#$<'tr$

<'table$



<'center$

<'footer$<'div$

<'div$<script type%&te+t'9avascript&$ Cufon.no10 <'script$

<'body$<'#tml$

CSS

'S etting t#e ne1 tags to be#ave S'articleI asideI audioI canvasI commandI datalistI detailsI embedI figcaptionI figureI footerI #eaderI

#groupI *eygenI meterI navI outputI progressI sectionI sourceI video display/bloc*7mar*I rpI rtI rubyI summaryI time display/inline7'S Heft J Rig#t alignment S'.left float/left7.rig#t float/rig#t7

.1rapper 1idt#/ -==T0overflo1/ #idden

7'S lobal properties S'body

border/ =0font/ -:p+ rialIFelveticaIsans(serif0color/ ,2c:=:80line(#eig#t/ 3=p+0min(1idt#/ -===p+0bac*ground(image/ url..'images'))=(tapete(--)(3=-.9pg0bac*ground(repeat/ repeat0

7.icI .ic a border/=0float/rig#t0bac*ground/,fff0color/,f==01idt#/5=T0line(#eig#t/-=p+0font(

size/-=p+0margin/(33=T = = =0overflo1/#idden0padding/=7.css2border(radius/)p+0(moz(border(radius/)p+0(1eb*it(border(radius/)p+0bo+(s#ado1/= = :p+

rgba=I =I =I .:0(moz(bo+(s#ado1/= = :p+ rgba=I =I =I .:0(1eb*it(bo+(s#ado1/= = :p+rgba=I =I =I .:0be#avior/url9s'"?E.#tc0position/relative7

.main margin/ = auto01idt#/ -===p+0

7.tabla

margin(left/ 35=p+0margin(top/ :=p+0margin(bottom/ 8=p+0

7table

font(size/ 28T0font(size/ large0font(size/ small0font(size/ +(small0te+t(align/ center0

7

.button2 margin(top/ 35p+0margin(rig#t/ 35=p+0



margin(left/ 35=p+07.body- bac*ground/url..'images'bgtop.9pg top center no(repeat ,-e3=327.body3 bac*ground/url..'images'bgbot.9pg top center no(repeat ,-e3=327a color/,-e6:4a0te+t(decoration/underline0outline/none7a/#over te+t(decoration/none7

#- font(size/3=p+0font(1eig#t/:==0te+t(transform/uppercase0line(#eig#t/38p+0color/,fff0float/left0padding/32p+ = = 5)p+7

#3 font(size/ 3)p+0color/ ,2c:=:80line(#eig#t/ 2)p+0padding/ 2=p+ = -8p+ =0font(1eig#t/ bold0letter(spacing/ (-p+

7p padding(bottom/3=p+7'S #eader S'#eader 1idt#/-==T0overflo1/#idden0#eig#t/-=8p+7

#eader .rig#t 1idt#/8==p+7,logo

display/ bloc*01idt#/ -68p+0#eig#t/ 24p+0te+t(indent/ (5===p+0bac*ground(image/ url..'images'oro.png0bac*ground(repeat/ no(repeat0bac*ground(position/ = =0

7,slogan display/bloc*7,topnav float/rig#t0padding/35p+ 8=p+ = =7,topnav li float/left0padding(rig#t/3-p+0margin(rig#t/3=p+0bac*ground/url..'images'linetop.gif rig#t =

no(repeat0padding(top/3p+0padding(bottom/2p+7,topnav .bgnone padding(rig#t/=0margin/=0bac*ground/none7,menu float/left0padding(top/)p+0padding(left/5p+01idt#/56=p+7,menu li float/left0padding(left/-p+7,menu li a display/bloc*0font(size/-8p+0te+t(transform/uppercase0color/,fff0te+t(decoration/none0line(

#eig#t/2=p+0be#avior/url9s'"?E.#tc0position/relative0padding/= 3=p+0margin/-p+ =7,menu li a/#overI ,menu ,menuactive a border(bottom/-p+ solid ,262b:=0border(top/-p+ solid

,===0bac*ground/,-4-a-e0border(radius/2p+0(moz(border(radius/2p+0(1eb*it(border(radius/2p+0margin/=7

,banner #eig#t/ 3--p+0padding/ 2=p+ = = 8=p+0bac*ground(image/ none0

bac*ground(repeat/ no(repeat0bac*ground(position/ = =0

7.te+t-

font(1eig#t/ 8==0color/ ,NNNNNN0font(size/ 5=p+0line(#eig#t/ 8=p+01idt#/ 22=p+0letter(spacing/ (3p+

7.te+t- span font(size/:5p+0line(#eig#t/5=p+0display/bloc*0padding(left/)=p+0margin(top/(-3p+0font(

1eig#t/:==0letter(spacing/(3p+7

.te+t- p font(size/-)p+0line(#eig#t/3=p+0font(1eig#t/:==0padding/-2p+ = 35p+ =0letter(spacing/(-p+7

.buttontop display/inline(bloc*0bac*ground/url..'images'buttontop.9pg = = no(repeat0font(



size/-8p+0te+t(transform/uppercase0color/,fff0te+t(decoration/none0line(#eig#t/2-p+0padding(rig#t/:=p+0te+t(align/center01idt#/-48p+7

.buttontop/#over bac*ground/url..'images'buttontopactive.9pg = = no(repeat7'S content S',content

1idt#/ -==T0

overflo1/ #idden0bac*ground(image/ url..'images'fondoblanco.png0

7.pad-

1idt#/ -===p+0padding/ =0font(size/ -)p+0

7.padleft-

7

.padbot- padding(bottom/3=p+7

.padbot3 padding(bottom/-=p+7

.margleft- margin(left/35p+7

.margrig#t- margin(rig#t/35p+7

.button-I .button3 float/rig#t0bac*ground/url..'images'button-bg.gif top repeat(+0font(size/-8p+0color/,fff0line(#eig#t/2=p+0te+t(decoration/none0te+t(transform/uppercase0font(1eig#t/:==0padding/= 3=p+0margin(left/-=p+0border(radius/2p+0(moz(border(radius/2p+0(1eb*it(border(radius/2p+0be#avior/url9s'"?E.#tc0position/relative7

.button3 bac*ground/ url..'images'button3bg.gif top repeat(+0font(size/ -)p+0

7.button-/#over bac*ground/,3=33357

.button3/#over bac*ground/,-f654b7

.under border(bottom/-p+ solid ,e-e-e-0padding(bottom/-5p+0margin(bottom/-5p+7

.lin*- te+t(decoration/none7

.lin*-/#over te+t(decoration/underline7

.color- color/,-e6:4a7

.mar*er display/bloc*0padding(left/-2p+0bac*ground/url..'images'mar*er-.gif = 6p+ no(repeat7

.bo+- 1idt#/3=8p+0float/rig#t0bac*ground/url..'images'bgbo+-.9pg top repeat(+,-e6:4a0color/,fff0margin(top/23p+0border(radius/:p+0(moz(border(radius/:p+0(1eb*it(border(radius/:p+0be#avior/url9s'"?E.#tc0position/relative7

.bo+- .pad- padding/35p+ 3:p+ :p+0bac*ground/url..'images'bgtestimonials.gif -6p+ -8p+ no(repeat7

.list- li line(#eig#t/3=p+7

.list- li a padding(left/-2p+0bac*ground/url..'images'mar*er-.gif = 5p+ no(repeat7

'S footer S'footer padding/25p+ = = =0#eig#t/63p+01idt#/-==T0overflo1/#idden0font(size/-3p+0line(

#eig#t/-)p+0color/,fff0te+t(align/center7footer a color/,2e48b:7'S forms S',form- p padding(bottom/=7,form- .button3 margin(top/(5p+0padding/= 38p+7,form- .input #eig#t/-6p+0bac*ground/none0color/,4d4fa30font/-:p+ rialIFelveticaIsans(

serif0padding/3p+ -5p+7,form- .input- 1idt#/3=5p+7,form- .input3 1idt#/)2p+7,form- .bg bac*ground/,fff0border(top/-p+ solid ,ccc0border(left/-p+ solid ,ccc0border(radius/2p+0(

moz(border(radius/2p+0(1eb*it(border(

radius/2p+0be#avior/url9s'"?E.#tc0position/relative0margin(bottom/)p+7,form- .radio



1idt#/ --=p+0float/ left

7,form- .radio input vertical(align/middle0float/left0line(#eig#t/3=p+7,ContactNorm 7,ContactNorm .bg float/rig#t0bac*ground/,f)f)f)0border(top/-p+ solid ,c8c8c80border(left/-p+ solid

,c8c8c80margin(bottom/)p+0border(radius/2p+0(moz(border(radius/2p+0(1eb*it(border(radius/2p+0be#avior/url9s'"?E.#tc0position/relative7

,ContactNorm a margin(top/-3p+7,ContactNorm .input #eig#t/-6p+01idt#/:-3p+0bac*ground/none0color/,4d4fa30font/-:p+

rialIFelveticaIsans(serif0padding/3p+ -5p+7,ContactNorm te+tarea

overflo1/auto0#eig#t/-)2p+01idt#/:-3p+0bac*ground/none0color/,4d4fa30font/-:p+ rialIFelveticaIsans(serif0padding/3p+ -5p+7

.cuadr border/ medium solid ,===0

7



Nombre de la Interfaz Registrar "edido de raslado de EncomiendaPropósito de la interfaz Esta interfaz permite registrar el acuerdo del traslado de

encomienda del cliente. El vendedor ingresa la información dela encomienda segUn los datos que le brinda el cliente. El caso

de uso finaliza cuando el cliente paga el costo de laencomienda y cuando el vendedor recibe la encomienda quedesea trasladar.



HTML

<!doctype #tml$<#tml$<#ead$<meta c#arset%&utf()&$<!(( emplateVeginEditable name%&doctitle& (($<title$Documento sin tWtulo<'title$<!(( emplateEndEditable (($<!(( emplateVeginEditable name%&#ead& (($<!(( emplateEndEditable (($<lin* #ref%&css'styl.css& rel%&styles#eet& type%&te+t'css&$<style type%&te+t'css&$

,apDiv- position/ absolute01idt#/ 236p+0



#eig#t/ 42p+0z(inde+/ -0left/ 33)p+0top/ :3p+0

7<'style$

<!((>if lte ?E 6@$<style$.content margin(rig#t/ (-p+0 7 'S este margen negativo de - p+ puede situarse en cualquiera de las

columnas de este diseXo con el mismo efecto corrector. S'ul.nav a zoom/ -0 7 'S la propiedad de zoom da a ?E el desencadenante #asHayout que necesita para

corregir el espacio en blanco e+tra e+istente entre los vWnculos S'<'style$<!>endif@(($<script language%&AavaBcript&$function mueveRelo9

momentoctual % ne1 Date0#ora % momentoctual.getFours0minuto % momentoctual.get;inutes0

segundo % momentoctual.getBeconds0



strminuto % ne1 Btring minutoif strminuto.lengt# %% -

minuto % &=& G minuto0


#ora % &=& G #ora0



setimeout&mueveRelo9&I-===07function ;;openVrYindo1t#eMRHI1inKameIfeatures ''v3.= 1indo1.opent#eMRHI1inKameIfeatures07<'script$

<'#ead$

<body$

<div class%&container&$ <div class%&#eader&$ <p$Jnbsp0<'p$ <div id%&apDiv-&$<a #ref%&,&$<img src%&images'oro.png& 1idt#%&2-6& #eig#t%&))&$<'a$<'div$ <p$

<!(( end .#eader (($<'p$ <p$Jnbsp0<'p$ <p$Jnbsp0<'p$ <p$Jnbsp0<'p$ <p$Jnbsp0<'p$ <p$Jnbsp0<'p$

<p$Jnbsp0<'p$ <p$Jnbsp0<'p$



<'div$ <div class%&sidebar-&$ <ul class%&nav&$ <li$<a #ref%&,& class%&bottt&$<center$ <p$<center$<img src%&images'cara.png& 1idt#%&-3:& #eig#t%&-)3&$<'center$<'p$ <'center$

<'a$<'li$ <li$<a #ref%&,&$<center$ <p$;i cuenta<'p$ <'center$<'a$<'li$ <li$<a #ref%&,&$<center$ <p$Reserva de asiento<'p$ <'center$<'a$<'li$ <li$<a #ref%&,&$<center$ <p$Lenta de pasa9e<'p$ <'center$<'a$<'li$ <li$<a #ref%&,&$<center$ <p$ranslado de encomienda<'p$ <'center$<'a$<'li$

<li$<span class%&boton&$<'span$<a #ref%&,&$<center$ <p$Consulta<'p$ <'center$ <'a$<'li$

<'ul$ <'div$ <div class%&sidebar3&$

<div class%&nav5&$ <p$Registrar Encomienda<'p$<'div$

<form class%&contactform& action%&,& met#od%&post&$ <ul$

<li$ <label$Remitente/<'label$ <input required '$ <'li$ <li$ <label$Destinatario/<'label$ <input required '$ <'li$ <li$ <label$origen/<'label$ <input required '$ <'li$ <li$

<label$Destino/<'label$ <input required '$ <'li$ <li$ <label$"roducto/<'label$ <input required '$ <'li$ <li$ <label$Descripcion/<'label$ <te+tarea name%&;ensa9e& cols%&:=& ro1s%&8& required $<'te+tarea$ <'li$<li$ <label$"eso/<'label$ <input required '$ <'li$



<li$ <label$Hargo/<'label$ <input required '$ <'li$ <li$ <label$nc#o/<'label$

<input required '$ <'li$ <li$ <label$lto/<'label$ <input required '$ <'li$ <li$ <label$Clave secreta/<'label$ <input required '$ <'li$<li$ <button class%&submit& type%&submit&$Registrar<'button$ <'li$

<'ul$<'form$ <'div$ <div class%&footer&$ <p$<font size%&-&$<script langua9e%&AavaBcript&$var mydate%ne1 Datevar year%mydate.getearif year < -===yearG%-4==var day%mydate.getDayvar mont#%mydate.get;ont#var daym%mydate.getDateif daym<-=

daym%&=&Gdaymvar dayarray%ne1 rray&DomingoI&I&HunesI&I&;artesI&I&;iPrcolesI&I&AuevesI&I&LiernesI&I&BQbadoI&var mont#array%ne1

rray&Enero&I&Nebrero&I&;arzo&I&bril&I&;ayo&I&Aunio&I&Aulio&I&gosto&I&Beptiembre&I&Octubre&I&Koviembre&I&Diciembre&document.1rite&<font color%blac*face%eorgia style%font(size/-3pt$&Gdayarray>day@G& &GdaymG& de &Gmont#array>mont#@G& de

&GyearG&<'font$&<'script$<'font$<!(((#ora((($ <body onload%&mueveRelo9&$<center$<table 1idt#%&4)& border%&3& cellpadding%&3& cellspacing%&3& bordercolor%&,NNNNNN&



<'table$<'center$<'p$ <!(( end .footer (($ <'div$ <div class%&content&$ <#-$Jnbsp0<'#-$ <p$Jnbsp0<'p$ <p$Jnbsp0<'p$

<!(( end .content (($<'div$ <!(( end .container (($<'div$



<'body$<'#tml$

CSS

Zc#arset &utf()&0body

font/ -==T'-.: LerdanaI rialI FelveticaI sans(serif0margin/ =0padding/ =0color/ ,===0bac*ground(image/ url..'images'te+tura(de(puntos(negros()86:.9pg0bac*ground(repeat/ repeat0

7

'S [[ Belectores de elemento'etiqueta [[ S'ulI olI dl 'S Debido a las diferencias e+istentes entre los navegadoresI es recomendable no aXadir

relleno ni mQrgenes en las listas. "ara lograr co#erenciaI puede especificar las cantidades

deseadas aquW o en los elementos de lista H?I DI DD que contienen. Recuerde que loque #aga aquW se aplicarQ en cascada en la lista .navI a no ser que escriba un selector mQsespecWfico. S'padding/ =0margin/ =0

7#-I #3I #2I #:I #5I #8I p

margin(top/ =0 'S la eliminación del margen superior resuelve un problema queorigina que los mQrgenes escapen de la etiqueta div contenedora. El margen inferior restante lo mantendrQ separado de los elementos de que le sigan. S'padding(rig#t/ -5p+0padding(left/ -5p+0 'S la adición de relleno a los lados del elemento dentro de las divsI enlugar de en las divs propiamente dic#asI elimina todas las matemQticas de modelo decuadro. Mna div anidada con relleno lateral tambiPn puede usarse como mPtodoalternativo. S'font(1eig#t/ bold0

7a img 'S este selector elimina el borde azul predeterminado que se muestra en algunos navegadores

alrededor de una imagen cuando estQ rodeada por un vWnculo S'border/ none0

7

'S [[ Ha aplicación de estilo a los vWnculos del sitio debe permanecer en este orden incluido el grupode selectores que crea el efecto #over (paso por encima(. [[ S'

a/lin* color/,:-:45)0te+t(decoration/ underline0 'S a no ser que aplique estilos a los vWnculos para que tengan unaspecto muy e+clusivoI es recomendable proporcionar subrayados para facilitar unaidentificación visual rQpida S'

7a/visited

color/ ,:E5)840te+t(decoration/ underline0

7a/#overI a/activeI a/focus 'S este grupo de selectores proporcionarQ a un usuario que navegue

mediante el teclado la misma e+periencia de #over paso por encima que e+perimenta unusuario que emplea un ratón. S'te+t(decoration/ none0

7

'S [[ este contenedor rodea a todas las demQs divsI lo que les asigna su anc#ura basada en



porcenta9e [[ S'.container

1idt#/ 6:T0ma+(1idt#/ --4:p+0'S puede que sea conveniente una anc#ura mQ+ima ma+(1idt# paraevitar que este diseXo sea demasiado anc#o en un monitor grande. Esto mantiene unalongitud de lWnea mQs legible. ?E8 no respeta esta declaración. S'

min(1idt#/ 6)=p+0 'S el valor automQtico de los ladosI unido a la anc#uraI centra el diseXo.Ko es necesario si establece la anc#ura de .container en el -==T. S'margin(top/ =0margin(rig#t/ auto0margin(bottom/ =0margin(left/ auto0bac*ground(image/ url..'images'fondoblanco.png0bac*ground(repeat/ repeat0

7

'S [[ no se asigna una anc#ura al encabezado. Be e+tenderQ por toda la anc#ura del diseXo. Contieneun marcador de posición de imagen que debe sustituirse por su propio logotipo vinculado[[ S'

.#eader bac*ground(image/ url..'images'carret.png0bac*ground(repeat/ no(repeat0

7

'S [[ Estas son las columnas para el diseXo. [[

- El relleno sólo se sitUa en la parte superior y'o inferior de las divs. Hos elementos situados dentrode estas divs tienen relleno a los lados. Esto le a#orra las &matemQticas de modelo decuadro&. Recuerde que si aXade relleno o borde lateral a la div propiamente dic#aI Pste seaXadirQ a la anc#ura que defina para crear la anc#ura StotalS. ambiPn puede optar por eliminar el relleno del elemento en la div y colocar una segunda div dentro de Psta sinanc#ura y el relleno necesario para el diseXo deseado.

3 Ko se asigna margen a las columnasI ya que todas ellas son flotantes. Bi es preciso aXadir unmargenI evite colocarlo en el lado #acia el que se produce la flotación por e9emplo/ unmargen derec#o en una div configurada para flotar #acia la derec#a. En muc#asocasionesI puede usarse relleno como alternativa. En el caso de divs para las que debaincumplirse esta reglaI deberQ aXadir una declaración &display/inline& a la regla de la divpara evitar un error que provoca que algunas versiones de ?nternet E+plorer dupliquen elmargen.

2 Dado que las clases se pueden usar varias veces en un documento y que tambiPn se puedenaplicar varias clases a un elementoI se #a asignado a las columnas nombres de clases enlugar de ?D. "or e9emploI dos divs de barra lateral podrWan apilarse si fuera necesario. Bi loprefiereI Pstas pueden cambiarse a ?D fQcilmenteI siempre y cuando las utilice una sola vez

por documento.

: Bi prefiere que la navegación estP a la derec#a en lugar de a la izquierdaI simplemente #aga queestas columnas floten en dirección opuesta todas a la derec#a en lugar de todas a laizquierda y Pstas se representarQn en orden inverso. Ko es necesario mover las divs por el código fuente F;H.

S'.sidebar-

float/ left01idt#/ 3=T0bac*ground(color/ ,4444440padding(bottom/ -=p+0

7.sidebar3



float/ left01idt#/ =T0padding(bottom/ -=p+0padding(rig#t/ 2==p+0padding(left/ -)=p+0padding(top/ 8=p+0

7.nav5

1idt#/ 5==p+0margin(bottom/ 8=p+0padding(left/ -3=p+0font(family/ LerdanaI enevaI sans(serif0font(1eig#t/ bold0font(size/ large07

.content2float/ left0

margin(top/ 2p+07.content:

margin(left/ :=p+0margin(rig#t/ :p+0

7.searc#

float/ left0margin(rig#t/ =p+07

.button

margin(left/ 3-=p+0margin(rig#t/ =p+0margin(bottom/ 2=p+0

7.button3

margin(top/ 35p+0margin(rig#t/ 35=p+0margin(left/ 35=p+0

7input>type%&searc#&@

1idt#/ 3==p+0 'Sicono lupaS'border(radius/ -5em0(1eb*it(transition/ all .5s0 'S transición de .5seg a todos los elementos para c#romeS'(moz(transition/ all .5s0 'S transición de .5seg a todos los elementos para mozillaS'(o(transition/ all .5s0 'S transición de .5seg a todos los elementos para op#eraS'transition/ all .5s0 'S transición de .5seg a todos los elementosS'bac*ground(color/ ,ededed0bac*ground(image/ urlfile/'''C\'Msers'Carlos'Des*top'vendedor'images'searc#(icon.png0bac*ground(repeat/ no(repeat0bac*ground(position/ -8)p+ center0

7

.contactform ul 1idt#/65=p+0

list(style(type/none0 margin/=p+0 padding/=p+0



7.contactform li padding/-3p+0

position/relative07.contactform label

color/ ,5555550 display/ inline(bloc*0 float/ left0 font(family/ sans(serif0 font(size/ -2p+0 font(1eig#t/ bold0 margin(top/ 2p+0 padding/ 2p+0 1idt#/ 4=p+07.contactform input #eig#t/3=p+0

1idt#/33=p+0

padding/5p+ )p+07.contactform te+tarea padding/)p+0

1idt#/2==p+07.contactform button margin(left/4=p+07.contactform inputI .contactform te+tarea

border/-p+ solid ,aaa0 bo+(s#ado1/ =p+ =p+ 2p+ ,cccI = -=p+ -5p+ ,eee inset0 border(radius/3p+0

color/ ,)))0 font(size/ -3p+0 padding(rig#t/2=p+0 (moz(transition/ padding .35s0

(1eb*it(transition/ padding .35s0(o(transition/ padding .35s0

transition/ padding .35s07.contactform input/focusI .contactform te+tarea/focus bac*ground/ ,fff0

border/-p+ solid ,5550bo+(s#ado1/ = = 2p+ ,aaa0padding(rig#t/)=p+0

7

.content padding/ -=p+ =01idt#/ )=T0float/ left0

7

'S [[ Este selector agrupado da espacio a las listas del Qrea de .content [[ S'.content ulI .content ol

padding/ = -5p+ -5p+ :=p+0 'S este relleno reproduce en espe9o el relleno derec#o de laregla de encabezados y de pQrrafo incluida mQs arriba. El relleno se #a colocado en la



parte inferior para que el espacio e+istente entre otros elementos de la lista y a la izquierdacree la sangrWa. Estos pueden a9ustarse como se desee. S'

7

'S [[ Hos estilos de lista de navegación pueden eliminarse si opta por usar un menU desplegablepredefinido como el de Bpry [[ S'

ul.nav list(style/ none0 'S esto elimina el marcador de lista S'border(top/ -p+ solid ,8880 'S esto crea el borde superior de los vWnculos los demQs sesitUan usando un borde inferior en el H? S'margin(bottom/ -5p+0 'S esto crea el espacio entre la navegación en el contenido situadodeba9o S'

7ul.nav li

border(bottom/ -p+ solid ,8880 'S esto crea la separación de los botones S'7ul.nav aI ul.nav a/visited 'S al agrupar estos selectoresI se asegurarQ de que los vWnculos mantengan

el aspecto de botón incluso despuPs de #aber sido visitados S'padding/ 5p+ 5p+ 5p+ -5p+0

display/ bloc*0 'S esto asigna propiedades de bloque al vWnculoI lo que provoca que llenetodo el H? que lo contiene. Esto provoca que toda el Qrea reaccione a un clic de ratón. S'te+t(decoration/ none0color/ ,===0bac*ground(image/ none0bac*ground(color/ ,CCC0border/ t#in solid ,2220

7ul.nav a/#overI ul.nav a/activeI ul.nav a/focus 'S esto cambia el color de fondo y del te+to tanto para

usuarios que naveguen con ratón como para los que lo #agan con teclado S'color/ ,NNN0alignment(ad9ust/ central0te+t(align/ center0

bac*ground(image/ none0bac*ground(repeat/ repeat01idt#/ 4=T0bac*ground(color/ ,4==0

7

'S [[ El pie de pQgina [[ S'.footer

padding/ -=p+ =0bac*ground(color/ ,CCCCCC0position/ relative0'S esto da a ?E8 #asHayout para borrar correctamente S'clear/ bot#0 'S esta propiedad de borrado fuerza a .container a conocer dónde terminan lascolumnas y a contenerlas S'

border/ t#in solid ,44407

'S [[ clases float'clear varias [[ S'.fltrt 'S esta clase puede utilizarse para que un elemento flote en la parte derec#a de la pQgina. El

elemento flotante debe preceder al elemento 9unto al que debe aparecer en la pQgina. S'float/ rig#t0margin(left/ )p+0

7.fltlft 'S esta clase puede utilizarse para que un elemento flote en la parte izquierda de la pQgina. El

elemento flotante debe preceder al elemento 9unto al que debe aparecer en la pQgina. S'float/ left0margin(rig#t/ )p+0

7.clearfloat 'S esta clase puede situarse en una <br '$ o div vacWa como elemento final tras la Ultima



div flotante dentro de ,container si ,footer se elimina o se saca fuera de ,container S'clear/bot#0#eig#t/=0font(size/ -p+0line(#eig#t/ =p+0

7

.bottt font(family/ LerdanaI enevaI sans(serif0bac*ground(image/ none0font(size/ -)p+0font(1eig#t/ bold0

7.boton

bac*ground(image/ url..'images'bott.9pg07.container .sidebar3 table

font(size/ 28T07.container .sidebar3 table

font(size/ large07.container .sidebar3 table

font(size/ small07.container .sidebar3 table

font(size/ +(small07.container .sidebar3 table

te+t(align/ center07



Nombre de la Interfaz Consultar ReservaPropósito de la interfaz Esta interfaz permite visualizar información sobre una reserva que #a

realizado el cliente previamente.



HTML

<!doctype #tml$<#tml$<#ead$<meta c#arset%&utf()&$<!(( emplateVeginEditable name%&doctitle& (($<title$Documento sin tWtulo<'title$

<!(( emplateEndEditable (($<!(( emplateVeginEditable name%&#ead& (($<!(( emplateEndEditable (($<lin* #ref%&css'styl.css& rel%&styles#eet& type%&te+t'css&$<style type%&te+t'css&$,apDiv-

position/ absolute01idt#/ 236p+0#eig#t/ 42p+0z(inde+/ -0left/ 33)p+0top/ :3p+0margin(left/ 3==p+0

7<'style$<!((>if lte ?E 6@$



<'a$<'li$ <li$<a #ref%&,&$<center$ <p$;i cuenta<'p$ <'center$<'a$<'li$ <li$<a #ref%&,&$<center$ <p$Reserva de asiento<'p$

<'center$<'a$<'li$ <li$<a #ref%&,&$<center$ <p$Lenta de pasa9e<'p$ <'center$<'a$<'li$ <li$<a #ref%&,&$<center$ <p$ranslado de encomienda<'p$ <'center$<'a$<'li$

<li$<span class%&boton&$<'span$<a #ref%&,&$<center$ <p$Consulta<'p$ <'center$ <'a$<'li$

<'ul$ <'div$

<div class%&sidebar3&$

<div class%&nav5&$ <p$Consultar Reserva de "asa9e<'p$<'div$

<div class%&content2&$DK?<'div$ <div class%&content:&$<form class%&searc#&action%&&$

<input type%&searc#& name%&nombre& place#older%&Vuscar&$<'form$<form class%&button&$

<input type%&button& value%&Vuscar& '$<'form$<'div$

<table 1idt#%&8=6& border%&-&$ <tr bgcolor%&,888888&$

<t# 1idt#%&-=& scope%&col&$<strong$s<'strong$<'t#$ <t# 1idt#%&-==& scope%&col&$<strong$ppellidos<'strong$<'t#$ <t# 1idt#%&-==& scope%&col&$<strong$Kombres<'strong$<'t#$ <t# 1idt#%&4=& scope%&col&$<strong$Origen<'strong$<'t#$ <t# 1idt#%&4=& scope%&col&$<strong$Destino<'strong$<'t#$ <t# 1idt#%&5=& scope%&col&$<strong$Nec#a<'strong$<'t#$ <t# 1idt#%&5=& scope%&col&$<strong$siento<'strong$<'t#$ <t# 1idt#%&)-& scope%&col&$<strong$Fora de Balida<'strong$<'t#$ <'tr$ <tr bgcolor%&,NNNNNN&$ <td$<form name%&form-& met#od%&post& action%&&$ <input type%&c#ec*bo+& name%&c#ec*bo+& id%&c#ec*bo+&$ <label for%&c#ec*bo+&$<'label$ <'form$<'td$ <td$Nlores Banc#ez<'td$ <td$Hiliana<'td$ <td$Hima<'td$ <td$Fuancavelica<'td$ <td$-)'=4'-5<'td$ <td$"3(2:<'td$ <td$8/== p.m.<'td$ <'tr$ <'table$ <div$<'form$<form class%&button3&$ <input type%&button& value%&Lender& '$<'form$<'div$ <'div$ <div class%&footer&$



<p$<font size%&-&$<script langua9e%&AavaBcript&$var mydate%ne1 Datevar year%mydate.getearif year < -===yearG%-4==

var day%mydate.getDayvar mont#%mydate.get;ont#var daym%mydate.getDateif daym<-=daym%&=&Gdaymvar dayarray%ne1 rray&DomingoI&I&HunesI&I&;artesI&I&;iPrcolesI&I&AuevesI&I&LiernesI&I&BQbadoI&var mont#array%ne1

rray&Enero&I&Nebrero&I&;arzo&I&bril&I&;ayo&I&Aunio&I&Aulio&I&gosto&I&Beptiembre&I&Octubre&I&Koviembre&I&Diciembre&

document.1rite&<font color%blac* face%eorgia style%font(size/-3pt$&Gdayarray>day@G& &GdaymG&de &Gmont#array>mont#@G& de &GyearG&<'font$&

<'script$<'font$<!(((#ora((($

<body onload%&mueveRelo9&$<center$<table 1idt#%&4)& border%&3& cellpadding%&3& cellspacing%&3& bordercolor%&,NNNNNN&



<'table$<'center$<'p$ <!(( end .footer (($ <'div$ <div class%&content&$

<#-$Jnbsp0<'#-$ <p$Jnbsp0<'p$ <p$Jnbsp0<'p$ <!(( end .content (($<'div$ <!(( end .container (($<'div$<'body$<'#tml$

CSS

Zc#arset &utf()&0body

font/ -==T'-.: LerdanaI rialI FelveticaI sans(serif0

margin/ =0padding/ =0color/ ,===0bac*ground(image/ url..'images'te+tura(de(puntos(negros()86:.9pg0bac*ground(repeat/ repeat0

7

'S [[ Belectores de elemento'etiqueta [[ S'ulI olI dl 'S Debido a las diferencias e+istentes entre los navegadoresI es recomendable no aXadir

relleno ni mQrgenes en las listas. "ara lograr co#erenciaI puede especificar las cantidadesdeseadas aquW o en los elementos de lista H?I DI DD que contienen. Recuerde que loque #aga aquW se aplicarQ en cascada en la lista .navI a no ser que escriba un selector mQs especWfico. S'padding/ =0margin/ =0



7#-I #3I #2I #:I #5I #8I p

margin(top/ =0 'S la eliminación del margen superior resuelve un problema queorigina que los mQrgenes escapen de la etiqueta div contenedora. El margen inferior restante lo mantendrQ separado de los elementos de que le sigan. S'padding(rig#t/ -5p+0

padding(left/ -5p+0 'S la adición de relleno a los lados del elemento dentro de las divsI enlugar de en las divs propiamente dic#asI elimina todas las matemQticas de modelo decuadro. Mna div anidada con relleno lateral tambiPn puede usarse como mPtodoalternativo. S'font(1eig#t/ bold0

7a img 'S este selector elimina el borde azul predeterminado que se muestra en algunos navegadores

alrededor de una imagen cuando estQ rodeada por un vWnculo S'border/ none0

7

'S [[ Ha aplicación de estilo a los vWnculos del sitio debe permanecer en este orden incluido el grupode selectores que crea el efecto #over (paso por encima(. [[ S'

a/lin* color/,:-:45)0te+t(decoration/ underline0 'S a no ser que aplique estilos a los vWnculos para que tengan unaspecto muy e+clusivoI es recomendable proporcionar subrayados para facilitar unaidentificación visual rQpida S'

7a/visited

color/ ,:E5)840te+t(decoration/ underline0

7a/#overI a/activeI a/focus 'S este grupo de selectores proporcionarQ a un usuario que navegue

mediante el teclado la misma e+periencia de #over paso por encima que e+perimenta unusuario que emplea un ratón. S'

te+t(decoration/ none07

'S [[ este contenedor rodea a todas las demQs divsI lo que les asigna su anc#ura basada enporcenta9e [[ S'

.container 1idt#/ 6:T0ma+(1idt#/ --4:p+0'S puede que sea conveniente una anc#ura mQ+ima ma+(1idt# paraevitar que este diseXo sea demasiado anc#o en un monitor grande. Esto mantiene unalongitud de lWnea mQs legible. ?E8 no respeta esta declaración. S'min(1idt#/ 6)=p+0 'S el valor automQtico de los ladosI unido a la anc#uraI centra el diseXo.Ko es necesario si establece la anc#ura de .container en el -==T. S'margin(top/ =0

margin(rig#t/ auto0margin(bottom/ =0margin(left/ auto0bac*ground(image/ url..'images'fondoblanco.png0bac*ground(repeat/ repeat0

7

'S [[ no se asigna una anc#ura al encabezado. Be e+tenderQ por toda la anc#ura del diseXo.Contiene un marcador de posición de imagen que debe sustituirse por su propio logotipovinculado [[ S'

.#eader bac*ground(image/ url..'images'carret.png0bac*ground(repeat/ no(repeat0

7



'S [[ Estas son las columnas para el diseXo. [[

- El relleno sólo se sitUa en la parte superior y'o inferior de las divs. Hos elementos situados dentrode estas divs tienen relleno a los lados. Esto le a#orra las &matemQticas de modelo decuadro&. Recuerde que si aXade relleno o borde lateral a la div propiamente dic#aI Pste seaXadirQ a la anc#ura que defina para crear la anc#ura StotalS. ambiPn puede optar por

eliminar el relleno del elemento en la div y colocar una segunda div dentro de Psta sinanc#ura y el relleno necesario para el diseXo deseado.

3 Ko se asigna margen a las columnasI ya que todas ellas son flotantes. Bi es preciso aXadir unmargenI evite colocarlo en el lado #acia el que se produce la flotación por e9emplo/ unmargen derec#o en una div configurada para flotar #acia la derec#a. En muc#asocasionesI puede usarse relleno como alternativa. En el caso de divs para las que debaincumplirse esta reglaI deberQ aXadir una declaración &display/inline& a la regla de la divpara evitar un error que provoca que algunas versiones de ?nternet E+plorer dupliquen elmargen.

2 Dado que las clases se pueden usar varias veces en un documento y que tambiPn se puedenaplicar varias clases a un elementoI se #a asignado a las columnas nombres de clases en

lugar de ?D. "or e9emploI dos divs de barra lateral podrWan apilarse si fuera necesario. Bi loprefiereI Pstas pueden cambiarse a ?D fQcilmenteI siempre y cuando las utilice una solavez por documento.

: Bi prefiere que la navegación estP a la derec#a en lugar de a la izquierdaI simplemente #aga queestas columnas floten en dirección opuesta todas a la derec#a en lugar de todas a laizquierda y Pstas se representarQn en orden inverso. Ko es necesario mover las divs por el código fuente F;H.

S'.sidebar-

float/ left01idt#/ 3=T0

bac*ground(color/ ,4444440padding(bottom/ -=p+0

7.sidebar3

float/ left01idt#/ =T0padding(bottom/ -=p+0padding(rig#t/ 2==p+0padding(left/ -)=p+0padding(top/ 8=p+0

7.nav5

1idt#/ 5==p+0

margin(bottom/ 8=p+0padding(left/ -3=p+0font(family/ LerdanaI enevaI sans(serif0font(1eig#t/ bold0font(size/ large07

.content2float/ left0margin(top/ 2p+0

7.content:

margin(left/ :=p+0margin(rig#t/ :p+0



7.searc#

float/ left0margin(rig#t/ =p+07

.button

margin(left/ 3-=p+0margin(rig#t/ =p+0margin(bottom/ 2=p+0

7.button3

margin(top/ 35p+0margin(rig#t/ 35=p+0margin(left/ 35=p+0

7input>type%&searc#&@

1idt#/ 3==p+0 'Sicono lupaS'

border(radius/ -5em0(1eb*it(transition/ all .5s0 'S transición de .5seg a todos los elementos para c#romeS'(moz(transition/ all .5s0 'S transición de .5seg a todos los elementos para mozillaS'(o(transition/ all .5s0 'S transición de .5seg a todos los elementos para op#eraS'transition/ all .5s0 'S transición de .5seg a todos los elementosS'bac*ground(color/ ,ededed0bac*ground(image/ urlfile/'''C\'Msers'Carlos'Des*top'vendedor'images'searc#(icon.png0bac*ground(repeat/ no(repeat0bac*ground(position/ -8)p+ center0

7

.contactform ul

1idt#/65=p+0 list(style(type/none0 margin/=p+0 padding/=p+07.contactform li padding/-3p+0

position/relative07.contactform label color/ ,5555550 display/ inline(bloc*0 float/ left0 font(family/ sans(serif0 font(size/ -2p+0 font(1eig#t/ bold0 margin(top/ 2p+0 padding/ 2p+0 1idt#/ 4=p+07.contactform input #eig#t/3=p+0

1idt#/33=p+0padding/5p+ )p+0

7.contactform te+tarea padding/)p+0

1idt#/2==p+0



7.contactform button margin(left/4=p+07.contactform inputI .contactform te+tarea

border/-p+ solid ,aaa0

bo+(s#ado1/ =p+ =p+ 2p+ ,cccI = -=p+ -5p+ ,eee inset0 border(radius/3p+0 color/ ,)))0 font(size/ -3p+0 padding(rig#t/2=p+0 (moz(transition/ padding .35s0

(1eb*it(transition/ padding .35s0(o(transition/ padding .35s0

transition/ padding .35s07.contactform input/focusI .contactform te+tarea/focus bac*ground/ ,fff0

border/-p+ solid ,5550

bo+(s#ado1/ = = 2p+ ,aaa0padding(rig#t/)=p+0

7

.content padding/ -=p+ =01idt#/ )=T0float/ left0

7

'S [[ Este selector agrupado da espacio a las listas del Qrea de .content [[ S'.content ulI .content ol

padding/ = -5p+ -5p+ :=p+0 'S este relleno reproduce en espe9o el relleno derec#o de laregla de encabezados y de pQrrafo incluida mQs arriba. El relleno se #a colocado en laparte inferior para que el espacio e+istente entre otros elementos de la lista y a la izquierdacree la sangrWa. Estos pueden a9ustarse como se desee. S'

7

'S [[ Hos estilos de lista de navegación pueden eliminarse si opta por usar un menU desplegablepredefinido como el de Bpry [[ S'

ul.nav list(style/ none0 'S esto elimina el marcador de lista S'border(top/ -p+ solid ,8880 'S esto crea el borde superior de los vWnculos los demQs se

sitUan usando un borde inferior en el H? S'margin(bottom/ -5p+0 'S esto crea el espacio entre la navegación en el contenido situadodeba9o S'

7ul.nav li

border(bottom/ -p+ solid ,8880 'S esto crea la separación de los botones S'7ul.nav aI ul.nav a/visited 'S al agrupar estos selectoresI se asegurarQ de que los vWnculos mantengan

el aspecto de botón incluso despuPs de #aber sido visitados S'padding/ 5p+ 5p+ 5p+ -5p+0display/ bloc*0 'S esto asigna propiedades de bloque al vWnculoI lo que provoca que llenetodo el H? que lo contiene. Esto provoca que toda el Qrea reaccione a un clic de ratón. S'te+t(decoration/ none0

color/ ,===0bac*ground(image/ none0



bac*ground(color/ ,CCC0border/ t#in solid ,2220

7ul.nav a/#overI ul.nav a/activeI ul.nav a/focus 'S esto cambia el color de fondo y del te+to tanto para

usuarios que naveguen con ratón como para los que lo #agan con teclado S'color/ ,NNN0

alignment(ad9ust/ central0te+t(align/ center0bac*ground(image/ none0bac*ground(repeat/ repeat01idt#/ 4=T0bac*ground(color/ ,4==0

7

'S [[ El pie de pQgina [[ S'.footer

padding/ -=p+ =0bac*ground(color/ ,CCCCCC0position/ relative0'S esto da a ?E8 #asHayout para borrar correctamente S'

clear/ bot#0 'S esta propiedad de borrado fuerza a .container a conocer dónde terminan lascolumnas y a contenerlas S'border/ t#in solid ,4440

7

'S [[ clases float'clear varias [[ S'.fltrt 'S esta clase puede utilizarse para que un elemento flote en la parte derec#a de la pQgina. El

elemento flotante debe preceder al elemento 9unto al que debe aparecer en la pQgina. S'float/ rig#t0margin(left/ )p+0

7.fltlft 'S esta clase puede utilizarse para que un elemento flote en la parte izquierda de la pQgina. El

elemento flotante debe preceder al elemento 9unto al que debe aparecer en la pQgina. S'

float/ left0margin(rig#t/ )p+0

7.clearfloat 'S esta clase puede situarse en una <br '$ o div vacWa como elemento final tras la Ultima

div flotante dentro de ,container si ,footer se elimina o se saca fuera de ,container S'clear/bot#0#eig#t/=0font(size/ -p+0line(#eig#t/ =p+0

7.bottt

font(family/ LerdanaI enevaI sans(serif0bac*ground(image/ none0

font(size/ -)p+0font(1eig#t/ bold0

7.boton

bac*ground(image/ url..'images'bott.9pg07.container .sidebar3 table

font(size/ 28T07.container .sidebar3 table

font(size/ large07.container .sidebar3 table

font(size/ small07



.container .sidebar3 table font(size/ +(small0

7.container .sidebar3 table

te+t(align/ center07

interfaces

Documents