Práctica 1 Web Responsiva

CARRERA:
INGENIERIA EN SISTEMAS COMPUTACIONALES
ASIGNATURA:
DESARROLLO DE APLICACIONES MOVILES BASADOS EN LA WEB
NOMBRE DE LA ACTIVIDAD:
PRACTICA 1
NOMBRE DEL ALUMNO:
ELIAN D’ JESUS CALDERON SALAS
SEMESTRE:
OCTAVO
GRUPO:
801 ZA
HTML
Después de pasar todo el código proporcionado por el maestro durante la
clase yo lo que hice fue hacer unos cambios en la pagina web y lo primero que
hice fue cambiar el color de texto.
Después cree una tabla en la cual se verían los equipos de clasificación de la
temporada.
Después de eso le agrege imágenes en la tabla en el cual utilice el
siguiente código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" type="text/css"
href="estiloresponsive.css">
</head>
<body>
<font color="Olive" face="Comic Sans MS,arial">
<div class="container">
<header>
<h1>DALE AZUL Y ORO</h1>
<header>
<font face="Comic Sans MS,arial">
El equipo mas apasionado de México
<nav>
<ul>
<li>LIGA MX</li>
<li>FEMENIL</li>
<li>PUMAS TABASCO</li>
<li>REDES SOCIALES</li>
</ul>
<ul>
<li>HISTORIA</li>
<li>VESTIMENTAS</li>
</ul>
</nav>
<section>
<p>
<div class="cp-card " data-stage-
content="iar5p1cvc1f0ijvfa38jyulm">
<table class="complete-positions-table">
<thead>
<tr class="cp-table-header">
<th class="cp-table-pointcell">POS</th>
<th>EQUIPO</th>
<th class="cp-table-pointcell"><abbr title="Partidos

jugados">PJ</abbr></th>
ganados">PG</abbr></th>
empatados">PE</abbr></th>
perdidos">PP</abbr></th>
<th class="cp-table-pointcell hidden-xs"><abbr
title="Goles a favor">GF</abbr></th>
title="Goles en contra">GC</abbr></th>
title="Diferencial de goles">DIF</abbr></th>
<th class="cp-table-pointcell"><abbr
title="Puntos">PTS</abbr></th>
</tr>
</thead>
<tbody>
<tr class="cp-team">
<td>1</td>
<td>
<div class="cp-team-info">
<img class="cp-team-info__img"
src="https://secure.omo.akamai.opta.net/image.php?secure=true&h=sec
ure.omo.akamai.opta.net&sport=football&entity=team&description=badg
es&dimensions=65&id=2ei66pjfsrr6uxqp1bywq31lo" alt="León">
<div class="cp-team-info__name ">
<span class="hidden-xs">LEÓN</span>
<span class="visible-xs">LEÓN</span>
</div>
</div>
</td>
<td>17</td>
<td>12</td>
<td>4</td>
<td>1</td>
<td class="hidden-xs">27</td>
<td class="hidden-xs">+13</td>
<td>40</td>
</tr>
<td>2</td>
<td>
es&dimensions=65&id=ayabrorjqa1bj7jk1fdqu1t57" alt="Pumas">
<div class="cp-team-info__name team-site ">
<span class="hidden-xs">PUMAS
UNAM</span>
<span class="visible-xs">PUMAS</span>
</div>
</div>
</td>
<td>17</td>
<td>8</td>
<td>8</td>
<td>1</td>
<td>32</td>
</tr>
<td>3</td>
<td>
es&dimensions=65&id=eu8c408f59yx7egaqossbv25e" alt="América">
<span class="hidden-xs">AMÉRICA</span>
<span class="visible-xs">AMÉRICA</span>
</div>
</div>
</td>
<td>17</td>
<td>9</td>
<td>5</td>
<td>3</td>
<td>32</td>
</tr>
<td>4</td>
<td>
es&dimensions=65&id=1aw67co8uut64yckd3wbhy9t2" alt="Cruz Azul">
<span class="hidden-xs">CRUZ AZUL</span>

<span class="visible-xs">CRUZ AZUL</span>
</div>
</div>
</td>
<td>17</td>
<td>9</td>
<td>2</td>
<td>6</td>
<td>29</td>
</tr>
<td>5</td>
<td>
es&dimensions=65&id=233335xtoe3e3phg3hp91xguq" alt="Monterrey">
<span class="hidden-xs">MONTERREY</span>
<span class="visible-xs">MONTERREY</span>
</div>
</div>
</td>
<td>17</td>
<td>8</td>
<td>5</td>
<td>4</td>
<td>29</td>
</tr>
<td>6</td>
<td>
es&dimensions=65&id=6hmo9mrlz73nwxkshwuu5vsfm" alt="Tigres">
<span class="hidden-xs">TIGRES UANL</span>

<span class="visible-xs">TIGRES</span>
</div>
</div>
</td>
<td>17</td>
<td>7</td>
<td>7</td>
<td>3</td>
<td>28</td>
</tr>
<td>7</td>
<td>
es&dimensions=65&id=e603sojy77s4u0ypqds2v2a1g"
alt="Guadalajara">
<span class="hidden-
xs">GUADALAJARA</span>
<span class="visible-
</div>
</div>
</td>
<td>17</td>
<td>7</td>
<td>5</td>
<td>5</td>
<td>26</td>
</tr>
<td>8</td>
<td>
es&dimensions=65&id=8yn3l36qkq1fxbw4ufmwyfyt9" alt="Santos
Laguna">
<span class="hidden-xs">SANTOS
LAGUNA</span>
<span class="visible-xs">SANTOS
LAGUNA</span>
</div>
</div>
</td>
<td>17</td>
<td>7</td>
<td>4</td>
<td>6</td>
<td>25</td>
</tr>
<td>9</td>
<td>
es&dimensions=65&id=cynfvfb31rml7xrlsnejf8r6j" alt="Pachuca">
<span class="hidden-xs">PACHUCA</span>
<span class="visible-xs">PACHUCA</span>
</div>
</div>
</td>
<td>17</td>
<td>6</td>
<td>7</td>
<td>4</td>
<td>25</td>
</tr>
<td>10</td>
<td>
es&dimensions=65&id=b7hn6knkuxbpj1i8rmzapns7b" alt="Necaxa">
<span class="hidden-xs">NECAXA</span>
<span class="visible-xs">NECAXA</span>
</div>
</div>
</td>
<td>17</td>
<td>7</td>
<td>3</td>
<td>7</td>
<td class="hidden-xs">-4</td>
<td>24</td>
</tr>
<td>11</td>
<td>
es&dimensions=65&id=3390h9hdgoxzzofnrpyktanuz" alt="Toluca">
<span class="hidden-xs">TOLUCA</span>
<span class="visible-xs">TOLUCA</span>
</div>
</div>
</td>
<td>17</td>
<td>6</td>
<td>3</td>
<td>8</td>
<td>21</td>
</tr>
<td>12</td>
<td>
es&dimensions=65&id=4kw25nmgmacpbvo24ttr994k5" alt="Puebla">
<span class="hidden-xs">PUEBLA</span>
<span class="visible-xs">PUEBLA</span>
</div>
</div>
</td>
<td>17</td>
<td>6</td>
<td>2</td>
<td>9</td>
<td>20</td>
</tr>
<td>13</td>
<td>
es&dimensions=65&id=ecphe4bqgmin2tzsohf50egvd" alt="Juárez">
<span class="hidden-xs">JUÁREZ</span>
<span class="visible-xs">JUÁREZ</span>
</div>
</div>
</td>
<td>17</td>
<td>4</td>
<td>7</td>
<td>6</td>
<td>19</td>
</tr>
<td>14</td>
<td>
es&dimensions=65&id=dsm1dxw4j3f973w7kzhe2n816" alt="Mazatlán">
<span class="hidden-xs">MAZATLÁN</span>
<span class="visible-xs">MAZATLÁN</span>
</div>
</div>
</td>
<td>17</td>
<td>4</td>
<td>4</td>
<td>9</td>
<td>16</td>
</tr>
<td>15</td>
<td>
es&dimensions=65&id=c1wcescnsnfuyv06enhwaoqr6" alt="Tijuana ">
<span class="hidden-xs">TIJUANA</span>
<span class="visible-xs">TIJUANA</span>
</div>
</div>
</td>
<td>17</td>
<td>4</td>
<td>3</td>
<td>10</td>
<td>15</td>
</tr>
<td>16</td>
<td>
es&dimensions=65&id=8jjxbd5vr23vhu1v5r21rzkrn" alt="Atlas">
<span class="hidden-xs">ATLAS</span>
<span class="visible-xs">ATLAS</span>
</div>
</div>
</td>
<td>17</td>
<td>3</td>
<td>5</td>
<td>9</td>
<td>14</td>
</tr>
<td>17</td>
<td>
es&dimensions=65&id=ccye1b5fvtq8tzlz0gosyw10b" alt="Querétaro">
<span class="hidden-xs">QUERÉTARO</span>
<span class="visible-xs">QUERÉTARO</span>
</div>
</div>
</td>
<td>17</td>
<td>3</td>
<td>4</td>
<td>10</td>
<td>13</td>
</tr>
<td>18</td>
<td>
es&dimensions=65&id=54ph1k82y99hhjsf7m2usns8u" alt="A San Luis">
<span class="hidden-xs">ATLÉTICO SAN

LUIS</span>
<span class="visible-xs">A SAN LUIS</span>
</div>
</div>
</td>
<td>17</td>
<td>3</td>
<td>2</td>
<td>12</td>
<td>11</td>
</tr>
</tbody>
</table>
</div>
<div class="cp-card hide " data-stage-

content="jgojnjzqh3v37ao3avu1k2ga">
<table class="complete-positions-table">
<thead>
<tr class="cp-table-header">
<th class="cp-table-pointcell">POS</th>
<th>EQUIPO</th>

jugados">PJ</abbr></th>
ganados">PG</abbr></th>
empatados">PE</abbr></th>
perdidos">PP</abbr></th>
title="Goles a favor">GF</abbr></th>
title="Goles en contra">GC</abbr></th>
title="Diferencial de goles">DIF</abbr></th>
<th class="cp-table-pointcell"><abbr
title="Puntos">PTS</abbr></th>
</tr>
</thead>
<tbody>
<td>1</td>
<td>
es&dimensions=65&id=1aw67co8uut64yckd3wbhy9t2" alt="Cruz Azul">
<span class="hidden-xs">CRUZ AZUL</span>

<span class="visible-xs">CRUZ AZUL</span>
</div>
</div>
</td>
<td>10</td>
<td>8</td>
<td>0</td>
<td>2</td>
<td>24</td>
</tr>
<td>2</td>
<td>
es&dimensions=65&id=eu8c408f59yx7egaqossbv25e" alt="América">
<span class="hidden-xs">AMÉRICA</span>
<span class="visible-xs">AMÉRICA</span>
</div>
</div>
</td>
<td>10</td>
<td>7</td>
<td>1</td>
<td>2</td>
<td>22</td>
</tr>
<td>3</td>
<td>
es&dimensions=65&id=233335xtoe3e3phg3hp91xguq" alt="Monterrey">
<span class="hidden-xs">MONTERREY</span>
<span class="visible-xs">MONTERREY</span>
</div>
</div>
</td>
<td>9</td>
<td>5</td>
<td>3</td>
<td>1</td>
<td>18</td>
</tr>
<td>4</td>
<td>
es&dimensions=65&id=3390h9hdgoxzzofnrpyktanuz" alt="Toluca">
<span class="hidden-xs">TOLUCA</span>
<span class="visible-xs">TOLUCA</span>
</div>
</div>
</td>
<td>10</td>
<td>5</td>
<td>3</td>
<td>2</td>
<td>18</td>
</tr>
<td>5</td>
<td>
es&dimensions=65&id=8yn3l36qkq1fxbw4ufmwyfyt9" alt="Santos
Laguna">
<span class="hidden-xs">SANTOS
LAGUNA</span>
<span class="visible-xs">SANTOS
LAGUNA</span>
</div>
</div>
</td>
<td>10</td>
<td>5</td>
<td>3</td>
<td>2</td>
<td>18</td>
</tr>
<td>6</td>
<td>
es&dimensions=65&id=4kw25nmgmacpbvo24ttr994k5" alt="Puebla" >
<span class="hidden-xs">PUEBLA</span>
<span class="visible-xs">PUEBLA</span>
</div>
</div>
</td>
<td>10</td>
<td>4</td>
<td>4</td>
<td>2</td>
<td>16</td>
</tr>
<td>7</td>
<td>
es&dimensions=65&id=8jjxbd5vr23vhu1v5r21rzkrn" alt="Atlas">
<span class="hidden-xs">ATLAS</span>
<span class="visible-xs">ATLAS</span>
</div>
</div>
</td>
<td>10</td>
<td>4</td>
<td>3</td>
<td>3</td>
<td>15</td>
</tr>
<td>8</td>
<td>
es&dimensions=65&id=c1wcescnsnfuyv06enhwaoqr6" alt="Tijuana">
<span class="hidden-xs">TIJUANA</span>
<span class="visible-xs">TIJUANA</span>
</div>
</div>
</td>
<td>10</td>
<td>3</td>
<td>4</td>
<td>3</td>
<td>13</td>
</tr>
<td>9</td>
<td>
es&dimensions=65&id=e603sojy77s4u0ypqds2v2a1g"
alt="Guadalajara">
<span class="hidden-
<span class="visible-
</div>
</div>
</td>
<td>10</td>
<td>2</td>
<td>6</td>
<td>2</td>
<td>12</td>
</tr>
<td>10</td>
<td>
es&dimensions=65&id=54ph1k82y99hhjsf7m2usns8u" alt="A San Luis">
<span class="hidden-xs">ATLÉTICO SAN

LUIS</span>
<span class="visible-xs">A SAN LUIS</span>
</div>
</div>
</td>
<td>10</td>
<td>3</td>
<td>3</td>
<td>4</td>
<td>12</td>
</tr>
<td>11</td>
<td>
es&dimensions=65&id=6hmo9mrlz73nwxkshwuu5vsfm" alt="Tigres">
<span class="hidden-xs">TIGRES UANL</span>

<span class="visible-xs">TIGRES</span>
</div>
</div>
</td>
<td>9</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>12</td>
</tr>
<td>12</td>
<td>
es&dimensions=65&id=ccye1b5fvtq8tzlz0gosyw10b" alt="Querétaro">
<span class="hidden-xs">QUERÉTARO</span>
<span class="visible-xs">QUERÉTARO</span>
</div>
</div>
</td>
<td>10</td>
<td>3</td>
<td>2</td>
<td>5</td>
<td>11</td>
</tr>
<td>13</td>
<td>
es&dimensions=65&id=dsm1dxw4j3f973w7kzhe2n816" alt="Mazatlán">
<span class="hidden-xs">MAZATLÁN</span>
<span class="visible-xs">MAZATLÁN</span>
</div>
</div>
</td>
<td>10</td>
<td>3</td>
<td>2</td>
<td>5</td>
<td>11</td>
</tr>
<td>14</td>
<td>
es&dimensions=65&id=ayabrorjqa1bj7jk1fdqu1t57" alt="Pumas">
<div class="cp-team-info__name team-site ">
<span class="hidden-xs">PUMAS
UNAM</span>
<span class="visible-xs">PUMAS</span>
</div>
</div>
</td>
<td>10</td>
<td>2</td>
<td>2</td>
<td>6</td>
<td>8</td>
</tr>
<td>15</td>
<td>
es&dimensions=65&id=ecphe4bqgmin2tzsohf50egvd" alt="Juárez">
<span class="hidden-xs">JUÁREZ</span>
<span class="visible-xs">JUÁREZ</span>
</div>
</div>
</td>
<td>9</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>8</td>
</tr>
<td>16</td>
<td>
es&dimensions=65&id=2ei66pjfsrr6uxqp1bywq31lo" alt="León">
<span class="hidden-xs">LEÓN</span>
<span class="visible-xs">LEÓN</span>
</div>
</div>
</td>
<td>9</td>
<td>2</td>
<td>1</td>
<td>6</td>
<td>7</td>
</tr>
<td>17</td>
<td>
es&dimensions=65&id=cynfvfb31rml7xrlsnejf8r6j" alt="Pachuca">
<span class="hidden-xs">PACHUCA</span>
<span class="visible-xs">PACHUCA</span>
</div>
</div>
</td>
<td>10</td>
<td>1</td>
<td>4</td>
<td>5</td>
<td>7</td>
</tr>
<td>18</td>
<td>
es&dimensions=65&id=b7hn6knkuxbpj1i8rmzapns7b" alt="Necaxa">
<span class="hidden-xs">NECAXA</span>
<span class="visible-xs">NECAXA</span>
</div>
</div>
</td>
<td>10</td>
<td>1</td>
<td>4</td>
<td>5</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
<div class="banner-mobile visible-xs"></div>
</div>
</div>
</section>
<aside>
<div class="banner">
<div id="300x250_Top">
<script>
googletag.cmd.push(function(){
googletag.defineSlot('/63317524/dalepumas.com/estadisticas',
[[300, 250],[300, 300],[300, 600]], '300x250_Top')
.setTargeting('pos-desktop', ['top'])
.setTargeting('tagID', '')
.addService(googletag.pubads());
googletag.display('300x250_Top')
});
</script>
</div>
</div>
<div class="most-read">
</p>
</section>
<aside>Siguenos</aside>
<footer>
<a href="https://www.instagram.com/pumasmx/">PUMAS
MX</a>
</footer>
</div>
</body>
</html>
CSS
Después de que hice esa modificación ahora cambié pantalla
adaptativa a modo móvil
.container {
width:996px;
margin:0px auto;
font-size:1em;
}
section,aside {
padding: 10px;
background:#ccc;
-moz-border-radius:5px;-webkit-border-radius:5px;-o-
border-radius:5px;border-radius:5px;
}
section {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
nav {
overflow: hidden;
}
nav ul {
list-style-type:none;
float:left;
padding:0px;
}
nav ul li {
float:left;
padding:3px 10px;
margin:2px;
background:#ccccff;
-moz-border-radius:5px;-webkit-border-radius:5px;-o-
border-radius:5px;border-radius:5px;
}
footer {
margin:10px;
text-align:center;
clear:both;
}
/* para 980px o menos */

@media screen and (max-width:980px) {
.container {
width:98%;
}
section {
width:68%;
}
}

aside,section {
float:none;
width:96%;
}
nav, section {
font-size:1.2em;
}
aside {
margin-top:5px;
}
nav ul {
float:none;
clear:both;
}
}

aside {
display:none;
}
nav, section {
font-size:1.5em;
}
section {
width:94%;
}
nav ul {
float:left;
clear:none;
width:50%;
}
nav ul li {
float:none;
}
}
RESULTADOS

Práctica 1 Web Responsiva

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Práctica 1 Web Responsiva

Cargado por

Copyright:

Formatos disponibles

CARRERA:

INGENIERIA EN SISTEMAS COMPUTACIONALES

NOMBRE DEL ALUMNO:

ELIAN D’ JESUS CALDERON SALAS

<th class="cp-table-pointcell"><abbr title="Partidos

<span class="hidden-xs">CRUZ AZUL</span>

<span class="hidden-xs">TIGRES UANL</span>

<span class="hidden-xs">ATLÉTICO SAN

<div class="cp-card hide " data-stage-

<th class="cp-table-pointcell"><abbr title="Partidos

<span class="hidden-xs">CRUZ AZUL</span>

<span class="hidden-xs">ATLÉTICO SAN

<span class="hidden-xs">TIGRES UANL</span>

/* para 980px o menos */

/* para 700px o menos */

/* para 480px o menos */

También podría gustarte