括号的HTML/CSS部分

我正在开发一个杯子系统，我想得到一些关于支架部分的建议。理想的结果应该如下所示：

我想使用div与CSS结合构建op页面，而不是使用表。我应该如何使其达到最佳效果？你们有这个的样品吗

---

我只是想寻求有关HTML/CSS部分的帮助，没有其他问题。

您可以这样做。根据您的div位置更改以下代码

CSS

HTML

​

---

这里的演示

这似乎很有趣，所以我开始开发，现在必须回去工作，所以这就是我取得的成绩。我想，这些基础知识都是为你准备的，所以你可以在这里完成它，不过我可能也会在业余时间完成它，稍后再来发布

更新：

完成-

CSS

​

HTML

玩家1
玩家2
玩家3
玩家4
玩家5
玩家6
玩家7
玩家8
​

您想看看SVG（）或者画布（）

我会选择SVG。您需要使用一些JavaScript计算连接线的端点，您将在浏览器中使用SVG绘制这些端点，并将其整齐地抽象到简单界面后面。实际上，JavaScript是将整个应用程序粘合在一起的东西，SVG只是用于绘图，HTML和CSS将帮助您展示它的其他部分

或者，您可以使用SVG显示整个决赛阵容。然后，您将使用JavaScript操纵其内容，以显示适当的团队标题和关系

---

它会很漂亮。

我的完整有效解决方案如下：

我更喜欢使用纯语义标记的解决方案，该解决方案将易于阅读，并使用稍后可能会陆续出现的数据进行修改，例如谁赢得了每场比赛

所以我从一个标记结构开始，玩家嵌套在比赛中，比赛嵌套在回合中

HTML:

---

@hskrijelj你尝试过什么吗？你应该重新思考你回合的标签：当剩下两支球队时，这是最后一场比赛，而不是半决赛。编辑了我的帖子，包括一个完成的版本，代码可以被清理很多，但它确实是一个非常糟糕的解决方案。很多无意义的标记，只是为了样式。当然，网络上的情况要糟糕得多，所以我该向谁抱怨呢。但事实就是如此，我对这里提出的建议抱有更高的希望；-）这在我的情况下不会派上用场，因为我需要保持灵活性。正如@amn所指出的，有很多标记。不过，感谢您的分享和贡献。哇，这是一个简单但有效的方法。太棒了，哇！非常感谢分享这个。这正是我一直在寻找的。支架需要灵活；括号是根据团队数量自动生成的，因此方框和回合/阶段的数量并不总是相同的。我可能需要做一些更改，例如使用恒定的高度值，但更改是最小的。再次感谢你！我还没有对HTML5和HTML中的所有优点进行过太多的研究。我会记住SVG（我只是读了一些关于它的文章，它看起来很有趣）。SVG并没有真正连接到HTML5，而Canvas是。如果您访问我提供的SVG链接，您将看到这对于您的案例来说是多么容易。您甚至可以使用单个SVG文档显示整个内容。或者，您可以保留

DIV

s（或者使用XML和XSLT生成HTML），并且只对连接器行使用SVG元素。JavaScript在任何情况下都将被证明是粘合剂。你是对的，它看起来相当简单。然而，我更像是一个传统的程序员/设计师。我喜欢只使用div构建所有部分。但正如我所说，我会记住这一点。再次感谢！有趣！我刚试过，结果很理想。我明白你在回合->比赛->玩家中构建它的意义。我打算做类似的事情。但是，我看不出使用BG连接盒子的原因。我知道，这就是语义标记关于无挂钩设计的意义。但我不明白，为什么这里需要语义标记。应该出现哪些问题？谢谢分享@根本没有必要。我只是想让标记保持整洁。您可以使用一种组合的方法：像我那样嵌套元素，但是在这里和那里使用一些额外的标记来绘制连接器，但是我认为这会更难阅读，而且我更喜欢在样式表中保留样式信息。这只是我的偏好……不过如果你仔细想想，连接器确实有语义价值。虽然如果我真的想要在标记中编码关系，也许我会在匹配中添加id（如

id=“match-1d”

），并在每个匹配中添加数据属性，如

data winner plays in=“match-2b”

，然后，我不知道，可能会用一些不显眼的javascript来划线（但这可能有点困难）.我同意你的大部分观点。我想把自己想象成一个更传统的程序员/设计师。我在可能的情况下使用CSS而不是图像，即使在某些情况下这看起来更容易。我永远不会把样式信息放在HTML文件中（除非真的有必要）。我认为使用javascript生成连接器是一种过分的做法，但我喜欢这个想法。这很有挑战性，因此很有趣。我可以试一试。

h1 {
    width:580px; 
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:18px;
    text-align:center;
    margin:40px auto;
 }
#container {
    width:580px; 
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:11px;
    text-align:center;
    margin:auto;
 }  
#container a {
    display:block;
    color:#000;
    text-decoration:none;
    background-color:#f6f6ff;
 }
#container a:hover {
    color:#900;
    background-color:#f6f6ff;
 }
#no1 {
    width:190px;
    line-height:60px;
    border:1px solid #000;
    margin:auto;
 }
#no1 a {
    height:60px;
 }
#line1 {
    font-size:0;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin:auto;
 } 
#line2 {
    font-size:0;
    width:424px;
    height:1px;
    color:#fff;
    background-color:#000;    
    margin:auto;
 } 
#line3 {
    font-size:0;
    display:inline;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin-left:78px;
    float:left;
 }  
#line4,#line5,#line6 {
    font-size:0;
    display:inline;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin-left:140px;
    float:left;
 }
#no2 {
    display:inline;
    border:1px solid #000;
    clear:both;
    margin-left:35px;
    float:left;
 }
#no2 a,#no4 a,#no8 a {
    width:84px; 
    height:50px;
    padding-top:8px; 
 }  
#no3 {
    display:inline;
    border:1px solid #000;
    margin-left:58px;
    float:left;
 }
#no3 a,#no5 a,#no6 a,#no7 a,#no9 a {
    width:84px; 
    height:42px;
    padding-top:16px;  
 } 
#no4 {
    display:inline;  
    border:1px solid #000;
    margin-left:53px;
    float:left;
 }  
#no5 {
    display:inline;   
    border:1px solid #000;
    margin-left:55px;
    float:left;
 }  
#line7,#line13 {
    font-size:0;
    display:inline;
    width:1px;
    height:38px;
    color:#fff;
    background-color:#000;
    margin-left:219px;
    float:left;
 } 
#line8,#line14 {
    font-size:0;
    display:inline;
    width:1px;
    height:38px;
    color:#fff;
    background-color:#000;
    margin-left:281px;
    float:left;
 }  
#no6,#no8 {
    display:inline;  
    border:1px solid #000;
    margin-left:107px;
    float:left;
 }
#line9,#line11,#line15,#line17 {
    font-size:0;
    display:inline;
    width:26px;
    height:1px;
    color:#fff;
    background-color:#000;    
    margin-top:29px;
    float:left;
 }  
#line10,#line12,#line16,#line18 {
    font-size:0;
    display:inline;
    width:1px;
    height:60px;
    color:#fff;
    background-color:#000;
    float:left;
 } 
#line16,#line18 {
    height:30px;
 }
#no7,#no9 {
    display:inline; 
    border:1px solid #000;
    margin-left:169px;
    float:left;
 } 
.clear {
    clear:both;
 }

<div id="container">

<div id="no1"><a href="">Managing Director</a></div>
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
<div id="line4"></div>
<div id="line5"></div>
<div id="line6"></div>
<div id="no2"><a href="#">Sales &amp; Marketing Director</a></div>
<div id="no3"><a href="#">Production Director</a></div>
<div id="no4"><a href="#">Human Resources Director</a></div>
<div id="no5"><a href="#">Finance Director</a></div>
<div id="line7"></div>
<div id="line8"></div>
<div class="clear"></div>
<div id="no6"><a href="#">Factory Manager</a></div>
<div id="line9"></div>
<div id="line10"></div>
<div id="no7"><a href="#">Management Accountant</a></div>
<div id="line11"></div>
<div id="line12"></div>
<div class="clear"></div>
<div id="line13"></div>
<div id="line14"></div>
<div class="clear"></div>
<div id="no8"><a href="#">Quality Control Manager</a></div>
<div id="line15"></div>
<div id="line16"></div>
<div id="no9"><a href="#">Financial Accountant</a></div>
<div id="line17"></div>
<div id="line18"></div>
<div class="clear"></div>

</div>

</body>
</html>​

#container { 
    width: 800px; 
    height: 600px; 
    float: left; 
}

section { 
    width: 130px; 
    height: 520px; 
    float: left;
}

section > div { 
    width: 100px; 
    height: 20px; 
    border: 1px solid #000; 
    margin: 10px 0; 
    background: #73789F; 
    color: white; 
    padding: 10px 10px 10px 20px;
}

section > div:nth-child(2n) { 
    margin-bottom: 40px;
}

.connecter { 
    width: 30px; 
    height: 520px; 
    float: left; 
}

.line { 
    width: 30px; 
    height: 520px; 
    float: left; 
}

.connecter div { 
    border: 1px solid #000; 
    border-left: none; 
    height: 50px; 
    width: 100%; 
    margin: 80px 0 0 1px;
}

.connecter div:first-child { 
    margin: 32px 0 0 1px; 
}

.line div { 
    border-top: 1px solid #000; 
    margin: 133px 0 0 1px; 
}

.line div:first-child { 
    margin-top: 55px; 
}

#quarterFinals > div { 
    margin-top: 91px; 
}

#quarterFinals > div:first-child { 
    margin-top: 37px; 
}

#conn2 div { 
    margin-top: 133px; 
    height: 133px;
}

#conn2 div:first-child { 
    margin-top: 57px; 
}

#line2 div { 
    margin-top: 270px; 
}

#line2 div:first-child { 
    margin-top: 125px; 
}
#semiFinals > div { 
    margin-top: 230px; 
}
#semiFinals > div:first-child { 
    margin-top: 105px; 
}
#conn3 div { 
    margin-top: 125px; 
    height: 270px;
}

#line3 div { 
    margin-top: 270px; 
}

#final > div { 
    margin-top: 250px; 
}

<article id="container">

<section>
    <div>Player 1</div>
    <div>Player 2</div>
    <div>Player 3</div>
    <div>Player 4</div>
    <div>Player 5</div>
    <div>Player 6</div>
    <div>Player 7</div>
    <div>Player 8</div>
</section>

<div class="connecter">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="line">
    <div>
    </div><div>
    </div><div>
    </div><div>
    </div>
</div>

<section id="quarterFinals">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

<div class="connecter" id="conn2">
    <div></div>
    <div></div>
</div>

<div class="line" id="line2">
    <div></div>
    <div></div>
</div>

<section id="semiFinals">
    <div></div>
    <div></div>
</section>

<div class="connecter" id="conn3">
    <div></div>
</div>

<div class="line" id="line3">
    <div></div>
</div>

<section id="final">
    <div></div>
</section>

</article>

​

<div class="tournament">

    <div class="round quarter-finals">

        <div class="match" >
            <div class="player">Player 1</div>
            <div class="player winner">Player 2</div>
        </div>

        <div class="match">
            <div class="player winner">Player 3</div>
            <div class="player">Player 4</div>
        </div>    

        <div class="match">
            <div class="player">Player 5</div>
            <div class="player winner">Player 6</div>
        </div>

        <div class="match">
            <div class="player">Player 7</div>
            <div class="player">Player 8</div>
        </div>    

    </div>

    <div class="round semi-finals">

        <div class="match">
            <div class="player">Player 2</div>
            <div class="player winner">Player 3</div>
        </div>

        <div class="match">
            <div class="player">Player 6</div>
            <div class="player">Player 7</div>
        </div>    

    </div>

    <div class="round finals"> 

        <div class="match">
            <div class="player">Player 3</div>
            <div class="player"></div>
        </div>     

    </div>

    <div class="round"> 
        <div class="champion"> 
            <div class="player"></div>
        </div>
    </div>
</div>

.tournament{width:720px;}

.round{
       float:left;    
}

.player{
    font-family:arial;
    width:120px;   
    height:20px;
    padding:10px;
    background:#73789F;
    color:white;
}

.player.winner{background:green;}

.match{
    padding:5px 50px 5px 0px;
}

/*QUARTER-FINALS*/
.quarter-finals .match{
    height:100px;
    background:right top no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABkAQMAAAD+JvEYAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzEwLzEyGAKeIwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAAnSURBVCiRY/gPBgcYhjoNBPZQ/v4hQjeAHD0I3IGXRgpXqsbXEKEB2yGL0P7iVKIAAAAASUVORK5CYII=);
}
.quarter-finals .player{

}
.quarter-finals .player:first-child{
    margin-bottom:5px;
}

/*SEMI-FINALS*/
.semi-finals .match{
    padding-top:30px;
    height:185px;
    background:right top no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAC5AQMAAABQhv7pAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzEwLzEyGAKeIwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAArSURBVDiNY/gPBgcYRumBpYHAHsrfP0oPKboBFHmDwB2jNAk0Un77PwxoAJbztvAUr3KAAAAAAElFTkSuQmCC);
}

.semi-finals .player:first-child{
    margin-bottom:70px;
}

/*FINALS*/
.finals .match{
    padding-top:85px;
    height:350px;
    background:top right no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAFeAQMAAAD9sN5nAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzEwLzEyGAKeIwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAA0SURBVEiJY/gPBgcYRulRepQmngYCeyh//yg9So/Sg45uAGXSQeCOUXqUHrI0Uj33fxjQAEJS8U50LMSKAAAAAElFTkSuQmCC);
}

.finals .player:first-child{
    margin-bottom:180px;

}
/* CHAMP*/
.champion{padding-top:200px;}