Blog :D: 2015

MÉTODOS FÁCILES :D

COMO HACER TABLAS:

       <table>
   <tr>
  <td>Celda 1</td>
  <td>Celda 2</td>
   </tr>
   <tr>
  <td>Celda 3</td>
  <td>Celda 4</td>
   </tr>
 </table>

COMO HACER CELDAS

      <table border="1"> Ó <table border="1" width="30%">   <tr>
  <td>Celda 1</td>
  <td>Celda 2</td>
   </tr>
   <tr>
  <td>Celda 3</td>
  <td>Celda 4</td
   </tr>
 </table>


MENÚ BÁSICO
        html>
<head>
<meta charset="utf-8" />
<title>Menu con css y html</title>
<link rel="stylesheet" href="menu-con-css-y-html-css.css" type="text/css" />
</head>
<body>
<h2>Menú con css y html</h2>
<div id="menu">
 <menu>menu 1</menu>
    <menu>menu 2</menu>
    <menu>menu 3</menu>
    <menu>menu 4</menu>
    <menu>menu 5</menu>
</div>
</body>
</html>

              CSS CON ESE MENU

@charset "utf-8";
#menu{
 background:#f9f9f9;
 border:solid 1px #DEDEDE;
 border-radius:3px;
 width:180px;
 padding:5px;
 }
menu{
 color:#06F;
 margin:0px;
 background:linear-gradient(#fff 0%,#dedede 100%);
 background:-moz-linear-gradient(#fff 0%,#dedede 100%);
 background:-ms-linear-gradient(#fff 0%,#dedede 100%);
 background:-o-linear-gradient(#fff 0%,#dedede 100%);
 background:-webkit-linear-gradient(#fff 0%,#dedede 100%);
 border:solid 1px #f9f9f9;
 border-radius:5px;
 padding:5px;
 }
menu:hover{
 background:linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-moz-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-ms-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-o-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-webkit-linear-gradient(#DEDEDE 0%, #FFF 100%);
 border-radius:3px;
 border:solid 1px #333;
 color:red;
 }

MISMO MENU EN FORMA HORIZONTAL

#menu{
 background:#f9f9f9;
 border:solid 1px #DEDEDE;
 border-radius:3px;
 width:600px;
 padding:5px;
 }
menu{
 color:#06F;
 display:inline-block;
 margin:0px;
 background:linear-gradient(#fff 0%,#dedede 100%);
 background:-moz-linear-gradient(#fff 0%,#dedede 100%);
 background:-ms-linear-gradient(#fff 0%,#dedede 100%);
 background:-o-linear-gradient(#fff 0%,#dedede 100%);
 background:-webkit-linear-gradient(#fff 0%,#dedede 100%);
 border:solid 1px #f9f9f9;
 border-radius:5px;
 width:100px;
 padding:5px;
 }
menu:hover{
 background:linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-moz-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-ms-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-o-linear-gradient(#DEDEDE 0%, #FFF 100%);
 background:-webkit-linear-gradient(#DEDEDE 0%, #FFF 100%);
 border-radius:3px;
 border:solid 1px #333;
 color:red;
 }

lunes, 3 de agosto de 2015