-
losjovenesopinan-chika
Nuevo
|
22-01-2013, 23:12 (UTC) Título del mensaje: Plantilla CSS super-básica |
|
|
Esta tal vez no sea la mejor plantilla, pero es una básica para que de mientras, puedas buscar más, esta plantilla yo la nombro: "Melón" por el color de fondo, puedes echar un vistazo a esta super-básica plantilla: http://www.wannabegirl.org/firdamatic/template2.php
Aqui les dejo el código, deben de cambiar: "Nombre de la web" por la suya, Tu correo. ponganle el suyo si quieren, si no lo deseean, dejen el espacio en blanco; URL DEL SITIO: la página web gratis (las 2) y el Banner, de preferencia eligan uno de 700x150 pixeles, recuerden subirlo a imageshack y copian la URL. Listo Cita: <!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>Nombre de la web</title>
<style type="text/css" media="screen">
body {
margin: 10px auto;
padding: 0;
font-family: lucida grande, verdana, arial, sans-serif;
text-align: center;
background: #FF9966;
color: #FFFFFF;
}
h1, h2, h3 {
font-family: georgia, times new roman, times, serif;
color: #FFFFFF;
background: transparent;
}
p {
font-family: lucida grande, verdana, arial, sans-serif;
color: #FFFFFF;
background: transparent;
}
a { color: #0000FF; background: transparent; text-decoration: none;}
a:link { color: #0000FF; background: transparent; }
a:visited { color: #0000FF; background: transparent; }
a:active { color: #0000FF; background: transparent; }
a:hover { color: #0000FF; background: transparent; text-decoration: underline; }
#header {
margin: 0 auto;
padding: 0;
width: 700px;
height: 150px;
text-align: left;
background: #663366 url(Banner) no-repeat top center;
color: #FFFFFF;
border-top: 1px solid #66CCFF;
border-right: 1px solid #66CCFF;
border-bottom: 5px solid #66CCFF;
border-left: 1px solid #66CCFF;
}
#title {
margin: 0px;
padding: 50px 0 0 25px;
background: transparent;
color: #FFFFFF;
}
#title h1 {
margin: 0;
padding: 0;
display: block;
}
#container {
margin: 0 auto;
padding: 0;
color: #FFFFFF;
background: transparent;
width: 702px;
text-align: left;
}
h2.section {
margin-top: 10px;
font-size: 13px;
background: transparent;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
#sidebar {
float: left;
width: 146px;
padding: 0px 5px 10px 0px;
background: transparent;
color: #FFFFFF;
}
#sidebar p {
font-size: 11px;
margin: 5px 0px;
}
#sidebar ul {
list-style: square;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 1em;
padding-left: 1em;
}
#sidebar li {
background: transparent;
font: 11px lucida grande, verdana, arial, sans-serif;
color: #FFFFFF;
}
#content {
float: left;
width: 380px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background: transparent;
color: #FFFFFF;
border-right: 1px solid #66CCFF;
border-left: 1px solid #66CCFF;
}
h2.date {
margin-top: 10px;
padding: 2px 5px;
font-size: 13px;
font-weight: bold;
letter-spacing: 0.09em;
text-align: right;
background: transparent;
color: #FFFFFF;
border-top: 1px solid #66CCFF;
border-right: 5px solid #66CCFF;
}
h3.subject {
font-size: 12px;
letter-spacing: 0.09em;
text-transform: uppercase;
background: transparent;
color: #FFFFFF;
}
div.timestamp {
font: 11px georgia, times new roman, times, serif;
letter-spacing: 0.09em;
margin-top: 10px;
padding: 0px 5px 2px 5px;
border-bottom: 1px solid #66CCFF;
border-left: 5px solid #66CCFF;
}
#content p {
font-size: 12px;
margin: 10px 0px 5px 10px;
}
#rightbar {
float: left;
width: 144px;
padding: 0px 0px 10px 5px;
background: transparent;
color: #FFFFFF;
}
#rightbar p {
font-size: 11px;
margin: 5px 0px;
}
#rightbar ul {
list-style: square;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 1em;
padding-left: 1em;
}
#rightbar li {
background: transparent;
font: 11px lucida grande, verdana, arial, sans-serif;
color: #FFFFFF;
}
#footer {
margin: 0 auto;
padding: 0;
width: 702px;
text-align: left;
background: transparent;
font-size: 10px;
color: #FFFFFF;
}
#credits {
float: left;
width: 140px;
padding: 5px;
background: #FFCC99;
color: #FFFFFF;
border: 1px solid #66CCFF;
}
#credits p {
margin: 0px;
}
#space {
float: left;
width: 540px;
padding: 5px;
background: transparent;
color: #FFFFFF;
border-top: 1px solid #66CCFF;
}
</style>
</head>
<body>
<div id="header">
<div id="title"><h1><a href="URL DEL SITIO">Nombre de la web</a></h1></div>
</div>
<div id="container">
<div id="sidebar">
<h2 class="section">About</h2>
<p>Hello. My name is . I have a weblog. You are looking at it. Isn't it cool? There's a weblog behind every cool kid. Really.</p>
<h2 class="section">Archives</h2>
<ul>
<li><a href="#">September 2003</a></li>
<li><a href="#">August 2003</a></li>
<li><a href="#">July 2003</a></li>
<li><a href="#">June 2003</a></li>
<li><a href="#">May 2003</a></li>
</ul>
<h2 class="section">Blogroll</h2>
<ul>
<!-- These are links to my friends and, uh, myself. Feel free to get rid of them. //-->
<li><a href="http://forestpirate.ca/">Blue Goo Ate My Mom</a></li>
<li><a href="http://www.galacticmuffin.net/day17/">Day Seventeen</a></li>
<li><a href="http://www.fairvue.com/">Fairvue Central</a></li>
<li><a href="http://www.swirlee.org/">Swirlee</a></li>
<li><a href="http://www.wannabegirl.org/">Weblog Wannabe</a></li>
</ul>
</div>
<div id="content">
<h2 class="date">September 8, 2003</h2>
<h3 class="subject">Firdamatic Update</h3>
<p>Like what you see? Just view source and copy. If your weblog is powered by <b>Blogger/Blogspot</b>, you can find the template for you to copy and paste <a href="blogger-set2.php">here</a>. If your weblog is powered by <b>Movable Type</b>, you can find Main Index and Individual Entry Archive templates as well as the stylesheet <a href="set2.php">here</a>. Enjoy!</p>
<div class="timestamp"><a href="#">Permalink</a> :: <a href="#">Comments?</a></div>
<h2 class="date">August 31, 2003</h2>
<h3 class="subject">Lorem Ipsum Dolor Sit Amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed neque ut leo lacinia interdum. Ut ac tortor et ligula rutrum ultricies. Proin auctor gravida pede. Aenean quis ligula nec ligula ultrices vestibulum. Nam eu diam. Duis urna lorem, scelerisque ac, aliquet a, varius vitae, nisl. Aliquam ullamcorper turpis non pede. Donec massa. Sed sem lacus, ultrices eu, convallis at, accumsan quis, ante. Nunc ullamcorper posuere dui. Donec at diam. Etiam ipsum. Aenean ultricies tortor ut tellus. Sed eu lorem.</p>
<div class="timestamp"><a href="#">Permalink</a> :: <a href="#">Comments?</a></div>
<h3 class="subject">Mauris Elementum Justo</h3>
<p>Mauris elementum justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ligula. Fusce ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean convallis, nisl non pellentesque venenatis, justo erat elementum neque, vitae sagittis libero turpis eu nulla. In hac habitasse platea dictumst. Donec fringilla eros ac lacus. Praesent eros purus, accumsan quis, bibendum sit amet, sagittis nec, diam. Curabitur molestie nibh ac libero. Aenean sit amet felis. Nullam viverra. Suspendisse auctor enim ut nunc. Nullam vel justo eu sapien hendrerit egestas. Nullam nec sapien. Sed arcu erat, fermentum vel, gravida nec, laoreet et, urna. Proin tincidunt massa eu mauris. Curabitur aliquet. Aenean nonummy nisl ut quam. Cras pellentesque arcu ac sem.</p>
<div class="timestamp"><a href="#">Permalink</a> :: <a href="#">Comments?</a></div>
<h2 class="date">August 30, 2003</h2>
<h3 class="subject">Quote Meon An Estimate</h3>
<p>Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
<div class="timestamp"><a href="#">Permalink</a> :: <a href="#">Comments?</a></div>
</div>
<div id="rightbar">
<h2 class="section">Listening</h2>
<p>I don't want you to think of me as an eavesdropper so I'll just say that I'm listening to music instead of my neighbour's maid flirting with my other neighbour's driver.</p>
<h2 class="section">Reading</h2>
<p>I like it when people think of me as an intellectual so I will list a bunch of intellectual-sounding books here, even those I don't plan to read.</p>
<h2 class="section">Viewing</h2>
<p>Since I can't list my porn collection here, I'll just leave it this way until I can force myself to watch non-pornographic stuff, which may or may not happen.</p>
</div>
</div>
<div id="footer">
<div id="credits">
<p>Base layout by <a href="http://wannabegirl.org/firdamatic/">Firdamatic</a><br />Graphics by <a href="mailto:Tu correo"></a><br />Powered by <a href="URL DEL SITIO">PWG</a><br />Valid <a href="http://validator.w3.org/check/referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p>
</div>
<div id="space"></div>
</div>
</body>
</html>
[/code]
PD: PUEDEN CAMBIAR EL TIO DE LETRA |
|