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

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

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

我

愿意接受任何建议和意见，因为这是我第一次编码，我想知道一个更有经验的人会做得更好。我一直在使用 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;
            }

只有 3 个建议：

使用HTML5标记，因为您已将其声明为 DTD。
永远不要像您为<img>提供边距那样设置直接标签的样式。尝试为每个元素提供类。
在 CSS 中使用最大类而不是 id。

这实际上取决于您的要求。对于个人网站，我认为您不需要更多。代码非常简单整洁。除非您希望身份验证之类的东西进入您的网站。简单就是美丽。

相关内容

最新更新

热门标签：