括号的HTML / CSS部分

时间：2012-10-10 09:03:42

标签： css html

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

  

Brackets

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

我想使用div结合CSS构建op页面 - 而不是表格。我应该如何做到最佳？你们有没有这样的样本？

我只是在寻求关于HTML / CSS部分的帮助，没有别的。

4 个答案:

答案 0 :(得分：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; 
}

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>

​

答案 1 :(得分：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;}

答案 2 :(得分：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/

答案 3 :(得分：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来操纵其内容，以显示正确的团队标题和关系。

会很漂亮。

相关问题
最新问题