我正在尝试创建一个 HTML 页面，该页面应显示以球场为背景的足球队的布置。球员的名字将在 PHP 下用 MySQL 查询显示。问题不在于检索这些数据，而在于页面的布局；我在用不同的屏幕尺寸显示它时遇到了一些问题，在某种类型的内部显示中也遇到了一些问题(你可以在代码中看到)。 所以这个想法是用不同的填充来显示一些 Angular 色的玩家，同时考虑到每个 Angular 色的玩家数量。这是 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");
}
最佳答案
你可以做几件事。
- 了解 HTML5 Canvas这让你在 为了创建领域和所有玩家所在的位置。你可以 使用 JQuery AJAX 填充字段并调用一个javascript 对象 Generated by PHP .这里的好处是您可以将 Javascript 用于动画和其他内容。
- 了解 SVG .这使用 HTML 元素和 CSS 来创建一个 你的领域。这样做的好处是您不必担心学习如何使用 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>关于html - HTML 页面的背景布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28487511/