文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML页面的带有背景%的布局

问HTML页面的带有背景%的布局
EN

Stack Overflow用户

提问于 2015-02-13 04:50:24

回答 1查看 357关注 0票数 2

我正在尝试创建一个HTML页面，它应该显示一个足球队的安排与一个领域作为背景。问题不在于对这些数据的检索，而在于页面的布局；我面临着一些问题，比如用不同的屏幕尺寸显示数据，以及某种类型的内部显示(您可以在代码中看到)。因此，我们的想法是用不同的填充显示某个角色的玩家，并考虑到每个角色的玩家数量。下面是HTML代码：

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link type="text/css" rel="stylesheet" href="../css/formazione.css" />
    </head>

    <body>
        <div id="intro">
            <h1>Benvenuto nella pagina web !</h1>
        </div>
        <div id="formazione">
            <div id="title">
                <h2>Juventus vs Milan</h2>
            </div>
            <div class="campo">
                <div class="portiereC">
                    <ul class="modulo-1">
                        <li>
                            BUFFON
                        </li>
                    </ul>
                </div>
                <div class="difensoriC">
                    <ul class="modulo-5">
                        <li>
                            CHIELLINI
                        </li>
                        <li>
                            BONUCCI
                        </li>
                        <li>
                            DE CEGLIE
                        </li>
                        <li>
                            DE SCIGLIO
                        </li>
                        <li>
                            BARZAGLI
                        </li>
                    </ul>
                </div>
                <div class="centrocampistiC">
                    <ul class="modulo-3">
                        <li>
                            MARCHISIO
                        </li>
                        <li>
                            POGBA
                        </li>
                        <li>
                            PIRLO
                        </li>

                    </ul>
                </div>
                <div class="attaccantiC">
                    <ul class="modulo-2">
                        <li>
                            TEVEZ
                        </li>
                        <li>
                            MORATA
                        </li>
                    </ul>
                </div>
                <div class="portiereF">
                    <ul class="portiereF modulo-1">
                        <li>
                            BUFFON
                        </li>
                    </ul>
                </div>
                <div class="difensoriF">
                    <ul class="modulo-5">
                        <li>
                            CHIELLINI
                        </li>
                        <li>
                            BONUCCI
                        </li>
                        <li>
                            DE CEGLIE
                        </li>
                        <li>
                            DE SCIGLIO
                        </li>
                        <li>
                            BARZAGLI
                        </li>
                    </ul>
                </div>
                <div class="centrocampistiF">
                    <ul class="modulo-3">
                        <li>
                            MARCHISIO
                        </li>
                        <li>
                            POGBA
                        </li>
                        <li>
                            PIRLO
                        </li>

                    </ul>
                </div>
                <div class="attaccantiF">
                    <ul class="modulo-2">
                        <li>
                            TEVEZ
                        </li>
                        <li>
                            MORATA
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </body>
</html>

下面是CSS：

    body {
    background-color: #F3CACE;
    padding-left: 25%;
}

#intro{
    text-align: left;
}


#title{
    color: green;
}

.campo{
    position: absolute;
    font-family: gazzetta;
    width: 540px;
    height: 375px;
    background-image: url("./campetto.jpg");
    color: orange;
    font-size: 0.79em;

}

li{
    list-style-type: none; 
    text-align: center;
}


.portiereC{
    top: 4%;
    position: absolute;
}

.difensoriC {
    left: 8%;
    top: 4%;
    position: absolute;
}


.centrocampistiC{
    left: 20%;
    top:  4%;
    position: absolute;

}

.attaccantiC{
    position: absolute;
    top: 4%;
    left: 32%;
}

.portiereF{
    right: 8%;
    top: 4%;
    position: absolute;
}

.difensoriF {
    right: 15%;
    top: 4%;
    position: absolute;
}


.centrocampistiF{
    right: 28%;
    top:  4%;
    position: absolute;

}

.attaccantiF{
    position: absolute;
    top: 4%;
    right: 38%;
}

.modulo-5 li{
    padding-top: 80%;
}

.modulo-5 li:first-child{
    padding-top: 0px;
}



.modulo-4 li{
    padding-top: 100%;
}

.modulo-4 li:first-child{
    padding-top: 20%;
}



.modulo-3 li{
    padding-top: 130%;
}

.modulo-3 li:first-child{
    padding-top: 50%;
}

.modulo-2 li{
    padding-top: 150%;
}

.modulo-2 li:first-child{
    padding-top: 200%;
}

.modulo-1 li{
    padding-top: 320%;
}



@media (max-width: 980px) {
    body{
        padding-left: 0px;
    }

    .campo{
    width: 980px;
    height: 680px;
    position: absolute;
    font-family: gazzetta;
    background-image: url("./campetto.jpg");
    background-repeat: no-repeat;
    color: orange;
    font-size: 0.8em;
    }
}



@font-face {
    font-family: gazzetta;
    src: url("../font/TitlingGothicFBCond-Bold.woff");
}

html

css

回答 1

Stack Overflow用户

发布于 2015-02-13 05:05:00

你可以做几件事。

了解HTML5 Canvas这让你可以使用javascript来创建字段和所有玩家的位置。您可以使用JQuery AJAX并调用javascript对象Generated by PHP来填充该字段。这里的好处是你可以使用Javascript来做动画和其他事情。
了解SVG。它使用HTML元素和CSS来创建一个your字段。这里的好处是你不必担心学习如何使用javascript。

总而言之，我建议学习Javascript Canvas。它在所能做的方面更加灵活。

编辑2015年9/18这里是一个示例。这是用jquery编辑的，但您可以只打印出足球运动员所在的文本。

$('circle').animate({
  cx: 100
}, 1000, function() {
  $('text').text('new stuff')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>


  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <text x="0" y="15" fill="red">I love SVG!</text>
    Sorry, your browser does not support inline SVG.
  </svg>

</body>

</html>

票数 1

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

原文链接：

https://stackoverflow.com/questions/28487511

复制

相似问题

问HTML页面的带有背景%的布局
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML页面的带有背景%的布局EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML页面的带有背景%的布局
EN