Question

我刚刚设计了一个非常快速的网站主页，作为第一次编码器，我想知道是否有人会查看设计和我的代码并告诉我他们将在何处进行改进或更改，或者在必要时完全更改它？ / p>

该设计仅供个人使用，并包含黑色部分，我的个人地址在网站设计中。

我对任何建议和评论持开放态度，因为这是我第一次参与编码，我想知道更有经验的人会做得更好。我一直在使用Dreamweaver并在谷歌浏览器上查看它，有一个HTML代码和一个CSS代码，理想情况下我希望它可以在不同的浏览器上查看。

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;
            }

Answer 1

只有3条建议：

使用HTML5标记，因为您已将其声明为DTD。
永远不要像你给<img>提供保证金一样直接标记。尝试为每个元素提供课程。
在CSS中使用最大类而不是id。

Answer 2

这实际上取决于您的要求。对于个人网站，我认为你不需要更多。代码非常简单和整洁。除非你想要身份验证和那些东西进入你的网站。简单即美。

第一个网页设计和代码，Dreamweaver HTML和CSS

2 个答案: