このレッスンでは、最後のビデオの最後にキャンプグラウンドショーページのスタイリングを完成させていきます。
私が必要とする変更のいくつかについて言及しました。
それは純粋なブートストラップで対処できません。
いくつかのカスタムスタイルを追加する必要があります。
そのため、サムネイルの100％を占めるように、この画像の幅を変更する必要があります。
ここにいくつかのパディングを追加したかったのです。
これはパディングがある場所のように見えるはずで、イメージがコンテナ全体を占めるのが分かります。
それを達成するために、それぞれYesでショーに入り、ここにスタイルタグを追加することができます。
しかし、それは本当に素晴らしい考えではありません。
その代わりに、私たちは最初のカスタムスタイルシートを追加し、それを前のレッスンと同じようにパブリックディレクトリにする予定です。
だから私はディレクトリを公開するつもりだ、そして私は公開の中に別のディレクトリを作るだろう。
styleシートスラッシュと私たちはこのような意味のDotsie
SSと呼んでいます。
これはスタイルシートと呼ばれるので、パブリックスラッシュスタイルシートと私たちは最終的に私たちのJavaScriptとJavascriptのために別のものを持っているでしょう、そして私たちはenterを押してから、スタイルシートの中で一つのファイルをpublic sosh
OK。
今、私たちはそれを開こうとしています。
私たちはスタイルシートを大事にして、そのファイルを開いて、体の背景色を紫色にして保存するような、ここに本当に明白な何かを加えることから始めましょう。
だから、アプリの場合、私たちは静的なアプリドットを使うExpressをここに追加する必要があります。
そして、私たちが前回したことは、単に公開するだけでしたが、実際にやってみると、やっかいな方法で、すぐに見せたくありませんでした。
しかし、今私たちがしなければならないことは、下線を追加することです。ディレクトリ名とスラッシュの公式ディレクトリ名は、このスクリプトが実行していたディレクトリを参照してください。
だから私はあなたにそれがどのように見えるか教えてください。
私はちょうどコンソールを行うが、ログにアンダースコアがあなたの名前にアンダースコアを付けて、サーバを保存して再起動する。
私がここで何を得ているか注目してください。
これは、キャンプスラッシュv5のlushly全体のパスワークスペースのディレクトリ名です。
だからdirの名前とスラッシュのパブリックを追加することによって、潜在的に何らかの形でこれが現在のディレクトリを変更した場合、私たちが期待していなかった不思議なことが起きたからです。
それがうまくいけないことはありませんが、あなたの名前は常にスクリプトが住むディレクトリになります。
だから私たちはもっと安全になり、スラッシュパブリックを追加しているだけです。それはもっと一般的なやり方です。
私たちは全く違いは見ません。
だから私たちは救うでしょう。
私たちはこれを取り除くことができ、私たちがやったことは私たちの単純な心に加えられます。
SSしかし、我々はまだそれにリンクしていない。
私たちはパブリックディレクトリを提供しました。
私たちは現在、そのディレクトリ内のすべてのものを提供しています。これは実際には単一のフォルダースタイルシートであり、単一のファイルが最終的に私たちになる可能性があります。
しかし今、そのファイルへのリンクを見て、ヘッダファイルでそれをやってみましょう。
だから、私はC9ビューにParshallのスラッシュヘッターをスラッシュし、ブートストラップ後に頭上に上げます。
私は別のリンクタグを追加するつもりですが、これはH refと同じになります。スラッシュスタイルシートはメインC
Ssをスラッシュし、次にここで行を追加してスタイルシートにします。
OK。
だから私たちは現在、私たちが公開ディレクトリから提供しているうまくいけば私たちのスタイルシートにリンクしました。
それがうまくいけば、それを試してみましょう。
ヘッダーが部分的に含まれているすべてのページが存在するため、1ページごとに表示されます。
それを試してみましょう。
私たちはリンク先ページに行きます。
そこに行く。
それはすべて紫色で、私たちのキャンプ場を見に行けば、あなたはそれを紫色にしておきたいならば、紫色の背景もあなた次第です。
私はそれを元に戻すつもりです。
しかし、私が獲得したスタイルを追加し、それらのスタイルがサムネイルに影響を与えることになります。
これはサムネイルとサムネイルです。
イメージを幅の100％にするようにします。ショーページとインデックスページの両方でこれを実行して、元に戻って変更して評価することができます。
そこで、サムネイル内のすべての画像を選択することから始めます。
ブートストラップクラスなので、サムネイルが必要です。
そしてサムネイルの中にあるすべてのイメージタグであるそれらの間のスペースをイメージタグに入れます。
そして、そのように幅を100％に設定したいだけです。
保存して更新してショーページに移動すると、画像がこのサムネイルの100％を占めるようになります。
次に、このパディングの問題を解決する必要があります。この問題は、実際に修正するのが簡単で、サムネイル自体を選択するために必要なスペースを取り除きたいところです。
サムネイルdivは、パディングを取り除き、ゼロに設定します。
だからドットサムネイルパディング0。
保存しましょう。
そこにこのパディングを見てください。
今は消えてしまった。
私たちのインデックスページに戻ると、これらのページが今も一様であることがわかります。
私たちにはパディングもありません。
私は個人的には、ここにスペースを入れずにパディングなしで好む。
しかし、それは個人的な好みの問題であり、あなたがそのスペースをそこに戻すことを望むのであれば、これらのスタイルをこのスタイルをすべての単一のサムネイルに特に適用することはできません。
代わりに、このサムネイルをIDまたは特別なクラスに与えることができるショーページを与えることができます。そして、このパディングゼロをそのクラスに適用するか、2つのIDに適用します。
しかし、私はそれらのすべてにそれを行うつもりですし、私たちが解決する必要があるもう一つの問題は、ここでのパディングです。
だからこのキャプションの中でfulを調べれば、作成したdivがここに表示され、divクラスのキャプションがいっぱいになる。
そこにいくつかのパディングを追加したいと思います。最後のビデオで決めた数は9ピクセルでした。
だから私は罪を閉めることができます。
ここに戻って、私はすべてのキャプションの子猫よりもむしろ選択するつもりです。サムネイルの中のキャプションの折り目を選択するつもりです。
だから、サムネイルスペースのキャプションがいっぱいになり、このように9ピクセルのパディングを与えて、ページを更新してみましょう。
そこに行く。
我々は、我々が探している間隔を取得します。
大丈夫。
それが私がしたかったのです。
私たちが達成したことをすばやく要約しましょう。
私たちは新しいファイルのメインナチスSSを作成し、それをスタイルシートのパブリックディレクトリの内側に置きました。そして、最終的には、特にランディングページのスタイルシートが増えました。また、ここにもjavascriptがあります。
実際に公開ディレクトリを使用するには、公開ディレクトリを提供するためにexpressと明示的に対話する必要があります。
そして私はあなたにこのアンダースコアがあなたの名前を強調していることを示しました。そして最後のことはヘッダーファイルにそれを含めたことです。
それはちょうどここにあり、スラッシュスタイルシートでそれにリンクしています。