お帰りなさい。
To Doリストアプリケーションの基本機能が完成したので、このように見えるようにするための時間です。
だから我々は間違いなくかなりの方法を持っている。
そして、我々は一度にこの1つを攻撃するつもりです。
私はこれを最も論理的に可能な順序で試してみます。
背景色やフォントのような大きな部分から始めて、この大きなコンテナに正しいマージンとパディングがあることを確認してから、ニュアンスのいくつかに焦点を当てます。
さあ、ここで始めましょう。
私たちが最初にやることは、全画面表示です。
これを押すだけで始めましょう。
これは私たちのコンテナ部門です。
私たちはここにスペースを増やすために、上部にマージンを追加します。
だから私たちはC Sに戻り、現在はJavaScriptやJavaScriptを閉じることができます。
私たちの部門はコンテナのアイデアを持っています。そして、あなたがすでに行っていることをここで選択します。
OTTOゼロのマージンよりもむしろ上下に100ピクセルを与えます。
そして、xが必要なことを忘れないでください。ゼロがある場合、Xは必要ありませんが、番号があればそれができます。
今見てみましょう。
今すぐ同じ場所から出発しています。
彼らはそこに同じマージンを持っています。
次に行うのは、このコンテナに背景色を追加することです。
見るのが少し難しいですが、私が何かを削除すると、それは背中に見えます。
ここはこの色です。
そう、もう一度。
だから私たちは先に進んでそれを追加します。
だからコンテナの代わりに背景と色をよく言う。
私はちょうどそれを読んでいますF 7 7後7です。
ちょうどそれのように。
それがどのように見えるかを確認しましょう。
OK。
だから我々はここにあるのと同じ灰色をしている。
それは同じライトグレーです。
次は国境での作業です。
そして、実際には境界線がありません。
それは非常にわずかなボックスの影です。
だから我々はまだ箱の影を見ていない。
私はここでそのことを実証し、MT-NWに入ります。それは影の効果を加える単なる方法です。
だから私が下にスクロールすると、ここにいくつかの異なるボックスの影があることがわかります。そして、非常に軽いものを持っていますが、これを気付くと本当にわずかな影があります。
したがって、使用するシンタックスとシャドウは境界線をなくします。ボックスダッシュシャドウ0 0
3ピクセル、次に色と色は基本的には黒ですが、Rです。 G. そして、それを本当に透明にするつもりです。
だからちょっと目立つ。
私はリフレッシュしてください。
今は国境はありませんが、この要素の周りにわずかな影があります。
OK。
それは今のところコンテナに行うことだけです。
H-1を攻撃しよう。
これはここに向かっている。
だから私たちの年齢で彼はちょうどH1と考えていました。
それはIDや何も持っていないし、それは問題ありません。
CSSAファイルに行き、背景色で追加してみましょう。
そこで、それぞれを選択し、バックグラウンドは2
9 8 0となる色です。それらは保存されリフレッシュされ、青の正しい色合いになります。
そこで、フォントの色を白に変更し、すぐにそれを表示します。
大丈夫。
ここでゆっくりと近づく。
私たちがやることは、余裕を持たないことです。そして今、私たちがここにあったこの空間を取り除くだけです。
ここに見られるように、マージンはありません。
これは私たちのH-1です。
ここにパディングがあります。
だから、テキストはここのように端に向かって右に上がらない。
しかし、青い箱の外側に余裕はありません。
これはテキスト入力であり、パディングも増加していますが、その周りに余白がありません。
そこでTo Doリストの周りにいくつかのパディングを追加することから始めます。
H-1ここでは、上下に10ピクセル、左右に20ピクセルを追加して保存します。
私たちが近づいているのを見ることができます。
フォントサイズを変更する必要があります。
フォントを変更する必要があります。
私たちもそれをすべて大文字にしています。今はこれを行うことができます。
あなたは私のお気に入りの一つがテキスト変換大文字であることを知っておくべきです。
私はそれがかなりクールだと思う。
ここではすべて大文字にする必要があります。フォントサイズは24ピクセルにする必要があります。フォントサイズは24 xで保存してください。最後に行うのは、通常のフォントウェイトであることです。
だから、デフォルトでH1は実際に太字になっていて、私たちはそれを望んでいません。
だから私たちはFunt way normalをやるか、フォントウェイト400を書くこともできます。
そこに行く。
今では、あなたが取り組んでいる次のものに戻ってくるフォントを変更することは、これらの箇条書きを取り除くことです。
私たちがここで何か弾丸ポイントを持っていないかどうかを見ることができます。
これらの箇条書きポイントはデフォルトのブラウザスタイルと見なされます。
だから私たちはそれを上書きします。
私たちは彼らが入っているULを選択し、リストスタイルnoneと言うつもりです。
私たちが戻ってリフレッシュすると、今や弾丸ポイントはありません。
私がしようとしているもう一つのことは、マージンをゼロに設定し、パディングをゼロにして、ここでリフレッシュして、井戸の両側のスペースを取り除くだけでなく、しかし、それはUL自身ではなく、うそです。
だから我々はそれに戻ってくるだろう。
さて、正しいフォントを追加しましょう。このフォントの名前はrubatoであり、Googleのフォントの一部です。
だから私はここでそれを開き、私はただそれをrubatoのために検索します。
さあ、いくぞ。
コレクションに追加してから使用してください。
そして、我々は正常な方法を望むつもりです。
私たちは太字でも中位でも追加します。
さあ、このリンクをHMOにコピーして、このウィンドウを閉じることができます。
各チームの場所をここに戻って、上のペーストを上にして保存してから、私たちが評価を見るために行って、体にいくつかのスタイルを追加します。
すべてがこのフォントを使用するので、フォントファミリをロボットで追加するだけです。
ちょうどそれのように。
そして、もし私たちが今戻って私たちのリフレッシュするなら、H-1はかなりそこにあります。
このボタンを除いて、私たちはすべてのフォントで同じ色を触れていませんでした。
そして、我々の同盟国はそこに着いている。
彼らは正しいフォントを持っています。
スペーシングとパディングの問題のいくつかを解決する必要があります。
次に取り組むのは、嘘の背景色です。
だから他のすべての嘘。
それは、純粋な白い白から、この灰色の色へ、私たちはその背景として持っています。
だから私たちはSSを使って他の同盟国にスタイルを追加することができます。
それでは、今やってみましょう。
最初に行うことは、すべての同盟国を選択して、白の背景を与えることです.F
F Fまたは白またはR-GA 255 255〜55でそれを行うことができます。その後、他のすべての嘘を実行します。
そしてその文法は嘘と終わりの子供です。
そしてそれもあまりにもよく、お互いのパターンをよく定義しました。
そして、もし私たちが3人をしたら、それは3分の1を言いますが、他のすべての人がほしいと思うのです。
背景色は、コンテナの背景とリフレッシュに使用したのと同じf7
f7 f7にします。
彼らは少し小さいので、今は難しいですが、他のすべての嘘は今この灰色です。
だから、もう少し追加すると、彼らは完全に交互に見ることができます。
今度は、嘘の高さと詰め物の問題を取り上げましょう。
最初にやるべきことは、40ピクセルの高さを与えて、すべての同盟者の高さを40
xにして、リフレッシュすることです。
彼らが正しい量のスペースを占めるようにOK。
ここでそれらを比較するとフォントに問題があります。
また、パディングを追加する必要があります。
次に、テキストが縦にセンタリングされるように、嘘の行の高さプロパティを変更します。
今、ラインは基本的にこの高さです。
40ピクセル全体を使って、行の高さ40 xを表示させるようにします。これは、フォントのサイズを変更しないだけで、行のサイズを変更します。
今は40ピクセルです。
だからこのラインはこの全領域を占めています。
次の小さなことは、私たちが純粋な黒を持っている色です。私が使った色は、正確に黒ではありません。
それは少し軽いです。
そこで色を設定し、それを6 6 6リフレッシュし、次に入力に対処しましょう。
だから私たちはあなたがする必要があるいくつかのことがあります。
最初のものは、それが正しい量のスペースを占めることを確認することです。
だから、この入力ははるかに大きく、フォントのサイズが大きいほど余白や余白だけではありません。
私たちは新しい背景色も持っています。
そしてクリックすると境界があります。
ですから、それらのすべてを作業しましょう。より大きなフォントサイズを追加することから始めます。
そこで、入力フォントサイズを選択し、フォントサイズを18ピクセルに設定します。
私たちがここにいる間、我々は背景色と背景色を行い、それは同じf 7
7 1/2 7です。
ちょうどそれのように。
そしてリフレッシュしましょう。
OK。
私たちは近づいています。
次の作業は幅を追加することです。これに与える幅は100％です。
だから今はコンテナを横切る途中でしかありません。
私たちがリフレッシュすれば、それは今や全面的に進む。
しかし、我々はいくつかの小さな問題があります。
私たちが世話したい最初のことは、そこにいくつかの詰め物です。
そこで、右側の13ピクセルに13ピクセルのパディングを追加します。
下側に13ピクセル、左側に20ピクセル。
だから、これを見ることができます。
我々は上部と下部が13です。
左には20ピクセルあります。
だから私は新鮮だった今、私たちは今、より多くのスペースを取るより多くの入力を持っています。
私たちには、入力が長すぎるという問題があります。
それが100％になるべきだと言ったとき、それは実際にはちょうど内容であり、それはパディングを含まず、マージンを含んでいませんでした。つまり、入力がdivの最後を過ぎて、パディングと。
私はそれを変更する別の方法を示すことを意味します。これはBoxサイジングと呼ばれるプロパティです。
したがって、ブロックサイジングではいくつかのオプションがありますが、基本的にボックスモデルのボックスサイズの制御方法を制御します。
そしてそれをDaschの境界線に変更します。
そしてこれは私がちょうどそれを読むだろうと言う幅と高さのプロパティは、余白ではなく、パディングと境界線が含まれています。
だから私がここで行う境界ボックスに変更すれば、移動する前にボックスサイズの順序ボックスを追加して保存するだけです。
私が指摘しておきたいのは、これはプレフィックスを持つプロパティの1つです。
Web KitとMozyはMozであり、Microsoftの混乱です。
私は今それをするつもりはない。
それはソリューションコードになります。
しかし、入力には時間がかかります。
それで、少なくとも今はChromeをどのように更新しているのかは分かりません。
私たちの箱はボーダーにパディングを含んでいますが、余白はありません。
だから我々は完璧なフィット感で終わる。
次に、私がそこに入力するときにフォントに色を付けるつもりです。
だから私たちはすべてする必要があります。
私はちょうどH-1から同じ色を取り、私たちの入力に行き、ちょうどその色だと言うでしょう。
私たちが今リフレッシュしたら、私たちは入力し始めます。
さて、その効果に焦点を当てましょう。
あなたがここで見ることができる入力に焦点を当てるものをクリックすると、その周りに境界線ができます。
だから我々はそれに取り組む必要がある。
現在、デフォルトのフォーカス効果があります。
したがって、ホバー擬似セレクターのように入力コロンのセレクターがあります。
これらのセルは、入力に集中したときにのみ実行されます。
だから私はそれに焦点を当てて、背景を白にするつもりです。
私はまた3ピクセルの境界線をつけていきます。私たちが作業してきた青い色は、アウトラインではないアウトラインを与えます。この邪魔なハイライトをブラウザー自体から取得します。
入力に焦点を当てると、この新しい青い枠線が得られ、背景色も変更されて灰色になり、白です。
だからこそ入力用に行う必要がありますが、ここにあるプレースホルダテキストを追加してください。
だから私はHTLのインデックスに行き、入力の隣にまたは入力でプレースホルダ属性を追加します。
そして、これはあなたが望むものでもかまいません。
私はそれを一致させるだけです。
だからそれは新しいものを追加し、リフレッシュすることです。
そこに行く。