Ejercicios CSS 3º- A partir del código HTML crear un archivo de CSS para dar estilo como el que aparece en la imágen:

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Ejercicios CSS 3º- A partir del código HTML crear un archivo de CSS para dar estilo como el que aparece en la imágen:"

Francisco Javier Velázquez López
hace 6 años
Vistas:

Ejercicios CSS 3º- A partir del código HTML crear un archivo de CSS para dar estilo como el que aparece en la imágen: <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional// EN" "http://www.w3.

1 Ejercicios CSS 3º- A partir del código HTML crear un archivo de CSS para dar estilo como el que aparece en la imágen: <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional// EN" " transitional.dtd"> <html xmlns=" <head> <meta http equiv="content type" content="text/html; charset=utf 8"> <link rel="stylesheet" type="text/css" href="./css/estilo ejercicio 3.css"/> <title>ejercicio 3 de css</title> </head> <body> <div id="contenedor"> <div id="cabecera"> <img alt="logotipo" id="logo" src="./css/logo_junta_ce.png" title="logo"> <div id="menu"> <li><a href="#" target="_self" >Noticias</a>

2 <li><a href="#" target="_self">internacional</a> <li><a href="#" target= "_self"> Nacional</a> <li><a href="#" target= "_self"> Local</a> <li><a href="#" target= "_self"> Deportes</a> <li><a href="#" target="_self" >Instituto</a> <li><a href="#" target="_self"> Departamentos</a> <li><a href="#" target="_self"> Tutorias </a> <li><a href="#" target="_self" >trabajos</a> <li><a href="#" target="_self"> Personales</a> <li><a href="#" target="_self"> Grupales</a> <div id="lateral"> <div id="publicidad"> <p><a href="#">hola</a> <p><a href="#">diez minutos</a> <div id="contenido"> <div id="principal"> <div class="articulo"> <img src="css/images/foto1.jpg" alt="detención"> <h2 >La Guardia Civil persigue y detiene a 3 personas por tráfico de hachís</h2> <p><span>los arrestados paran el coche en el que iban en la A 7 y huyen a través de un descampado hasta alcanzar San José Artesano, donde se refugian en un bloque. </span><br> Fue a eso de las 17:00 horas cuando el dispositivo de la Benemérita ya estaba desplegado y sobre las 18:00 horas cuando ya había concluido. Un Mercedes Benz de color plateado fue retirado de la vía de acceso que transcurre de manera paralela a la salida de Algeciras por la A 7 en dirección a Málaga. La peculiaridad era que estaba en dirección contraria al sentido habitual, es decir, mirando para Algeciras. Los testigos hablaron de una persecución desde metros atrás. Paralelamente, ya en el doble carril de la autovía, había otros turismos dañados. <div class="articulo"> <img src="css/images/foto2.jpg" alt="unión">

3 <h2 >Un nuevo modelo de Unión</h2> <p><span>álvaro Moya, el único candidato a hacerse cargo del club en la asamblea del viernes, se ve capacitado para mantener con vida a la entidad y asegura que el dinero llegará con un proyecto barreño y humilde.</span><br> El barreño que ya había avanzado sus intenciones la pasada semana compareció ayer de forma oficial para presentar su propuesta en firme. Sin desvelar su posible equipo de trabajo, el todavía futbolista se mostró <span>"convencido"</span> de lograr recursos económicos <span>"en el pueblo"<span> y aseguró que con su modelo de gestión <span>"es posible salvar a la Unión"</span>. <div id="secundario"> <p><span>pedirán responsabilidad patrimonial a González y Ortega por el Escalinata</span> <br> El Ayuntamiento abrirá expediente si el Supremo rechaza el Plan de Movilidad para legalizar el parking. <p><span>los alcaldes aplauden la medida de rebajar un 15% sus sueldos.</span><br> Los dirigentes del Campo de Gibraltar valoran con positividad la rebaja de los salarios. <div id="pie"> <div class="enlaces"> <a href=" Instituto</a> <div class="copyright"> <p> &copy El Instituto <div class="clear"> </body> </html> Ayuda para el menú emergente: /* definición del menú movil */ #menu{ border:none; font: 67.5% "Lucida Sans Unicode", "Bitstream

4 Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans serif; font size:14px; font weight:bold; #menu ul{ background:#333333; height:35px; list style:none; margin:0; padding:0; #menu li{ float:left; #menu li a{ background:# url("images/seperator.gif") bottom right no repeat; color:#cccccc; font weight:normal; line height:35px; padding:0px 25px; text align:center; #menu li a:hover,.menu ul li:hover a{ background: #2580a2 url("images/hover.gif") bottom center no repeat; color:#ffffff; #menu li ul{ background:#333333; display:none; height:auto; position:absolute; width:225px; z index:200; /*top:1em; /*left:0;*/ #menu li:hover ul{ #menu li li {

5 background:url('images/sub_sep.gif') bottom left no repeat; float:none; width:225px; #menu li:hover li a{ background:none; #menu li ul a{ height:35px; font size:12px; font style:normal; padding:0px 10px 0px 15px; text align:left; #menu li ul a:hover,.menu li ul li:hover a{ background:#2580a2 url('images/hover_sub.gif') center left no repeat; color:#ffffff; #menu p{ clear:left; /*final del menú*/