文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CRAFT412游戏网站

问CRAFT412游戏网站
EN

Code Review用户
提问于 2014-10-24 23:14:05
回答 1查看 186关注 0票数 8

我对编码很陌生，我试着做我的第一个网站，但是我觉得我没有用一个合适的结构对它进行编码。

这里有一个来自我的网站的HTML页面，以及所有页面常见的CSS。我也做了一个jsFiddle。

代码语言：javascript
复制
/*CSS FOR ALL PAGES*/

/*ID SELECTIONS SECTION*/

/*BODY/WRAPPER SECTION*/
 body {
    background-color:black;
}
#wrapper {
    width: 900px;
    margin: 0px auto;
    background-color: #e2e2e2;
 }
/*TOP BANNER SECTION*/
 #banner {
    background-color:black;    
}
#logo {
    padding-top:27px;
    margin :-27px;
}
#ip {
    color:white;
    float:right;
}
/*TOP NAV BAR SECTION*/
#nav_bar {
    background-color: #a22b2f;
    padding:1px;
    box-shadow: 0px 2px 10px;
    height:40px;
    padding-bottom:10px;
    }         
#nav_bar ul li {
    display: inline-block;    
}
#nav_bar ul li a {
    color: white;
    text-decoration:none;
    font-weight:bold;
    font-size:16px;
    padding:10px;     
    }
#nav_bar ul li ul {
    display: none;   
}
#nav_bar>ul>li>a:hover {
    background:#8c1b1f;
    padding:10px;
    padding-top:17px;
    padding-bottom:17px;  
}
#nav_bar>ul>li>ul>li>a:hover {
    background:#b1b1b1;             
}
#nav_bar ul li:hover ul {
    display: block;
    position: absolute;
    background: #e2e2e2;
    padding: 0px;
    padding-top:5px;
    padding-bottom:5px;
    border: 1px solid black;
    border-radius:5px;
    line-height:1.5em;
}
#nav_bar ul li:hover ul li {
    display: block;    
}
#nav_bar ul li:hover ul li a {
    color: black;
    font-size:14px;
    font-weight:bold;
    margin-left:-20px;
    padding:5px;
    }
/*BOTTOM FOOTER SECTION*/
 #bottom_footer {
    width:100%;
    height:50px;
    margin-top:40px;
    border-top:solid 10px black;
    border-bottom:solid 3px black;
    }
#created_by {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    margin:17px;
}
#social_media_youtube {
    float:left;
    margin:-47px;
    margin-left:275px;
}
#social_media_twitch {
    float:left;
    margin:-44px;
    margin-left:335px;
}
#social_media_twitter {
    float:right;
    margin:-53px;
    margin-right:320px;
}
#social_media_facebook {
    float:right;
    margin:-47px;
    margin-right:280px;
}
/*ELEMENT SELECTIONS SECTION*/
 p {
    font-family:Arial, Helvetica, sans-serif;
    margin-left:20px;
    margin-right:20px;
}
li {
    font-family:Arial, Helvetica, sans-serif;
    margin-left:20px;
}
h2 {
    font-family:Arial, Helvetica, sans-serif;
}
h3 {
    font-family:Arial, Helvetica, sans-serif;
    margin-left:20px;
}
h4 {
    font-family:Arial, Helvetica, sans-serif;
    margin-left:20px;
}
/*CSS FOR SPECIFIC PAGES*/

/*CLASS SELECTIONS SECTION*/

/*VOTE PAGE*/
 .vote_button {
    margin-left:20px;
}
/*STATUS PAGE*/
 .status {
    margin:20px;
}
/*INFO PAGE*/
 .gallery_thumbnails img {
    height: 60px;
    width: 106px;
    padding: 1px;
}
.gallery_thumbnails img:hover {
    border: 3px solid #a22b2f;
    cursor: pointer;
}
.gallery_thumbnails {
    position: relative;
}
.imagebox {
    display: inline;
}
.text {
    display:none;
    position: absolute;
    left:140px;
    top: -30px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:white;
    font-weight:bold;
}
.imagebox img:hover + .text {
    display: block;
}   
/*SPECIFIC PAGES ID SELECTIONS SECTION*/

/*INDEX/GAMEMODE PAGES*/
 #banner_image {
    padding-top:30px;
}
代码语言：javascript
复制
<!DOCTYPE HTML>
<html>
    
    <head>
        <title>CRAFT412 - Info</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
    </head>
    <!--HTML FOR ALL PAGES-->
    <!--BODY SECTION-->
    
    <body>
        <!--WRAPPER SECTION-->
        <div id="wrapper">
            <!--TOP BANNER SECTION-->
            <div id="banner">
                <div id="logo">
                    <center>
                        <img src="images/CRAFT412 - Logo.png" width="500" height="100" />
                    </center>
                </div>
                <div id="ip">
                     <h4>SERVER IP: 82.31.216.149:25565</h4>

                </div>
                <div id="teamspeak_logo"> <a href="ts3server://82.31.216.149:9987">
                                                                  <img src="images/CRAFT412 -Teamspeak logo.png" width="136" height="40"/></a>

                </div>
            </div>
            <!--TOP NAV BAR SECTION-->
            <div id="nav_bar">
                <ul>
                    <li><a href="index.html">HOME</a>
                    </li>
                    <li><a href="status.html">STATUS</a>
                    </li>
                    <li><a href="info.html">INFO</a>
                    </li>
                    <li><a href="#">GAMEMODES</a>

                        <ul>
                            <li><a href="survival.html">SURVIVAL</a>
                            </li>
                            <li><a href="pure-pvp.html">PURE-PVP</a>
                            </li>
                            <li><a href="gamesworld.html">GAMESWORLD</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="rules.html">RULES</a>

                    </li>
                    <li><a href="vote.html">VOTE</a>
                    
                    </li>
                    <li><a href="contact.html">CONTACT</a>

                    </li>
                </ul>
            </div>
            <!--INFO CONTENT-->
             <h3>INFO</h3>

             <h3><br>SERVER INFO</h3>

             <h4>This server is still under development, so problems may occur</h4>

             <h4>Staff have the right to spy and monitor players who are suspected of breaking the rules</h4>

             <h3><br>STAFF</h3>

            <div id="staff_images">
            <center>
                <img src="images/GR412.png" title="GR412 - Owner" />
                <img src="images/JoeVis.png" title="JoeVis - Technician" />
                <img src="images/Scott.png" title="Scott1541 - Administrator" />
                <img src="images/Halo.png" title="Halo28 - Administrator" />            </center>
            </div>
            <center>
                 <h3>
                                    <br>IMAGE GALLERY
                                 </h3>

            </center>
            <div class="image_gallery" align="center">
                <div class="gallery_preview">
                    <img name="preview" src="images/IMAGE GALLERY 1.png" alt="" />
                </div>
                <div class="gallery_thumbnails">
                    <div class="imagebox">
                        <img onmouseover="preview.src=img1.src" name="img1" src="images/IMAGE GALLERY 1.png" alt="" />
                        <div class="text">HomeLobby</div>
                    </div>
                    <div class="imagebox">
                        <img onmouseover="preview.src=img2.src" name="img2" src="images/IMAGE GALLERY 2.png" alt="" />
                        <div class="text">HomeLobby</div>
                    </div>
                    <div class="imagebox">
                        <img onmouseover="preview.src=img3.src" name="img3" src="images/IMAGE GALLERY 3.png" alt="" />
                        <div class="text">HomeLobby</div>
                    </div>
                    <div class="imagebox">
                        <img onmouseover="preview.src=img4.src" name="img4" src="images/IMAGE GALLERY 4.png" alt="" />
                        <div class="text">HomeLobby</div>
                    </div>
                    <div class="imagebox">
                        <img onmouseover="preview.src=img5.src" name="img5" src="images/IMAGE GALLERY 5.png" alt="" />
                        <div class="text">HomeLobby</div>
                    </div>
                </div>
            </div>
            <!--HTML FOR ALL PAGES-->
            <!--BOTTOM FOOTER SECTION-->
            <div id="bottom_footer">
                <div id="created_by">
                    <center>2014 © GR412</center>
                </div>
                <div id="social_media_youtube"> <a href="https://www.youtube.com/user/GR412" target="_blank">
                                                                               <img src="images/CRAFT412 - YouTube Button.png" width="40" height="40"/></a>

                </div>
                <div id="social_media_twitch"> <a href="http://www.twitch.tv/gr412" target="_blank">
                                                                              <img src="images/CRAFT412 - Twitch Button.png" width="35" height="35"/></a>

                </div>
                <div id="social_media_twitter"> <a href="https://twitter.com/GR412" target="_blank">
                                                                               <img src="images/CRAFT412 - Twitter Button.png" width="55" height="55"/></a>

                </div>
                <div id="social_media_facebook"> <a href="https://www.facebook.com/GR412" target="_blank">
                                                                                <img src="images/CRAFT412 - Facebook Button.png" width="45" height="40"/></a>

                </div>
            </div>
        </div>
    </body>

</html>
beginner
html
css
EN

回答 1

Code Review用户

回答已采纳

发布于 2014-10-25 00:34:10

我只想把重点放在标记上。如果您通过标记验证器发送它，您将得到33(!)错误：

  • 中心标记对您的doctype无效(您有HTML5 doctype，它在HTML4中被弃用)
  • 图像标记没有alt属性(如果它们纯粹是装饰性的，只需使用alt=""，否则您会想要为您的Facebook图像添加一些描述性的内容，比如alt="Facebook" )。
  • 与在图像文件名中使用空格而不将其转换为%20有关的错误
  • div元素上的对齐属性已过时。
  • img元素上的name属性已过时。

从语义上讲，你滥用了很多元素。在我看来，您选择h3和h4元素纯粹是因为它们使您的文本更大，而不是因为它们是标题(例如。ip地址，还有你剩下的所有文本)。选择描述内容的标记，然后用CSS使其看起来像您想要的样子。

所以..。这是：

代码语言：javascript
复制
 <h4>This server is still under development, so problems may occur</h4>

 <h4>Staff have the right to spy and monitor players who are suspected of breaking the rules</h4>

    <div id="created_by">
        <center>2014 © GR412</center>
    </div>

应该更像这样：

代码语言：javascript
复制
<p class="warning">This server is still under development, so problems may occur.  Staff have the right to spy and monitor players who are suspected of breaking the rules.</p>

<p class="copyright">©2014 GR412</p>

和

代码语言：javascript
复制
.warning {
    font-size: 1.1em;
    /* etc */
}

.copyright {
    font-size: .8em;
    text-align: center;
}

您正在使用br元素作为在元素周围获得额外空间的一种方法，而应该保留它来强制内容中的换行。相反，您应该使用CSS来增加页边距。

您已经有两个图像集合标记为div (staff_images和image_gallery)。最好使用无序列表。

在您的导航中，您的所有文本都是大写的。这没有本质上的问题，但这似乎是一个设计决策，而不是因为内容需要它。如果是这样的话，使用CSS将是一个更好的选择(您永远不知道，您可能最终决定不希望它在所有大写中，并且在CSS中更改它比在标记中更改它要少)：

代码语言：javascript
复制
#nav_bar {
    text-transform: uppercase;
}

虽然在布局方面使用div当然比使用表更好，但是在HTML5中有更多更合适的选项：

  • 标题
  • 导航
  • 正文
  • 页脚
  • 等。

你可以在这里读到更多关于他们的信息：http://html5doctor.com/

避免建立无处可去的链接(<a href="#">GAMEMODES</a>)。如果您只希望文本具有与您的链接相同的外观，则将文本样式设置为类似链接的样式。

票数 9
EN
页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://codereview.stackexchange.com/questions/67878

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档