Las tablas son una herramienta basica a la hora de organizar una página web, pero a lo que diseño se refiere es un poco pobre, por lo que ahora usaremos un herramienta llamada div, con la que el diseño pude ser algo mas completo:
- <div class="(nombre del diseño que quieres usar del CSS)"></div> Etiqueta para generarun tabla con caracteristicas especiales
9º Os pondré como sería una organizacion con divs para una página web:
<html>
<head>
<title> Index </title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="cookiealert.css">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Anime</a>
</li>
</ul>
</nav>
<div class="row">
<div class="col-xl-12" style="background-color:#FFF" align="center"> <img src="img/kudasai-awards.jpg" class="rounded" alt="publicidad"> </div>
</div>
<div class="row">
<div class="col-xl-2" style="background-color:#FFF" align="center"> Publicidad </div>
<div class="col-xl-8" style="background-color:#98ff6e" align="center">
<br/>
<h1> LOS MEJORES ANIMES </h1>
<br/>
<div id="demo" class="carousel slide" data-ride="carousel" align="center">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/hellsing.jpg" alt="hellsing" class="rounded">
</div>
<div class="carousel-item">
<img src="img/bleach.jpg" alt="bleach" class="rounded">
</div>
<div class="carousel-item">
<img src="img/danganronpa.jpg" alt="danganronpa" class="rounded">
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<br/>
<div class="row" style="background-color:#f3ff8a" align="center">
<div class="col-xl-12"> <br/> <h2> CATEGORIAS </h2> <br/> </div>
<div class="col-xl-4"> <img src="img/iconoaccion.jpg" class="rounded" alt="Icono accion"> <br/> Animes de accion <br/> <br/> </div>
<div class="col-xl-4"> <img src="img/iconosuspense.jpg" class="rounded" alt="Icono suspense"> <br/> Animes de suspense <br/> <br/> </div>
<div class="col-xl-4"> <img src="img/iconoaventura.jpg" class="rounded" alt="Icono aventura"> <br/> Animes de aventuras <br/> <br/> </div>
</div>
<div class="row" style="background-color:#63fff8" align="center">
<div class="col-xl-12"> <br/> <h2> GALERIA FOTOS </h2> <br/> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/ansatsukyoushitsu.jpg" class="rounded" alt="ansatsukyoushitsu"> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/fairytail.jpg" class="rounded" alt="fairytail"> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/nanatsunotaizai.jpg" class="rounded" alt="nanatsunotaizai"> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/nogamenolife.jpg" class="rounded" alt="nogamenolife"> <br/> </div>
</div>
<div class="row" align="center">
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/onepunchman.jpg" class="rounded" alt="onepunchman"> <br/> <br/> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/psychopass.jpg" class="rounded" alt="psychopass"> <br/> <br/> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/shingekinokyojin.jpg" class="rounded" alt="shingekinokyojin"> <br/> <br/> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/steinsgate.jpg" class="rounded" alt="steinsgate"> <br/> <br/> </div>
<br/>
</div>
<div class="row" style="background-color:#ff8a8a" align="center">
<div class="col-xl-12"> <br/> <h2> SORTEO </h2> <br/> </div>
<div class="col-xl-6"> <p class="parrafoanime"> Hola mis queridos amigos otakus, aqui os presento un gran evento al que estareis invitados completamente gratis
al primero que califique con un 10 esta web. Como veis en la imagen, es un evento completamente de anime y su mundillo. Hay venta de animes, concursos de cosplay,
exposiciones de figuritas, cine, torneo de juegos de mesa, cantantes de internacionales y TAMBIEN PUEDES GANAR UNA WII MINI. Todo un planazo... </p>
<p class="parrafoanime"> ¿¡ A QUE ESTAIS ESPERANDO !? </p> </div>
<div class="col-xl-6"> <img src="img/sorteoanime.jpg" class="rounded" alt="sorteo"> <br/> <br/> </div>
<br/>
</div>
<div class="container">
<h2> <br/> CONTACTA CON NOSOTROS <br/> <br/> </h2>
<form action="">
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="nombre" class="form-control" id="nombre" placeholder="Introduce nombre" name="nombre">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Introduce email" name="email">
</div>
<div class="form-group">
<label for="telef">Telefono:</label>
<input type="telef" class="form-control" id="telef" placeholder="Introduce telefono" name="telef">
</div>
<div class="form-group">
<label for="comentario">Comentario:</label>
<textarea class="form-control" rows="5" id="comentario" placeholder="Introduce comentario" name="comentario"></textarea>
</div>
</div>
<div class="form-group form-check">
<button type="submit" class="btn btn-primary"> Enviar </button>
</form>
</div>
<div class="container">
<div class="col-xl-6"> <span class="glyphicon glyphicon-envelope"> </span> </div>
<div class="col-xl-6"> <span class="glyphicon glyphicon-earphone"> </span> </div>
</div>
</div>
<div class="col-xl-2" style="background-color:#FFF" align="center"> Publicidad </div>
</div>
<div class="alert alert-dismissible text-center cookiealert" role="alert">
<div class="cookiealert-container">
<b>Te gustan las galletas?</b> 🍪 Utilizamos cookies para garantizar que obtenga la mejor experiencia en nuestro sitio web.
<a href="http://cookiesandyou.com/" target="_blank"> Mas informacion </a>
<button type="button" class="btn btn-primary btn-sm acceptcookies" aria-label="Close">
Estoy de acuerdo
</button>
</div>
</div>
</body>
<script src="cookiealert-standalone.js"></script>
</html>
Con esto seria el uso de divs combinados con bootstrap para organización y diseño más completos
No hay comentarios:
Publicar un comentario