6

我正在开发一个杯子系统，我想对支架部分提出一些建议。理想的结果应该是这样的：

括号

http://www.partyplanning101.com.php5-7.dfw1-1.websitetestlink.com/wp-content/uploads/2009/02/tornament_board.gif

我想使用 div 结合 CSS 来构建页面，而不是表格。我应该如何做到这一点最优化？你们中有人有这方面的样本吗？

我只是寻求有关 HTML/CSS 部分的帮助，仅此而已。

4

4 回答 4

10

这看起来很有趣，所以我开始开发，现在必须重新开始工作，所以这就是我的进展。基础知识已经为你准备好了，所以我想你可以从这里完成它，虽然我可能也会在业余时间完成它，稍后再来发布它

http://jsfiddle.net/AcuPp/

更新：

完成 - http://jsfiddle.net/AcuPp/3/

CSS

#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; 
}

​</p>

HTML

<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>

​
于 2012-10-10T09:27:01.573 回答
1

我完整的工作解决方案在这里：http: //jsfiddle.net/t9feh/

我更喜欢具有纯语义标记的解决方案，该解决方案易于阅读和修改可能会在以后滴入的数据，例如谁赢得了每场比赛。

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

HTML：

<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>

请注意，可以将“获胜者”类添加到任何玩家，并且它的样式会适当。

那么主要的挑战是做连接器。语义标记意味着没有设计钩子。这需要 BG 图像。我使用 data-urls（请参阅我在DataURL.net使用的实用程序）将它们放在“匹配”元素上。

CSS：

.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;}
于 2012-10-10T11:12:50.303 回答
0

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

CSS

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;
 }

HTML

<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>​

在这里演示http://jsfiddle.net/ZRJRj/1/

于 2012-10-10T09:13:44.750 回答
0

您想查看 SVG ( http://www.w3schools.com/svg/default.asp ) 或 Canvas ( http://en.wikipedia.org/wiki/Canvas_element )

我会选择 SVG。您需要使用一些 JavaScript 计算连接线的端点，您将在浏览器中使用 SVG 直接绘制它们，并将其全部抽象到简单的界面后面。实际上，JavaScript 将您的整个应用程序粘合在一起，SVG 仅用于绘图，而 HTML 和 CSS 将帮助您呈现它的其他部分。

或者，您可以使用 SVG 显示整个决赛阵容。然后，您将使用 JavaScript 操作其内容以显示正确的团队名称和关系。

它会很漂亮。

于 2012-10-10T09:52:41.397 回答