Bueno, hola pwg, les quiere dejar una plantilla que hice, espero que les guste.
Caracteristicas:
+Dos columnas
+Se pueden agregar boxes
+Un solo menu
+Contenido que se puede expandir
+Noticias y avisos
+Diseño elegante y original
+Google Fonts
Tutoriales:
Agregar un box:
1.Solo agrega el siguiente codigo dentro de las etiquetas <div id="sidebar"></div>
<div class="box">Titulo BOX</div>
<div class="contenidobox">Contenido en el</div>
Codigos:
Por encima de la pagina:
Código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Desing Nexo - HD Plantillas</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Text+Me+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Text+Me+One::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Economica::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
</head>
<body>
<div id="contenido">
<div id="logo"><a href="tuweb.com.ar"><img src="images/logo.png" /></a></div>
<div id="menu"><div id="links">
<ul id="button">
<li><a href="/otros.htm"><span style="color:#F00">Home</span></a></li>
<li><a href="/contacto.htm">| Menu |</a></li>
<li><a href="/juegos.htm">Menu |</a></li>
<li><a href="/home.htm">Menu |</a></li>
<li><a href="/home.htm">Menu |</a></li>
<li><a href="/home.htm">Menu |</a></li>
<li><a href="/home.htm">Menu</a></li>
</ul></div></div>
<div id="anuncio1">Noticias:</div>
<div id="anuncio2">Atencion: !</div>
<div id="contenedor">
Código: </div>
<div id="sidebar">
<div class="box">Titulo BOX</div>
<div class="contenidobox">hola soy contenido</div>
<div class="box">Titulo BOX</div>
<div class="contenidobox">hola soy contenido</div>
<div class="box">Titulo BOX</div>
<div class="contenidobox">hola soy contenido</div>
</div>
<div id="footer">Copyright 2013 Tuweb.es.tl | Diseño "Desing Nexo" por <a href="http://www.hdplantillas.com.ar">HD Plantillas</a></div>
</div>
</div>
</body>
</html>
Código: table[height ="102"] {margin-left:auto;margin-right:auto;}
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
a:link {
color:#FF6600;
text-decoration:none;
}
a:visited {
color:#FF3300;
text-decoration:none;
}
a:active {
color:#FF6600;
text-decoration:none;
}
a:hover {
color:#F90;
text-decoration:none;
}
body {
background-image:url(http://img.webme.com/pic/n/nextoweb/fondo1.png);
background-position:50%, 50%;
background-color:#000;
background-repeat:no-repeat;
text-align:center;
}
#contenido {
margin: 10px auto 15px auto;
width:1080px;
text-align:center;
}
#logo {
background-position: center;
background-repeat:no-repeat;
height:auto;
display:block;
}
/* Menu */
#menu {
background-position:center;
background-image:url(http://img.webme.com/pic/n/nextoweb/menubg.png);
background-repeat:repeat-x;
height:48px;
width:auto;
border-radius:10px 10px 0px 0px;
}
@font-face {
font-family: 'League Gothic';
font-style: normal;
font-weight: normal;
src: url('LeagueGothic.ttf');
}
#button {
padding-top:5px;
padding-bottom:10px;
padding-right:22px;
}
#button li {
display: inline;
}
#button li a {
font-family: "Economica", Haettenschweiler;
font-size:21pt;
text-shadow: 0 0 0.1em #fff, 0 0 0.3em #fff,
0 0 0.3em #fff;
text-decoration: none;
padding: 5px;
color:#000;
}
#button li a:hover {
text-shadow: 0 0 0.1em #ff5400, 0 0 0.1em #ff5400, 0 0 0.3em #ff5400;
}
/* Anuncios */
#anuncio1 {
background-image:url(http://img.webme.com/pic/n/nextoweb/bganun.png);
background-repeat:repeat-x;
text-align:left;
font-family:"Text Me One", Haettenschweiler;
font-size:12pt;
color:#FFF;
padding:5px;
height:27px;
}
#anuncio2 {
background-image:url(http://img.webme.com/pic/n/nextoweb/bganun1.png);
background-repeat:repeat-x;
text-align:left;
font-family:"Text Me One", Haettenschweiler;
font-size:12pt;
color:#fff;
padding:5px;
height:26px;
margin-top:-10px;
}
#contenedor {
background-color:#fff;
display:block;
float:left;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
width:700px;
min-height:610px;
margin-top:-10px;
padding-left:15px;
padding-top:12px;
padding-right:5px;
padding-bottom:5px;
word-wrap: break-word;
margin-bottom:25px;
border-radius:10px;
margin-top:10px;
}
#sidebar {
background-image:url(http://img.webme.com/pic/n/nextoweb/bgsidebare.png);
background-repeat: repeat-x;
background-color:#b10821;
width:345px;
min-height:440px;
float:right;
margin-top:-10px;
margin-bottom:20px;
padding-bottom:25px;
border-radius:10px;
margin-top:10px;
}
.box {
background-image: url(http://img.webme.com/pic/n/nextoweb/bgbox.png);
background-color:#000;
background-repeat:repeat-x;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:11pt;
color:#fff;
text-align:left;
width:280px;
height:28px;
float:right;
margin-top:25px;
border-radius:10px 0px 0px 10px;
padding:11px 0px 2px 6px;
}
.contenidobox {
background-color:#fff;
font-family: "Economica", sans-serif;
min-height:120px;
word-wrap:break-word;
border-radius:10px 0px 0px 10px;
padding:5px;
display:block;
width:289px;
margin-top:5px;
float:right;
text-align:left;
}
#footer {
background-image:url(http://img.webme.com/pic/n/nextoweb/footerbg.png);
background-repeat:repeat-x;
background-color:#000;
height:20px;
clear:both;
padding:10px;
text-align:left;
margin-top:5px;
border-radius:10px;
font-family: "Text Me One", Arial;
font-size:12pt;
color:#fff;
}