文章/答案/技术大牛

发布

社区首页 >问答首页 >Cardshifter游戏网站模板

问Cardshifter游戏网站模板
EN

Code Review用户

提问于 2014-11-13 03:21:07

回答 3查看 544关注 0票数 15

我正在收集一个模板，以方便格式化内容网页，用于建立一个网站的在线交易卡游戏。

我一直在使用Bootstrap库(并且发现它很棒)，而且由于我们将在基本上所有页面上使用这个模板，所以我希望在部署任何内容之前确保它是一流的。感谢所有有用的反馈意见。

我还被告知，有一种使用JavaScript或其他类似的方式以更模块化的方式使用这个样板导航菜单代码的方法。我没有要求任何吉姆-德-考德斯，但如果你有任何有用的链接，我可以挖掘，我都是耳朵。

P.S.：类名中的CSh-前缀用于区分Cardshifter自定义类和引导类。

index.html

<!DOCTYPE html>
<html lang="en">

<!-- MAKE NO CHANGE TO ANYTHING IN THE <head> </head> SECTION -->

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Cardshifter card game / TCG, open source github with Java 8 & JavaFX">
    <meta name="author" content="github.com/Phrancis">
    <link rel="icon" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/favicon.ico">

    <title>Cardshifter</title>

    <!-- Bootstrap core CSS -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="cardshifter-formatting.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

<!-- THIS CODE GENERATES THE NAVIGATION MENUS; DO NOT CHANGE IT -->      

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand CSh-top-link" href="#">Cardshifter</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar CSh-nav-background CSh-nav-padding">
          <ul class="nav nav-sidebar">
            <h4><a class="nav-link" href="home.html">Home</a></h4>
            <h4><a class="nav-link" href="play-cardshifter.html">Play Cardshifter!</a></h4>
            <h4><a class="nav-link" href="news.html">News</a></h4>
            <h5><a class="nav-link" href="latest-release.html">Latest Release</a></h5>
            <h5><a class="nav-link" href="new-git-issues.html">New Git issues</a></h5>
            <h4><a class="nav-link" href="project.html">Project</a></h5>
            <h5><a class="nav-link" href="controbutors.html">Contributors</a></h5>
            <h5><a class="nav-link" href="images.html">Images</a></h5>
            <h5><a class="nav-link" href="wiki.html">Wiki</a></h5>
            <h5><a class="nav-link" href="contribute.html">Contribute!</a></h5>
            <h4><a class="nav-link" href="mods.html">Mods</a></h4>
            <h5><a class="nav-link" href="cyborg-chronicles.html">Cyborg Chronicles</a></h5>
            <h5><a class="nav-link" href="new-mod.html">Start a New Mod!</a></h5>
            <h4><a class="nav-link" href="contact-us.html">Contact Us</a></h5>
            <h5><a class="nav-link" href="report-bug.html">Report a bug</a></h5>
            <h5><a class="nav-link" href="request-feature.html">Request a feature</a></h5>
            <h5><a class="nav-link" href="chat-room.html">Chat room</a></h5>
          </ul>
        </div>
        <div class="col-sm-9 col-md-10 main"><br />
          <h1 class="page-header">Header 1</h1>

<!-- END OF NAVIGATION MENUS -->

      <div>        

<!-- PAGE CONTENT STARTS HERE -->

      <div class="default-template CSh-body-padding">
        <h2>Header 2</h2>
        <h3>Header 3</h3> 
        <p>Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur rutrum velit et sagittis. Nullam vitae mi sed sapien ornare tincidunt. Suspendisse vel magna a nulla consectetur consectetur.</p>
        <span>
          <a href = "www.google.com">Link to Google.</a><br />
          <strong>Strong text</strong><br />
          <i>Italic text</i><br />
          <u>Underlined text</u><br />
          <strike>Strikethrough text</strike><br />
          <code>Inline code</code><br />
        </span><br />

        <pre>
        class Cardshifter {
            public static void main(String[] args) {
                System.out.println("Hello Cardshifter!");
            }
        }</pre><br />
        <blockquote>“Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”<br />- Martin Golding</blockquote>
          <img src="facepalm.jpg" class="img-thumbnail" alt="An immemorial facepalm." height="300" width="300"><br /><br />

          <p>
            <button type="button" class="btn btn-default">Clear »</button>
            <button type="button" class="btn btn-primary">Blue »</button>
            <button type="button" class="btn btn-success">Green »</button>
            <button type="button" class="btn btn-info">Light blue »</button>
            <button type="button" class="btn btn-warning">Yellow »</button>
            <button type="button" class="btn btn-danger">Red »</button>
          </p>
          <div class="row">
            <div class="col-sm-4">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">White panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="panel panel-primary">
                <div class="panel-heading">
                  <h3 class="panel-title">Blue panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="panel panel-success">
                <div class="panel-heading">
                  <h3 class="panel-title">Green panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="panel panel-info">
                <div class="panel-heading">
                  <h3 class="panel-title">Light blue panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="panel panel-warning">
                <div class="panel-heading">
                  <h3 class="panel-title">Yellow panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="panel panel-danger">
                <div class="panel-heading">
                  <h3 class="panel-title">Red panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
          </div>

        <table width="50%">
          <tr>
            <th>FooBar</th>
            <th>Name</th>
            <th>Number</th>
          </tr>
          <tr>
            <td>Fizz</td>
            <td>John Q. Developer</td>
            <td>1</td>
          </tr>
          <tr>
            <td>Buzz</td>
            <td>Jane Q. Maintainer</td>
            <td>2</td>
          </tr>
        </table>

<!-- END PAGE CONTENT -->          

      </div>

<!-- FOOTER - DO NOT REMOVE -->

      <br />© Copyright 2014<script>new Date().getFullYear()>2014&&document.write("-"+new Date().getFullYear());</script>, Cardshifter.
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/assets/js/ie10-viewport-bug-workaround.js"></script>


  </body>
</html>

cardshifter-formatting.css

body {
    font-size: 120%;
    font-family: Verdana, Geneva, sans-serif;
}

/* FORMATTING FOR TOP NAV BAR */

a.CSh-top-link {
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #FFFFFF;
    font-size: 2em;
}

/* FORMATTING FOR LEFT SIDE NAV MENU */

/* h4 and h5 are used for left nav bar links */

h4 {
    font-size: 1.2em;
    font-weight: bold;
}

h5 {
    font-size: 1em;
    font-weight: normal;
}

a.CSh-nav-link { 
    color: #000000;
}

div.CSh-nav-background {
    background-color: #EEEEEE; 
}

div.CSh-nav-padding {
    padding-top: 50px;
}

/* FORMATTING FOR PAGE BODY */

div.CSh-body-padding {
    padding-left: 15px;
}


/* FORMATTING FOR COMMON PAGE ELEMENTS */

h1, h2, h3, blockquote {
    font-family: Georgia, Times, "Times New Roman", serif;
}

p, span, blockquote, table {
    font-size: 1.2em;
    font-weight: normal;
}

pre {
    font-family: Monaco, Consolas, Courier New;
    font-size: 1.2em;
    font-weight: normal;
}

/* FORMATTING FOR TABLES */

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 5px;
}

th {
    background-color: #EEEEEE;
    color: #000000;
}

/* FORMATTING FOR BUTTONS, ALERTS, ETC. */

a.CSh-button-formatting {
    font-size: 1.2em;
    font-weight: normal;
}
div.CSh-alert-formatting {
    font-size: 1.2em;
}

布局暂时托管在这里。

在我的浏览器中，用于Mac的Chrome版本38.0.2125.111如下所示：

game

html

css

回答 3

Code Review用户

回答已采纳

发布于 2014-11-13 17:44:36

模板中有一个"bug“：

我确实注意到了一个奇怪的现象，在大多数其他浏览器中，左边的链接显示为文本颜色#000000，正如我所想的那样。在Firefox和IE (适用于Windows)中也是如此，但在Safari中则不然。猜测Mac的浏览器对CSS的解释有所不同。不过，我会自己想办法的。

不存在浏览器兼容性等问题。应用于链接上的颜色的样式是：

a.CSh-nav-link { 
    color: #000000;
}

在您使用的HTML中：

<a class="nav-link" href="home.html">

类不匹配，因此链接的颜色是Bootstrap中的默认颜色。

我不建议使用<br>在组件/div之间创建空间。虽然它可以完成这项工作，但这并不是一个与他们合作的好方法。有很多方法可以管理组件之间的空间，这可能会带来更好的结果。

 <br />© Copyright 2014<script>new Date().getFullYear()>2014&&document.write("-"+new Date().getFullYear());</script>, Cardshifter.

这是页脚，它直接在您的HTML中。我应该在这里使用一个<div>，并使用div管理其他组件之间的空间。

票数 5

Code Review用户

发布于 2014-11-13 07:14:00

我不是HTML / CSS大师，所以用一点沙子(然后等待更好的)来处理这个问题。

这种CSS类名看起来是个坏主意：

Div.csh-体填充{填充-左:15 padding；}

在类名中包括样式提示似乎与样式表的哲学背道而驰。HTML标记不应该包含这样的内容，而应该关注文档的逻辑结构和元素。

相比之下，这是个好名字：

.top顶部链接{ // .}

名称不包含样式提示，它是关于文档中的一个逻辑元素的。

此样式名称中的“格式化”一词是多余的：

Div.csh-警报格式{字体大小: 1.2em；}

所有的CSS都是关于格式化的，所以不需要将它包含在名称中。还请注意Bootstrap用于格式化中有趣的变体的名称：

alert
alert alert-danger
alert alert-success
..。

我还会将文件本身重命名为cardshifter.css，而不是cardshifter-formatting.css。

我很少看到像CSh-...这样的混合大小写CSS类名。当然，如果您将小写改为csh-，这让人想起了UNIX中的C shell，但我认为这还可以，而且可能更好(而且更易于键入)。

这看起来是编写高效CSS的一个有趣的指南。

(我将非常感兴趣地看到您为生成导航而提出的解决方案。也就是说，在所有需要它的页面上不重复(几乎)相同的菜单代码。

票数 6

Code Review用户

发布于 2014-12-23 21:01:43

(a)在你姐姐的问题中，也解释了是author的名字，而不是URL(假设"github.com/Phrancis“不是你的名字；)。

(b)在带有类ul的nav nav-sidebar中，您有几个导航链接。您应该使用nav元素作为容器。当您使用ul时，您没有任何li子级。相反，您使用的是标题元素(h4/h5)，它创建了一个错误的文档大纲:每个链接都会在文档大纲中创建自己的条目，而不会在其作用域中包含任何内容。

(c)您滥用了br元素。It 必须仅用于有意义的换行。，即那些“实际上是内容的一部分”的内容。使用CSS代替。

(d)为了显示代码，您只使用pre元素，但您可能还需要使用code in but (<pre><code>…</code></pre>)：“要表示计算机代码块，可以将pre元素与code元素一起使用”。

(e)在blockquote (作者名称)中有一个引文，但必须对其使用cite和/或footer元素(参见示例)。cite/footer中没有的所有内容都必须实际引用。

(f)除了nav之外，您不使用任何分段内容元素。这并不是错误的，但是如果您使用标题元素，建议始终显式地使用节。只要您有一个标题元素(它不是一个节的标题)，就可以使用section (或者，如果适当的话，使用article、aside、nav)。例如，您可能希望对每个面板使用section。

(g)您可以使用small版权通知的内容。

(h)如有可能，网站的标题( h1)应放在任何其他部分之前。目前，nav是您的第一节，因此文档大纲从一个包含导航子条目(级别2)的未命名部分(级别1)开始，然后是实际站点标题(再次，第1级)。

票数 5

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

原文链接：

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

复制

相似问题

问Cardshifter游戏网站模板
EN

index.html

cardshifter-formatting.css

回答 3

Code Review用户

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cardshifter游戏网站模板EN

index.html

cardshifter-formatting.css

回答 3

Code Review用户

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cardshifter游戏网站模板
EN