:: CP - Recursos Web ::

Visual ok

MUESTRA

[ CLICK PARA AGRANDAR ]

INFORMACIÓN

Diseño adaptable?: No

Fecha: 2011-12-12

Creditos: https://cssplantillas.es.tl

Diseño para: Css Design

Garantia: SI ?

Nota: Visual ok, es un diseño propio de cssplantilas es cual es muy sencillo pero muy adaptable a cualquier web, al ser su código sencillo puede editar y adaptar/mejorar a tu gusto.

- Codigo 01: Texto sobre el diseño

<div id="wrapper"><div id="head"><div id="logo">
	<h1>Titulo de tu web</h1>
</div></div>
<div class="chromestyle" id="chromemenu"><ul>
<li><a href="URL">Portada</a></li>
<li><a href="URL" rel="dropmenu1">Link's 1d</a></li>
<li><a href="URL" rel="dropmenu2">Link's 2d</a></li>
<li><a href="URL" rel="dropmenu3">Link's 3d</a></li>
<li><a href="URL">Link's 4</a></li>	
</ul></div>
                                                  
<div id="dropmenu1" class="dropmenudiv" style="width: 180px;">
<a href="URL">Link's 1</a>
<a href="URL">Link's 2</a>
<a href="URL">Link's 3</a>
<a href="URL">Link's 4</a>
<a href="URL">Link's 5</a>
</div>
                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 180px;">
<a href="URL">Link's 1</a>
<a href="URL">Link's 2</a>
<a href="URL">Link's 3</a>
<a href="URL">Link's 4</a>
<a href="URL">Link's 5</a>
</div>
                                                  
<div id="dropmenu3" class="dropmenudiv" style="width: 180px;">
<a href="URL">Link's 1</a>
<a href="URL">Link's 2</a>
<a href="URL">Link's 3</a>
<a href="URL">Link's 4</a>
<a href="URL">Link's 5</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
<div id="page"><div id="page-bgtop">
<div id="page-bgbtm"><div id="content">

Copiar codigo

- Codigo 02: Texto por debajo de la página

</div><div id="sidebar"><ul><li>
	<h2>Box de contenido</h2><p>
Pon aqui lo que quieras, imagenes, videos, objetos flash, texto, etc.
</p></li><li>
	<h2>Menu 1</h2><ul>
		<li><a href="URL">Link's 1</a></li>
		<li><a href="URL">Link's 3</a></li>
		<li><a href="URL">Link's 4</a></li>
		<li><a href="URL">Link's 5</a></li>
		<li><a href="URL">Link's 6</a></li>
</ul></li><li>
	<h2>Menu 2</h2><ul>
		<li><a href="URL">Link's 1</a></li>
		<li><a href="URL">Link's 3</a></li>
		<li><a href="URL">Link's 4</a></li>
		<li><a href="URL">Link's 5</a></li>
		<li><a href="URL">Link's 6</a></li>
</ul></li>
	<h2>Banners!</h2><center style="margin-top:3px;margin-bottom:3px;border:none;">

<a href="URL"><img src="https://img.webme.com/pic/c/cssplantillas/beners.png"></a>
<a href="URL"><img src="https://img.webme.com/pic/c/cssplantillas/beners.png"></a>
<br>
<a href="URL"><img src="https://img.webme.com/pic/c/cssplantillas/beners.png"></a>
<a href="URL"><img src="https://img.webme.com/pic/c/cssplantillas/beners.png"></a>

</center></ul></div>
<div style="clear: both;"> </div>
</div></div></div>
<div id="footer"><p>
Copyright (c) 2010 Tu sitio web - Diseño por: <a href="https://cssplantillas.es.tl">CssPlantillas</a>.</p>
</div></div><center>

Copiar codigo

- Codigo 03: CSS-Code

#pre_header {display: none;}
#post_header {display: none;}
#header_container {display: none;}
lli.nav_element{display: none;} 
li.nav_element a{display: none;} 
h1#title{display: none;} 
h2#title span {display: none;} 
#header {display: none;}
#title {display: none;}
#nav_container {display:none;}
table {margin-left:auto;margin-right:auto;}
/* Diseño por: https://cssplantillas.es.tl */ 
body {margin: 0;padding: 0;background: #eaeaea;
font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #464032;}
h1, h2, h3 {margin: 0;padding: 0;font-weight: normal;color: #221D1D;}
h1 {font-size: 2em;}
h2 {font-size: 2.4em;}
h3 {font-size: 1.6em;}
p, ul, ol {margin-top: 0;line-height: 180%;}
ul, ol {}
a {text-decoration:none;color:#006699;}
a:hover {text-decoration:underline;color#000;}
img {border:0px;}
#wrapper {width: 960px;margin: 0 auto;padding: 0;border:1px solid #999;background:#fff;
margin-bottom:5px;}
#head {width: 940px;height: 120px;margin: 0 auto;margin-bottom:5px;margin-top:5px;
background: url("https://img.webme.com/pic/w/webcp/visualok01.png");}
#logo {float: left;height: 40px;margin: 0;color: #000000;}
#logo h1 {margin: 0;padding: 0;}
#logo h1 {padding-left:180px;font-size:3.8em;color:#333;font-family:georgia;padding-top:#10px;}
.chromestyle{margin: 0 auto;width: 940px;font-weight: bold;border-bottom:1px solid #fafafa;
background:#2a2a2a;}
.chromestyle:after{content: "."; display: block; height: 0;visibility: hidden;}
.chromestyle ul{width: 100%;padding:4px 0;margin:0;text-align:right;}
.chromestyle ul li{display: inline;}
.chromestyle ul li a{color:#fff;padding: 4px 7px;margin: 0;
text-decoration: none;}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background:#006699;color:#fff;text-decoration: none;}
.dropmenudiv{position:absolute;top: 0;
border: 1px solid #BBB; border-bottom-width: 0;font:normal 11px Verdana;line-height:16px;
z-index:100;width: 200px;visibility: hidden;}
.dropmenudiv a{width: auto;display: block;text-indent: 3px;
border-bottom: 1px solid #BBB; padding: 2px 0;text-decoration: none;
font-weight: bold;color:#fff;background:#2a2a2a;}
.dropmenudiv a:hover{background:#006699;color:#fff;text-decoration: none;}
#page {width: 940px;margin: 0 auto;padding: 0;}
#page-bgtop {padding: 20px 0px;}
#page-bgbtm {}
#content {float: right;width: 620px;padding: 0px 0px 0px 0px;}
#sidebar {float: left;width: 280px;padding: 0px;color: #787878;}
#sidebar ul {margin: 0;padding: 0;list-style: none;background:#fafafa;border:1px solid #eaeaea;}
#sidebar li {margin: 0;padding: 0;}
#sidebar li ul {margin: 0px 0px;padding-bottom: 30px;}
#sidebar li li {line-height: 35px;border-bottom: 1px dotted #E5E0C6;
margin: 0px 30px;border-right: none;}
#sidebar li a {padding-left: 20px;
background: url("https://img.webme.com/pic/w/webcp/visualok02.png") no-repeat left 0px;}
#sidebar li li span {display: block;margin-top: -0px;padding: 0;
font-size: 11px;font-style: italic;}
#sidebar h2 {padding-left: 30px;padding-top: 6px;padding-bottom: 6px;
background: #333;letter-spacing: -.5px;font-size: 1.8em;color: #FFFFFF;}
#sidebar p {margin: 0 0px;padding: 10px 30px 20px 30px;text-align: justify;}
#sidebar a {border: none;color: #898989;}
#sidebar a:hover {text-decoration: underline;color: #6E6E6E;}
#footer {width: 940px;height: 50px;margin: 0 auto;padding: 0px 0 15px 0;
font-family: Arial;background:#2a2a2a;margin-bottom:5px;color:#eaeaea;}
#footer p {margin: 0;padding-top: 20px;font-family:verdana;
font-size: 12px;text-align: center;}
#footer a {color: #fafafa;text-decoration:underline;}
#webme_footer_textlink_dont_hide {color:#333;background-color:rgba(0, 0, 0, 0.0);font-size:9px;font-family:arial;}

Copiar codigo

ENLAZANOS

URL DIRECTA

LINK'S HTML

URL CORTA

Descarga

Ahora puedes descargar nuestros recursos, (No en todos los recursos esta disponible esta opcion, disfrutalo)

Descarga no disponible

[ CLICK PARA VER TUTORIAL ]

NOTAS:
Todo lo que debes editar esta en mayúsculas, si sabes de CSS puede editar más elementos para dejar tu web muy atractiva.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Visual ok

Visual ok

MUESTRA

INFORMACIÓN

- Codigo 01: Texto sobre el diseño

- Codigo 02: Texto por debajo de la página

- Codigo 03: CSS-Code

ENLAZANOS

Descarga

Buscador

Lo más reciente:

PUBLICIDAD

EN TWITTER!

Suscribete

Lo más buscado