CSSでスポーツオッズDisplayを造る方法
最終結果
今日、3時00分ESTで、2020のUEFAチャンピオン連盟決勝は、パリサンジェルマンとFCバイエルンミュンヘンの間で遊びられます.そして、何より良い方法オッズdisplayを構築するよりも、この象徴的なゲームを尊重するには?今日、私はチャンピオンシップリーグ決勝を例としてCSSとHTMLでスポーツオッズプレーヤーを造る方法をあなたに示します.
それで、我々が作ることは、情報セクション、オッズバーとチームと勝利率を示しているラベルできれいに中心の白い容器です.我々はHTMLとCSS(JavaScriptなし)だけでこれを達成するつもりです.そして、途中で、我々のバーは、各々のチームのためにパーセントを示している内部の2つのミニバーで、これのように見えます:
ステップ1 : HTML
したがって、HTMLは次のようになります.
<div> コンテナ<div> バー<div> 各チームごと<a> 各チームのウェブページへのリンクは、勝利の統計情報、名前、およびロゴを示す<body> コードは終わります<div class="container">
<h1>
Champions League
<br />
<img
src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fa48de1c2-9caa-4ee4-8f4c-8baf480ecdf4.image.png"
alt="O"
/>
Final Odds
<img
src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fa48de1c2-9caa-4ee4-8f4c-8baf480ecdf4.image.png"
alt="O"
/>
</h1>
<div class="bar">
<div class="psg" title="33%"></div>
<div class="bayern" title="67%"></div>
</div>
<a href="https://en.psg.fr/">
<img
src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fefb2974a-573d-4d0a-925e-2ac2ef4a644b.image.png"
alt="O"
/>
PSG ??%
</a>
<a href="https://fcbayern.com/en">
??% Bayern
<img
src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Ff3c60ab9-4953-4e56-85c7-e5100a77ddc2.image.png"
alt="O"
/>
</a>
</div>
パート2 : CSS
今、我々が行う必要がある最初の割合は、割合を見つけることです.迅速なGoogle検索の後、結果はBayernの勝利の可能性は67 %であったのに対し、PSGは33 %となった.では、これらの統計を変数として宣言しましょう
:root セレクタ::root {
--psg: 33%;
--bayern: 67%;
}
html/body , 素敵なチャンピオンズリーグスタイルの背景画像を作成し、フォント、テキストの色を宣言し、ページオーバーフローを非表示にしましょう.以下はコードです.html,
body {
overflow: hidden;
height: 100%;
font-family: Verdana, Geneva, sans-serif;
background-image: url("https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fe404eda1-d2df-4b91-a5f4-0704a21a01d1.image.png");
background-repeat: no-repeat;
background-size: cover;
color: black;
}
さあ、私たちを白い容器にしましょう
max-width 丸い角と黒い棒(丸みを帯びたコーナーでも)で、小さなデバイスで画面をオーバーフローしないように100 %です..container {
border-radius: 15px;
max-width: 100%;
padding: 50px;
background-color: white;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bar {
background-color: black;
border-radius: 5px;
margin: 50px 0px;
width: 100%;
overflow: auto;
border: 1px solid black;
}
「チャンピオンズリーグ決勝オッズ」と言う情報セクションを加えましょう.これは
<h1> 画像をタグとしてスタイルを設定します.img {
vertical-align: -15%;
}
h1 {
margin: 0px;
text-align: center;
font-size: 50px;
}
h1 img {
height: 50px;
}
:first-of-type and :last-of-type セレクターは私たちを助けます.a img {
height: 15px;
}
a {
font-size: 15px;
text-decoration: none;
color: inherit;
}
a:first-of-type {
float: left;
}
a:last-of-type {
float: right;
}
.psg,
.bayern {
font-size: 15px;
padding: 1em 0px;
animation-delay: 2s;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
.psg {
background-color: #004170;
float: left;
animation-name: psg;
}
.bayern {
background-color: #DC052D;
float: right;
animation-name: bayern;
}
@keyframe アニメーションコードは、それぞれのチームのミニバーのそれぞれの側面から、最終的に我々のパーセンテージ変数を使用してズームされます:@keyframes psg {
from {
width: 0px;
}
to {
width: var(--psg);
}
}
@keyframes bayern {
from {
width: 0px;
}
to {
width: var(--bayern);
}
}
読書ありがとう！
ウェブサイトはhere そして、コードはここにあります.
< div >
私は、これがあなたを助けたことを望みます!とにかく、ゲームを見に行かなければならないp >
バイ！Derder 56（ゲーム終了バイエルン1 - 0 PSG）
Reference
この問題について(CSSでスポーツオッズDisplayを造る方法), 我々は、より多くの情報をここで見つけました https://dev.to/derder56/how-to-build-a-sports-odds-displayer-with-css-2g47テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol