文章/答案/技术大牛

发布

社区首页 >问答首页 >CRAFT412游戏网站，现在有div和spans

问CRAFT412游戏网站，现在有div和spans
EN

Code Review用户

提问于 2015-08-14 19:20:12

回答 1查看 509关注 0票数 3

因为我刚接触HTML和CSS，所以我想知道我的HTML布局是否正确？在我将div id用于任何事情之前，一切看起来都很好，但是最近我听说了span和div classes的使用，所以我尝试在我的网站上使用它们。

问题是，我不知道我是否在我的网站上正确地使用了div class和span。我真的很困惑。我试过问之前的问题，但我不明白原因。我也试着阅读它们，但是我仍然不确定它们之间的区别。我不明白span和id上下文中的内联或块行意味着什么。我只想知道我的代码结构在技术上是否正确和有效。我的意思是它有效，但我想确保我使用的是正确的练习。

下面是我的HTML代码的一部分：

<!--GLOBAL HTML-->

<!--Code marked with GREEN is unused code that may be used later on-->

<!DOCTYPE html>

<html>

<!--CSS LINKS-->

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/index.css" rel="stylesheet" type="text/css" media="screen">

<!--TAB TITLE-->

<head>
    <meta name="author" content="GR412">
    <title>CRAFT412 - Home</title>
</head>

<!--BODY-->

<body>

<!--TOP BANNER-->

<div class="banner">

                  <div id="banner-image">
                                       <img src="images/SiteBackground.png" width="100%" height="143.5" alt="SiteBackground">
                                   </div> 

                  <div id="logo"> 
                               <img src="images/CRAFT412 - Logo.png" width="500" height="281" alt="CRAFT412">
                           </div>

                  <div id="ip-box">
                                 <span id="ip-text">SERVER IP 
                                  craft412.serveminecraft.net</span>
                            </div>

                  <div id="teamspeak-box">
                                        <a href="ts3server://craft412.serveminecraft.net:9987">
                                        <span id="teamspeak-box_2"></span>
                                        <span id="teamspeak-text">TEAMSPEAK</span>
                                        <img  id="teamspeak-image" src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
                                        </a>
                                    </div>

                  <div id="red-bar"></div>

</div>

<!--WRAPPER-->

<div class="wrapper">

                   <!--TOP NAV BAR-->

                   <div class="nav-bar">
                                      <ul>
                                        <li><a href="index.html" class="active-page">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>

                   <!--INDEX CONTENT-->

                   <div id="index-banner">
                                        <img class="bottom" src="images/SPAWN IMAGE.png" height="360" alt="INDEX BANNER">
                                        <img class="top" src="images/SURVIVAL IMAGE - GAMEMODES.png" height="360" alt="INDEX BANNER 2">
                                    </div>

                   <div id="welcome-text">                                        
                                         <h3>Welcome to CRAFT412</h3>
                                         <h3>We are currently running version 1.8.1</h3>
                                         <h3>Survival / PurePVP / GamesWorld</h3>                                       
                                     </div>

                   <div id="trailer-title">                                   
                                         <h4><br>SERVER TRAILER</h4>
                                     </div>

                   <div id="trailer-video">
                                         <iframe width="832" height="468" frameborder="0" src="http://www.youtube.com/embed/dfbWw757Iow"></iframe>
                                     </div>
                                 </div>                                                                                                                            

                   <!--GLOBAL HTML-->

                   <!--BOTTOM FOOTER SECTION-->

                   <div class="bottom-footer">                    
                                          <span id="created-by">
                                                             <p>© 2015 GR412</p>
                                                         </span>

                                          <span 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" alt="YOUTUBE"></a>
                                                                   </span>

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

                                          <span id="social-media-twitter"> 
                                                                       <a href="https://twitter.com/GR412" target="_blank">
                                                                       <img src="images/CRAFT412 - Twitter Button.png" width="55" height="55" alt="TWITTER"></a>
                                                                   </span>

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


</div>

</body>

</html>

css

beginner

html

回答 1

Code Review用户

发布于 2015-08-14 21:12:57

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

包括HTML标签中的宽度和高度不太好，HTML是关于内容的，而CSS则使它看起来很好看和讨人喜欢。把这两件事混为一谈，就会带来困难。

作为一个小注意，如果你想要一个图像是一定的大小，调整它自己，并上传调整大小的图片。这意味着您不必使用代码来调整它。这也意味着每次打开页面时，图像都不需要调整大小。这对你和用户来说都是双赢。

这取决于你，但如果我在设计社交媒体页脚，我会使用一个导航标签，只包括所有的链接和图像标签在一个无序的列表，如导航条。这意味着您可以将所有按钮样式相同，而无需更改CSS文件中的多行代码。

© = ©
A space = %20, taking all the spaces out of links, including to images is a good thing

如果您将它们用于文本的大小，则使用CSS很容易就可以解决这个问题。

因为某种原因，里面也有一个断线标签？同样，样式使用CSS，而不是空格。

据推测，从网站上有许多页面的链接中，更改每个页面上的页眉和页脚，每次发生小的更改都会变得单调乏味，浪费时间。像PHP这样的服务器端脚本能够解决这个问题，或者如果您真的需要的话，您可以在javascript中对头和页脚进行编码，并且必须在代码中进行任何微小的更改。

我认为从长远来看，服务器端会更聪明，然后您可以学习如何制作其他功能，如登录或发送电子邮件的联系人我们页面。

票数 11

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

原文链接：

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

复制

相似问题

问CRAFT412游戏网站，现在有div和spans
EN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CRAFT412游戏网站，现在有div和spansEN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CRAFT412游戏网站，现在有div和spans
EN