OK。
このビデオでは、このティック・タック・トゥ・ボードの演習を最初から作り直すつもりです。
だから私たちは最初から空のファイルで始めるつもりです。
私はHVMが私たちのボイラープレートに追加できるボードをCoppermineします。
それをT T T掲示板と呼んで、これがあなたの記憶をジョギングするだけの方法です。
それはテーブルです。
この全体がテーブルです。
それは3つの行1,2および3を有し、各行は3つのTweedyを有する。
だから我々は3つずつのボードで終わる。
そして、私たちがやることは、これらの3つのテレビに入って、左右の境界線を回すことです。そして、これらの3つの上で、上下の境界線を回すつもりです。
だから、テーブルと3つの層から始めなければなりません。
そして私は実際に3つのチアラを行って、最初に行うつもりです。
だから我々は3つのテレビを取得し、それをもう一度複製するつもりです。
3つの要素で3つの行があり、それぞれに3つのTVがあります。
だから私たちはそれを保存し、ブラウザでこれを開くと、私たちには何も見えないことがわかります。
それは、私たちのテーブルがそこにあるにもかかわらず、私たちのテーブルには何もありません。
そして空のテーブルを持っていて実際にはこれが何であるかをまだ見ることができるので、スタイルを適用する必要もありません。
これらのテーブルにはデータはありません。
ここの例では、それは単なるテーブルであり、次にそれはスタイル付けされています。
だからそれには境界があります。
だから我々はそれを行う必要があります。
だから、ちょうどあなたにそれを証明するためにここではいくつかのスタイルを追加してみましょう。私はあなたが今知っておくべきスタイルタグでこれを行うつもりです。
長期的には素晴らしいアイデアではありませんが、ここでの見やすさを目的としたソリューションビデオのために、私たちはファイルを見直す必要がなく、私が1つの場所で何をやろうとしているのか混乱する必要はありませんここにスタイルタグの一番上にファイルします。
だから私がやろうとしている最初のことは、Tを選択して幅を与えることだけです.TTの検査をすれば、基本的には存在しないことが分かります。
それらは2ピクセル×2ピクセルです。
だから彼らは本当に小さく、それは何もそこにないし、私たちはそれらに割り当てられていないか高さです。
だから私がしたいのは、幅を与えて100ピクセルから始めるつもりですが、高さについても同じことをやるつもりです。保存してリフレッシュしても何も見えません。
そしてもう一度それは何も表示されていないからです。
しかし、私たちが行かれて今調べてみると、各Tedyが100 x 100ピクセルの正方形になっているのが分かります。
だから、彼らがそこにいることを見ることができるように、彼らに背景を与えてみましょう。
バックグラウンドピンクセーブと言ってください。
そして今、我々は私たちのボードの始まりを見ることができます。
だから私は実際にその背景色を元に戻すつもりです。
私はタイルがそこにあることをあなたに見せたいだけでした。
私たちはテレビを持っています。
そして今私たちがする必要があるのは、境界線を選択的にオンにする方法を理解することです。
だから私たちはこれらの3つの要素から始めるつもりです。
左と右の境界線をオンにしたい。
だから私はページを更新する場合。
しかし、ここでこのトップレベルを取って、それに左と右の四半期を与えることから始めましょう。
だから私は行くつもりです、そして、それは最初のTRの代わりに2番目のTDです。
私はちょうどクラスを与えようとしています。私はちょうどこのクラスを垂直にするつもりです。そして私はこれらの3つのクラスをverticalと呼んで、左右のボーダーを取得します。
したがって、classはverticalと等しくなります。
そしてここでは、垂直を選択して境界線を残して、今は1つのピクセルを黒くして、境界線についても同じことをやりましょう。
右。
私たちが救い、私たちが新鮮ならば、最初の広場が完成したことがわかります。
だから今はその下にあるテレビとその下にあるテレビを追加する必要があります。
それで私はクラスを複数回使用するので、クラスを作ったのです。
だから、これをIDにしてから、この要素のIDをもう一度やって、これを完全に行うことができたIDをもう一度やっていれば、ID中間とその次にID中間のようなことができました。
私はそこにスペースを置くことができますが、そのようなものです。
それは実際には素晴らしいアイデアではありません。
私たちは複数のIDを持っていけないので、私はクラスに与えようとしています。クラスは垂直です。
だから私はこれもこれに与えようとしています。
これはその真下の中間要素です。
そして、その下にあるもう一つ。
その3人は現在、クラスの垂直線を持ち、3つの垂直線を得ることができます。
今度は、水平線で同じプロセスを繰り返すだけで済みます。
そして、我々はこの要素をここで欲しい。
このこことここの1つは、境界上端と境界下端を持っています。
今度はクラスで始めるつもりですが、境界線の上端と境界線の境界線を残して、水平線を作成してコピーしてください。そして、この水平クラスに正しい要素で署名するだけです。
だから私たちがそれを望んでいるのはここのものなので、これが最初のTになるでしょう。 T.
2番目のTRで
だから、私は先に進んでそれをするつもりです。
クラスは等しいかTLにあり、それをコピーします。
この中間のクラスではクラスを作成したいと思っています。既にクラスを作成しています。
それは本当に簡単です。
私たちがするのは、スペースを追加することだけです。
したがって、これは垂直水平と呼ばれる1つのクラスではありません。
それは2つの垂直かつ水平です。
そしてこの最後のCDに同じことをやってみましょう。これがここにあります。私たちが保存してページを更新すると、完成したtic tac
toeボードが完成します。
だから私がここでやりたい最後のことは、これを中心にして、実際には本当に簡単だからです。
それは私たちのテーブルの成功の1つのラインです。
私たちはそれに秩序のマージンを与え、そこに行くつもりです。
そのマージンは自動的に計算されます。
あなたは私がスクロールするのを見ることができます。
私はマージンが増減するようにウィンドウのサイズを変更し、最後に1つの最後のものを追加したいと思うならば、ちょうどtic
tacのつま先がそうすることができるということを各頂点に追加したいのです。
しかし、この要素が検査されたことに気付くでしょう。
さて、それはそれがすべての道を越えていることを調べなくても見ることができます。
私が真ん中に行きたいのであれば、要素は実際には画面全体にわたっています。
この青い部分はここで見ることができます。
だから私はテキストを中央に置くことができ、それはH-1が実際に真ん中にあるという効果を与えるだろう。
だから私はちょうどH-1の文字列の中心と私は保存します。
そして、そこに我々はチックタックつま先ボードを持っている行く