[Diseño para Css design] Primitive Element

Nuevo Usuario Mensajes : 3 Fecha de inscripción : 17/02/2010

Vista pevia en vivo
http://img46.xooimage.com/files/3/0/4/index-1906f34.html

vista previa
[Diseño para Css design] Primitive Element 20100221_173136_img46xooimagecom_p_600

[Diseño para Css design] Primitive Element 20100221_173136_img46xooimagecom_p_600

Texto por encima e la pagina

Código:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Primitive Element</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="http://img44.xooimage.com/files/0/8/a/default-1906f2f.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1><a href="http://www.free-css.com/">Primitive Element</a></h1>
<h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="menu">
<ul>
<li class="active"><a href="http://www.free-css.com/" accesskey="1">Home</a></li>
<li><a href="http://www.free-css.com/" accesskey="2">About Us</a></li>
<li><a href="http://www.free-css.com/" accesskey="3">Products</a></li>
<li><a href="http://www.free-css.com/" accesskey="4">Services</a></li>
<li><a href="http://www.free-css.com/" accesskey="5">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="colOne">
<h2>Recent Updates</h2>
<h3>Etiam suscipit et</h3>
<p>Rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="http://www.free-css.com/">More…</a></p>
<h3>Fusce dolor totique</h3>
<p>Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada lorem ipsum dolorem. <a href="http://www.free-css.com/">More…</a></p>
<h3>Nunc pellentesque</h3>
<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse lorem ipsum dolorem potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="http://www.free-css.com/">More…</a></p>
<h3>Suspendis potenti</h3>
<p>Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus lorem ipsum dolorem placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. <a href="http://www.free-css.com/">More…</a></p>
</div>
<div id="colTwo">

Texto por debajo de la pagina

Código:: </div>
<div id="colThree">
<h2>Ipsum Dolorem</h2>
<ul>
<li><a href="http://www.free-css.com/">Sed bibendum tellus id</a></li>
<li><a href="http://www.free-css.com/">Vivamus commodo</a></li>
<li><a href="http://www.free-css.com/">Sed bibendum risus atis</a></li>
<li><a href="http://www.free-css.com/">Nulla ullamcorper arcu</a></li>
<li><a href="http://www.free-css.com/">Vestibulum ultricies dui</a></li>
<li><a href="http://www.free-css.com/">Proin a dui non elit</a></li>
<li><a href="http://www.free-css.com/">Praesent utumsan</a></li>
<li><a href="http://www.free-css.com/">In posuere risus ac felis</a></li>
<li><a href="http://www.free-css.com/">Proin facilisis sagittis</a></li>
<li><a href="http://www.free-css.com/">In fringilla aliquet odio</a></li>
<li><a href="http://www.free-css.com/">Quisque sodales arcu</a></li>
<li><a href="http://www.free-css.com/">Nam tincidunt consec</a></li>
</ul>
<h2>Nulla vel mollis</h2>
<ul>
<li><a href="http://www.free-css.com/">Pellentesque consequat</a></li>
<li><a href="http://www.free-css.com/">Morbi condimentum</a></li>
<li><a href="http://www.free-css.com/">Cras tempor pulvinar</a></li>
<li><a href="http://www.free-css.com/">Pellentesque vel magna</a></li>
<li><a href="http://www.free-css.com/">Purus placerat imperdiet</a></li>
<li><a href="http://www.free-css.com/">Duis ultrices pede vel</a></li>
<li><a href="http://www.free-css.com/">Etiam eu libero eget est</a></li>
<li><a href="http://www.free-css.com/">Faucibus fermentum.</a></li>
<li><a href="http://www.free-css.com/">Vestibulum vulputate</a></li>
<li><a href="http://www.free-css.com/">Cras sollicitudin pede et</a></li>
<li><a href="http://www.free-css.com/">Maecenas interdum ante</a></li>
<li><a href="http://www.free-css.com/">Nullam lacinia eleifend</a></li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<p>Copyright 2006 Primitive Element. Designed by <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a> | Adaptado por <a href="http://www.help-4-pwg.es.tl/">help-4-pwg</a></p>
</div>
</body>
</html>

Css sin style tags

Código:: /*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
margin: 11px 0 0 0;
padding: 0;
background: #000000 url(http://img24.xooimage.com/files/5/6/c/img1-14969b1.gif) repeat-x;
font: normal small Arial, Helvetica, sans-serif;
color: #999999;
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
text-transform: uppercase;
letter-spacing: .2em;
color: #000000;
}

p, ul, ol, blockquote {
margin-top: 0;
line-height: 160%;
}

a {
text-decoration: none;
color: #9ED738;
}

a:hover {
text-decoration: underline;
}

/* Header */

#header {
width: 720px;
height: 161px;
margin: 0 auto;
background: url(http://img6.xooimage.com/files/7/b/d/img2-75057b.jpg) no-repeat;
}

#header * {
text-decoration: none;
text-align: center;
color: #000000;
}

#header h1 {
padding-top: 55px;
font-size: 3em;
}

#header h2 {
font-size: 1.2em;
}

/* Menu */

#menu {
width: 720px;
height: 55px;
margin: 0 auto;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
width: 142px;
height: 21px;
padding: 7px 1px 0 1px;
background: url(http://img44.xooimage.com/files/8/c/c/img3-14969c1.gif) no-repeat center center;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .2em;
font-size: x-small;
font-weight: bold;
color: #CCCCCC;
}

#menu a:hover, #menu .active a {
background-image: url(http://img44.xooimage.com/files/4/8/8/img4-14969c6.gif);
color: #FFFFFF;
}

/* Content */

#content {
width: 720px;
margin: 0 auto;
}

#colOne {
float: left;
width: 160px;
}

#colTwo {
float: left;
width: 360px;
padding: 0 20px;
}

#colThree {
float: left;
width: 160px;
}

/* Content Elements */

#content h2 {
height: 21px;
margin-bottom: 20px;
padding: 9px 0 0 10px;
background: url(http://img1.xooimage.com/files/b/8/3/img6-7504a6.gif);
letter-spacing: normal;
font-size: .9em;
}

#content h3 {
text-transform: uppercase;
letter-spacing: normal;
font-size: x-small;
color: #FFFFFF;
}

#content ul {
margin-left: 0;
padding-left: 0;
list-style: square inside;
}

/* Footer */

#footer {
height: 70px;
padding: 7px 0 0 0;
background: url(http://img28.xooimage.com/files/2/7/9/img5-14969c9.gif) repeat-x;
}

#footer * {
color: #000000;
}

#footer p {
text-align: center;
font-size: smaller;
}

FUENTE

Tema: Re: [Diseño para Css design] Primitive Element Mar Mar 02, 2010 4:25 pm

¡Muy buen aporte, Iris! Sigue asi A Favor

» Algunos consejos para usuarios novatos