He diseñado una muy rápida de la página principal del sitio web y la primera vez como un programador me preguntaba si alguien mira el diseño y mi código y decirme donde se iba a realizar mejoras o cambios o cambiar completamente si es necesario!

El diseño es solo para uso personal y negro contiene secciones donde mi dirección personal es en el diseño de la web.

Estoy abierto a todas las sugerencias y comentarios como este es mi primera vez en la codificación y me gustaría saber qué más experiencia de la persona que lo haría mejor. He estado usando Dreamweaver y viendo en Google Chrome, hay un código HTML y CSS código, lo ideal sería que me gustaría ver en los diferentes navegadores.

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Rosy's Jewellery</title>
<link rel="stylesheet" type="text/css" href="CSS/Stylesheet.css">

</head>

<body>

<div class="wrapper">

    <div class="top">
        <!--Background set in CSS-->
    </div><!--  end of top-->

    <div class="menu">
        <h1>Rosy's Jewellery</h1>                   
        <ul id="nav">       
        <li><a href=""> Home            </a></li>
        <li><a href=""> Jewellery       </a></li>
        <li><a href=""> Locations       </a></li>
        <li><a href=""> Contact Us      </a></li>
        <li><a href=""> Reviews         </a></li>
        </ul>       
    </div>
    <!-- end of menu -->


  <div class="main">
        <p> Welcome to Rosy's Jewellery </p>
              <img src="Images/1.png">

              <img src="Images/2.png">

              <img src="Images/3.png">

              <img src="Images/4.png">

              <img src="Images/5.png">

              <img src="Images/6.png">  </div>
<!--close main-->



<div class="footer">
    <ul id="footer">
        <li> <img src="Images/facebook.png" /> 
        <img src="Images/twitter.png" />  </li>
        <li> Twitter Address</li>
        <li> Addres, Address, Address, Address </li>        
        <li> Telephone Number</li>
    </ul>
</div> 
<!--end of footer--> 
</div>
</body>
</html>

CSS

.wrapper        {
margin:0 auto;
background-color:#D1CED4;
}   
.top            {
background-color:#000000;
padding-bottom:2.5em;
}
.menu           {
background-color:#FFFFFF;
border-bottom-width:2px;
border-bottom-color:#000000;
border-bottom-style: solid;
position: relative;
top:-15px;
text-align:center;
font-family:Andalus;
font-size:18px;
padding-left:1em;
padding-right:1em;
overflow:hidden;
}
.menu h1        {
float:left;
color:#999966;
font-family:andalus;
font-size:24;
}
.main           {
width:65%;
margin:0 auto;
background-color:#FFFFFF;
text-align:center;
font-family:andalus;
font-size:24px;
padding-top:1px;
}
.footer         {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
font-family:andalus;
margin-bottom:-1em;
}
#footer li      {
display:inline-block;
padding-right:8em;
vertical-align:middle;
margin-top: -30px;
}
#nav            {
padding-top:15px;
}
#nav a          {
text-decoration:none;
}   
#nav a:link     {
color:black;
}
#nav a:visited  {
color:black;
}
#nav a:hover    {
color:black;
}
img             {
margin:42px;
}
#nav ul         {
display:inline-block;
}
#nav li         {
display:inline-block;
margin-right:4.5em;
padding-right:2.5em;
}
  • No puedo ver o no la foto de mi diseño ha subido? Nadie puede ver?
  • la hay. podemos ver que
  • se ha declarado doctype de html5, pero no se usa la etiqueta de html5.. alguna razón específica?
InformationsquelleAutor user3046451 | 2014-01-09

2 Comentarios

  1. 1

    Sólo 3 sugerencias:

    1. Uso HTML5 etiquetas ya que han declarado que como DTD.
    2. Nunca el estilo directo de una etiqueta como la que han dado margen a <img>. Tratar de dar clase para cada elemento.
    3. Uso máximo de clases en lugar del id de CSS.
  2. 0

    Realmente depende de sus necesidades. Para un sitio web personal no creo que no necesita más que eso. Los códigos son bastante sencilla y cuidada. A menos que usted desea autenticación y ese tipo de cosas en su sitio. Simple es bello.

Dejar respuesta

Please enter your comment!
Please enter your name here