Diseños Css basicos

Diseños Css basicos.

BlackBox.

Autor: Arcsin Web Templates.
Adaptado por: Makewebpage.

Texto por encima de la Pagina:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head> <FCK:meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <FCK:meta name="description" content="description" /> <FCK:meta name="keywords" content="keywords" /> <FCK:meta name="author" content="author" /> <link rel="stylesheet" type="text/css" href="default.css"/> <title>Blackbox</title> </head>   <body>   <div class="main">      <div class="gfx"><h1>Blackbox</h1></div>      <div class="menu">       <a href="index.html" _fcksavedurl="index.html"><span>Aenean</span></a>       <a href="index.html" _fcksavedurl="index.html"><span>Vestibulum cursus</span></a>       <a href="index.html" _fcksavedurl="index.html"><span>Suspendisse</span></a>             <a href="index.html" _fcksavedurl="index.html" id="last"><span>Elemen</span></a>    </div>      <div class="content">         <div class="item">          <h1>Titulo</h1>                 </div>      </div>

Texto por debajo de la Pagina:

Css Code sin Style Tags:

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;}     /* Template name: Blackbox Template URI: http://templates.arcsin.se/blackbox-website-template/ Release date: 2006-06-01 Description: A mystic dark lightweight design. Author: Viktor Persson Author URI: http://arcsin.se/  This template is licensed under a Creative Commons Attribution 2.5 License: http://templates.arcsin.se/license/ */  /* standard elements */ * {    margin: 0;    padding: 0; } a {    color: #999;    text-decoration: none; } body {    background: #000 url(http://img40.xooimage.com/files/f/1/9/bg-1cd2b6d.png) repeat-x fixed left bottom;    color: #555;    font: normal 0.7em sans-serif,Arial;    margin: 20px 0;    text-align: center; } ul {    margin: 12px 0; } li {    list-style: url(img/li.gif);    margin-left: 18px; } code {    background: url(http://img44.xooimage.com/files/e/4/f/bgcode-1cd2b67.gif);    color: #888;    display: block;    font: normal 1em "Lucida Sans Unicode",serif;    margin-bottom: 12px;    padding: 3px 6px;    white-space: pre; }  cite {    background: url(img/quote.gif) no-repeat;    color: #666;    display: block;    font: normal 1.1em "Lucida Sans Unicode",serif;    margin-bottom: 12px;    padding-left: 28px; }   /* main structure */ .main {    background: #000;    border: 3px double #EEE;    border-color: #141414 #202020 #222 #202020;    margin: 20px auto 4px auto;    text-align: left;    width: 600px; }   /* header */ .gfx {    background: #222 url(http://img10.xooimage.com/files/2/c/b/dark_pixel-856b3.jpg) no-repeat;    height: 240px; } .gfx h1 {    color: #111;    font: normal 2.6em Tahoma,sans-serif;    padding: 16px 20px; }   /* menu */ .menu a {    background: #000 url(http://img26.xooimage.com/files/4/6/1/bgmenu-1cd2b52.png) repeat-x;    border-right: 1px solid #222;    border-top: 1px solid #1A1A1A;    color: #444;    float: left;    font-size: 1.2em;    padding-top: 4px;    width: 149px; height: 36px; } .menu a span {    padding-left: 6px; } .menu a:hover {    background-position: left bottom;    color: #666; } .menu a#last {    border-right: none;    width: 150px; }   /* content */ .content {    background: #1A1A1A;    border-top: 1px solid #1A1A1A;    clear: both; } .content h1 {    color: #666;    font: bold 1.1em sans-serif,Arial;    margin: 0 0 4px; } .content p {    margin: 0 0 12px; } .item {    background: #030303 url(img/bgitem.gif) repeat-x;    padding: 8px 10px; }   /* footer */ .footer {    background: #0A0A0A;    color: #666;    padding: 5px; } .footer .left, .footer .right {padding: 0 12px;} .footer .right, .footer .right a {color: #444;} .footer .right a:hover {color: #999;}  /* floats */ .left {float: left;} .right {float: right;} .clearer {clear: both;}

Google Style.

Autor: Proupload.

Texto por encima de la Pagina:

<table border=1 bgcolor=#ffffff width=950px bordercolor=#000000 cellpadding=0 cellspacing=0 class="protable"> <tr> <td> <body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 src='logo2.png' topmargin=3 marginheight=3> <span id=main> <div id=prohead> <div id=probar> <nobr> <a href="link.htm" _fcksavedurl="link.htm" class=prob1 style="color: #000000;font-weight:bold;text-decoration:none;">Link</a><a href="link.htm" _fcksavedurl="link.htm" class=prob1>Link</a> <a href="link.htm" _fcksavedurl="link.htm" class=prob1>Link</a> <a href="link.htm" _fcksavedurl="link.htm" class=prob1>Link</a> <a href="link.htm" _fcksavedurl="link.htm" class=prob1>Link</a> </nobr> </div> <div id=probar2 width=100%> <nobr> <a href="link.htm" _fcksavedurl="link.htm" class=prob4>Link</a> | <a href="link.htm" _fcksavedurl="link.htm" class=prob4>Link</a> | <a href="link.htm" _fcksavedurl="link.htm" class=prob4>Link</a> </nobr> </div> <div class=proline style=margin-left:auto;margin-right:auto;></div> </div> <center> <span id=body> <center> <br clear=all id=lgpd> <div align=left style="background:url(http://img44.xooimage.com/files/9/a/2/logo-180c31c.png) no-repeat;height:146px;width:565px" id=logo"><div nowrap style="color:#000;font-size:16px;font-weight:bold;left:172px;position:relative;top:100px">DiseÃ±os Css basicos</div></div> <br /> <table bordercolor="#000000" border="1" width="750" style="border-collapse:collapse"> <tr> <td>

Texto por debajo de la Pagina:

</td> </tr> </table> <br> <span class=fade> <font size=-1><a href="link.htm" _fcksavedurl="link.htm">Texto</a>: Texto.</font><br /></span></center></span> <span id=footer> <center id=fctr> <br /> <font size=-1><a href="link.htm" _fcksavedurl="link.htm">Texto</a> - <a href="link.htm" _fcksavedurl="link.htm">Texto</a> - <a href="link.htm" _fcksavedurl="link.htm">Texto</a></font> <p> <font size=-2>© 2010 - <a href="/" _fcksavedurl="/">Tu Web</a></font> </p>  <p> Design by: <a href="http://proupload.es.tl/" _fcksavedurl="http://proupload.es.tl/">ProUpload</a> </p>  </center> </span> </span> </div> </td> </tr> </table> <script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("load").style.display="none";
}
</script> <div id="load" style="display:scroll;position:fixed;bottom:10px;right:10px"> <img src="http://img24.xooimage.com/files/2/b/d/ajax-loader-ad9a8f.gif" _fcksavedurl="http://img24.xooimage.com/files/2/b/d/ajax-loader-ad9a8f.gif"/> </div>

Css Code sin Style Tags:

body {background:url(http://img718.imageshack.us/img718/7077/fondop.jpg);background-repeat:no-repeat;background-attachment:fixed;font-size:13px;font-family:verdana;} .gac_m td {line-height:17px;} form {margin-bottom:20px;} body,td,a,p,.h {font-family:arial,sans-serif;} .h {color:#36c;font-size:20px;} .q {color:#00c;} .ts td {padding:0;} .ts {border-collapse:collapse;} em {font-weight:bold;font-style:normal;} .lst {font:17px arial,sans-serif;margin-bottom:.2em;vertical-align:bottom;} input {font-family:inherit;} .lsb,.gac_sb {font-size:15px;height:1.85em!important;margin:.2em;} #fctr,#prohead,#pmocntr,#sbl,#tba,#tbe,.fade {opacity:0;} #fctr,#prohead,#pmocntr,#sbl,#tba,#tbe,.fade {background:#fff;} #probar {float:left;height:22px;} .proline,.pbd {border-top:1px solid #8aa40d;font-size:1px;} .proline {height:0;position:relative;top:0px;width:998px;} #pbs,.pbm {background:#fff;left:0;position:absolute;text-align:left;visibility:hidden;widht:225px;z-index:1000;} .pbm {border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;z-index:1000;} #probar2 {padding-bottom:7px !important;text-align:right;} #probar,#probar2 {font-size:13px;padding-top:1px !important;} .prob1,.prob3,.prob3i,.prob3f {zoom:1;margin-right:.5em;} .prob2,.prob2i,.prob2f {display:block;padding:.2em .5em;} a.prob1,a.prob2,a.prob3,a.prob4 {color:#00c !important;} .prob2,.prob2i,.prob2f,.prob3,.prob3i,.prob3f {text-decoration:none;} a.prob2:hover {background:#36c;color:#fff !important;} .protable {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:0.80;border-collapse:collapse;margin-left:auto;margin-right:auto;margin-right:3px;margin-left:3px;} #fctr,#prohead,#pmocntr,#sbl,#tba,#tbe,.fade {opacity:1;} a img {border:none;} a {color:#00c !important;}  table[height="102"] {margin-left:auto;margin-right:auto;} #content {text-align: left;margin-top:5px;margin-bottom:5px;margin-right:5px;margin-left:5px;} #header {display:none;} #title {display:none;} #nav_container {display:none;} #sidebar_heading {display:none;}

Skyblue and Black.

Autor: Proupload.

Texto por encima de la Pagina:

Texto por debajo de la Pagina:

Css Code sin Style Tags:

* {margin:0; padding:0;} body, div, span, div.paragraph, a, img, ul, ol, li, caption, table, thead, tbody, tfoot, tr, th, td, form, fieldset, legend, label, dl, dt, dd, blockquote, applet, object, h1, h2, h3, h4, h5 {border:0;} body, div, span, p, a, img, ul, ol, li, caption, table, thead, tbody, tfoot, tr, th, td, form, fieldset, legend, label, dl, dt, dd, blockquote, applet, object, h1, h2, h3, h4, h5 {border:0;} body {font:0.8em/1.5 "arial", serif; text-align:center;} h1, h2, h3, h4, h5, h6 {margin:15px 0 10px 0;} h1 {font-size:180%;} h2 {margin:5px 0; font-size:160%;} h3 {font-size:120%;} h4, h5 {font-size:100%;} table, ul, ol, dl, fieldset {margin:15px 0;} table {border-collapse:collapse; border-spacing:0; font-size:100%;} th {text-align:center; font-weight:bold;} th, td {padding:3px 7px;} ul, ol {margin-left:30px;} ul ul, ol ol {margin:0; margin-left:20px;} ol {list-style-type:decimal;} li {display:list-item;} dt {font-weight:bold;} dd {margin-left:30px;} fieldset {position:relative; padding:10px;} legend {position:absolute; top:-1em; margin:0; padding:5px 10px; font-size:100%; font-weight:bold;} .box {min-height:1px;} .box {_height:1%;} .box:after {display:block; visibility:hidden; clear:both; line-height:0; font-size:0; content:".";} .box ul {margin:15px 0; padding:0; list-style:none;} .box ul li {margin:0; padding:2px 0 3px 0;} .relative {position:relative;} .clear {clear:both;} .f-left {float:left !important;} img.f-left {float:left; margin-right:10px;} .f-right {float:right !important;} img.f-right {float:right; margin-left:10px;} .t-left {text-align:left !important;} .t-center {text-align:center !important;} .t-right {text-align:right !important;} .t-justify {text-align:justify !important;} .va-top {vertical-align:top;} .va-middle {vertical-align:middle;} .va-bottom {vertical-align:bottom;} .nom {margin:0 !important;} .nomt {margin-top:0 !important;} .nomb {margin-bottom:0 !important;} .noscreen {display:none;} .bigger {font-size:110%;} .smaller {font-size:85%;} ul#ul-rss {margin:15px 0; padding:0; list-style:none;} ul#ul-rss li {margin:0; padding:0; padding-left:20px;} ul.ul-list {margin:15px 0; padding:0; list-style:none;} ul.ul-list li {margin:0; padding:2px 0 3px 0;} ul.ul-list-02 {margin:15px 0; padding:0; list-style:none;} ul.ul-list-02 li {margin:0; padding:2px 0 3px 0;} .main {width:850px; margin:0 auto; text-align:left;} #header .main {width:840px; position:relative; padding:25px 0 25px 10px;} #logo {width:100%; margin:0; font-size:220%; line-height:1; font-weight:bold; letter-spacing:-1px;} #logo a {text-decoration:none;} #search {position:absolute; top:25px; right:10px; margin:0; padding:0; border:0;} #search div {position:relative; width:230px;} #search-input {position:absolute; top:0; left:0; overflow:hidden; width:180px; height:30px; border:0; font-size:85%;} #search-input input {position:relative; top:7px; left:30px; width:140px; margin:0; padding:0; border:0;} #search-submit {position:absolute; top:0; right:0; border:0; width:40px; height:30px; font-weight:bold; text-align:center; color:#FFF; font-size:12px;} #nav ul {margin:0; padding:0; list-style:none;} #nav ul li {display:inline; margin:0; padding:0;} #nav ul li a {display:block; float:left; padding:10px 15px; text-decoration:none;} #nav ul li a:hover {text-decoration:underline;} #nav ul li.current_page_item a {font-weight:bold; text-decoration:none;} #active a:link { text-decoration:underline; } #active a:hover { text-decoration:underline; } #active a:visited { text-decoration:underline; } #switcher {float:right; margin:0; padding:10px 10px 0 0;} #content {padding:25px 20px; min-height:400px; height:auto !important; height:400px;} .content-in {padding:10px 15px;} #aside {float:right; overflow:hidden; width:230px; padding:10px;} #aside .title {margin:0; font-size:100%; font-weight:bold;} #aside .aside-padding {padding:0 0px 15px 0;} #footer {clear:both; padding:15px;} #footer div.paragraph {margin:0;} #footer p {margin:0;} #topstory, .article {position:relative; padding:10px 15px;} #topstory .info, .article .info {padding-bottom:2px;} #topstory .info h2, #topstory .info div.paragraph, .article .info h3, .article .info div.paragraph {margin:0;} #topstory .info h2, #topstory .info p, .article .info h3, .article .info p {margin:0;} #topstory .info div.paragraph, .article .info div.paragraph {padding-top:5px;} #topstory .info p, .article .info p {padding-top:5px;} #topstory p.date, .article p.date {display:block; position:absolute; top:0; left:-50px; margin:0; overflow:hidden; width:50px; height:41px; text-align:center;} #topstory p.date span, .article p.date span {display:block; padding-top:14px; font-size:85%; font-weight:bold;} #topstory div.paragraph, .article div.paragraph {margin:10px 0;} #topstory p, .article p {margin:10px 0;} .article div.paragraph {margin:10px 0;} .article p {margin:10px 0;} .ico-comment {padding-left:20px;} .navigation {display:block; margin:10px 10px 60px 10px; text-align:center;} .alt {margin:0; padding:10px; background-color:#f8f8f8; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} .commentlist {margin:0; padding:0; list-style:none;} .commentlist li {margin:10px 0; padding:5px 10px;} .commentlist div.paragraph {margin:10px 0; font-weight:normal; line-height:1.5em;} .commentlist p {margin:10px 0; font-weight:normal; line-height:1.5em;} #commentbox {margin-left:110px;} #commentform div.paragraph {margin:5px 0;} #commentform p {margin:5px 0;} #commentform input {width:170px; padding:2px; margin:5px 5px 1px 0;} #commentform textarea {width:75%; padding:2px; margin:0 auto;} #commentform #submit {margin:0; width:40px; height:30px;} #commentform .inp-border {border:1px solid #CCC; border-right:1px solid #AAA; border-bottom:1px solid #AAA;} .postmetadata {font-size:85%;} .commentmetadata {margin:0; font-weight:normal; font-size:85%;} #wp-calendar {width:100%; border:1px solid #CCC;} #wp-calendar th {background:#DDD;} #wp-calendar tr td {border:1px solid #CCC; text-align:center;} #wp-calendar tr td#today {background:#888; color:#FFF; font-weight:bold;} #wp-calendar tr td a {display:block;} #wp-calendar tfoot {display:none;} body {background:#2f2f2f; color:#222;} a {color:#000;} a:hover {color:#2D7DF5;} ul.ul-list-02 {border-top:1px solid #EAEAEA;} ul.ul-list-02 li {border-bottom:1px solid #EAEAEA;} ul#ul-rss li a {color:#000;} ul#ul-rss li a:hover {color:#F50;} .box ul li {background: none 0 100% repeat-x;} ul#ul-rss li {background: none 0 3px no-repeat;} ul.ul-list li {background: none 0 100% repeat-x;} #header {background: none 0 100% repeat-x;} #search-input {background: none 0 0 no-repeat;} #search-submit {background:#000  none 0 0 no-repeat;} #topstory .info, .article .info {background: none 0 100% repeat-x;} #topstory p.date, .article p.date {background: none 0 0 no-repeat;} .article .info {background: none 0 100% repeat-x;} .article p.date {background: none 0 0 no-repeat;} .ico-comment {background: none 0 2px no-repeat;} .main.bg {background-color:#FFF;} #header {background-color:#43BBFA;width:850px;margin-left: auto; margin-right: auto;} #logo {color:#FFF;text-align:center;} #logo span {color:#000;} #logo a {color:#FFF;} #search-input input {background-color:#FFF;} #nav {background:#000;} #nav ul li a {border-right:1px solid #303030; color:#FFF;} #nav ul li.current_page_item a {color:#23B0F6;} #aside a {color:#2D7DF5;} #aside a:hover {color:#000;} #aside .title {border-bottom:1px solid #CACACA;} #footer {background:#000; color:#AFAFAF;text-align:center;} #footer a {color:#AFAFAF;} #footer a:hover {color:#FFF;} .low {color:#808080;} #topstory {background:#C3E9FE;} #topstory p.date {background-color:#23B0F6;} #topstory p.date span {color:#000;} .article {background:#FFF; border-bottom:1px solid #EAEAEA;} .article p.date {background-color:#505050;} .article p.date span {color:#FFF;}  div.paragraph ul, div.paragraph ol, div.paragraph li { list-style-position: inside; }  table {margin-left:auto;margin-right:auto;background:#43BBFA repeat-x top left;border:1px solid #000000;-moz-border-radius:5px;-webkit-border-radius:5px; border-radius:5px;margin-bottom:8px;padding:5px 8px;} #title {text-align:center;color:#FFFFFF;font-size:17px;background:#43BBFA repeat-x top left;border:1px solid #000000;-moz-border-radius:5px;-webkit-border-radius:5px; border-radius:5px;margin-bottom:8px;padding:0px 0px;} border {border:1px solid #000000;} h1#header {display: none;} #nav_container {display:none;}

En la parte del menú, si quieren agregar más links, solo pegan este código debajo:

<li><a href="/Link.htm">Link</a></li>

Black Effect.

Autor: Drakox.

Texto por encima de la Pagina:

Css Code sin Style Tags:

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} #text{ color: ffffff; position: absolute; top: 100px; margin-left:-300px; left: 50%; } body { background-image:url(fondo );background-color:#ffffff;} *{ padding: 0; margin: 0; } #Designmystic { margin: 0 auto; width: 800px; height:800px; background-image:url(http://img23.xooimage.com/files/e/6/1/designdrakoxnet-1328656.png);} #content { position: absolute; left: 45%; top: 339px; margin-left:-300px; width: 710px; height: 455px; padding:10px; color: #transparent; font-size:13px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;} #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#cccccc;} a{ color:#ffffff; text-decoration: none; font-size:13px;} a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:link { color: #000000; font-size: 13px; text-decoration: none;} a:active { color: #000000; font-size: 13px; text-decoration: none;} a:visited { color: #000000; font-size: 13px; text-decoration: none;} div.lux { position: absolute; z-index: 3; top: 172px; left: 52%; margin-left:-185px; width: 647px; } .lux a { border: 0px solid #xxxxxx; background-color: #xxxxxx; background-image:  none; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height:21px; color: #ffffff; font-size: 24px; }

Black Icon.

Autor: Team-Webmaster.

Texto por encima de la Pagina:

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 163px;
left: 52%;
margin-left: 149px;
width: 100px;
}

.menu li
{
width: 95px;
float: left;
}

.menu a
{
border: 0px solid #ffffff;
background-color: #xxxxxx;
background-image:  none;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height:67px;
color: #808080;
}

.menu a:hover
{
background-color: #transparent;
background-image:  none;
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 15px;
display: none;
width: 70px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->  </style>  <script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script> <div class="menu"> <li><a href="Url" _fcksavedurl="Url"></a> </li> <li><a href="Url" _fcksavedurl="Url"></a> </li> <li><a href="Url" _fcksavedurl="Url"></a> </li> <li><a href="Url" _fcksavedurl="Url"></a> </li> <li><a href="Url" _fcksavedurl="Url"></a> </li>   </div>  <div id="Designmystic">  <div id="text"><h1></h1> </div>   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>

Css Code sin Style Tags:

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;}    #text{ color: ffffff; position: absolute; top: 100px; margin-left:-300px; left: 50%; }  body { background-color:#262626;}   *{ padding: 0; margin: 0; }  #Designmystic { margin: 0 auto; width: 610px; height:600px; background-image:url(http://www.fileden.com/files/2008/3/24/1833523/designblackicon.png);}   #content { position: absolute; left: 50%; top: 229px; margin-left:-283px; width: 380px; height: 360px; padding:10px; color: #transparent; font-size:13px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;}     #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#cccccc;}    a{ color:#ffffff; text-decoration: none; font-size:13px;}  a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;}  a:link { color: #000000; font-size: 13px; text-decoration: none;}  a:active { color: #000000; font-size: 13px; text-decoration: none;}  a:visited { color: #cccccc; font-size: 13px; text-decoration: none;}

Team-AyudaMaster | Soporte para tu paginawebgratis