HOME > WEB > 第92回天皇杯トーナメント表(4回戦以降)
つぶやく
第92回天皇杯トーナメント表(4回戦以降)

天皇杯3回戦では残念ながら福島ユナイテッドFCに負けたわがアルビsad
こうなったら俄然福島を応援するしかないっしょ。優勝チームに負けたなら仕方ない、って言い訳するためにもsign01(ありがちw

というか、せっかくCSS組んだから4回戦以降のトーナメントも作ってみたpc
tournament2.png

今回もレスポンシブにするのめんどいから別窓でw
で、せっかくなので軽くHTML・CSSの備忘録も。

HTMLはまずチーム名・対戦ごとに div で囲む。
121116_01.png

チーム名はそれぞれブロック要素で作って上マージンを取る。
トーナメント部分は div に対して上半分のブロックと下半分のブロックを position:absolute + z-index:-1 で構成。
121116_02.png

121116_03.png

左トーナメントの上半分ブロックは上と右、下半分ブロックは下と右、といった具合に border つける。
決勝部分は左右にブロック作って真ん中だけ border 入るように。
121116_04.png

あとは div 内に日時場所を天皇杯対戦ページへのリンク付で入れる。
真ん中くらいに来るように適当に padding つける。

あとは勝った時につける赤い線のクラス vTop(border-top:1px red solid !important) / vRight / vLeft を作っておいて、それぞれのPに対してクラス追加することで勝ち進んでいくという仕組み。

アルビのいない天皇杯は天皇杯じゃない、などと言わずに楽しんで生暖かく見守ろうと思いますsmile
 

コメントを残す



このページのトップへ