＜学習の記録＞（最初の３日間） JD.comページの諸注意

トレーニングスクール
1日目〜3日目
まずはHTMLを学びましょう
今流行っているのはHTML5で、現在学んでいるのはHTML5の仕様です。
(ある程度の基礎がある人向けの学習)
最初の 3 日間で学んだのは、JD.com ページの書き方でした。以前に書いたものとページは同じに見えましたが、内容は異なりました。先生は、それはまだ非常に異なっていて、より詳細であると言いました。
1. プログラマーにとって、他の人が読みやすいように標準化された方法で記述することが非常に重要であるため、コメントは非常に重要です。
《注意点》
2. 最初にページのレイアウトを慎重に検討し、先頭と末尾に共通するものが多く、CSSファイルに記述できます。
3. ユーザーが主に訪れる場所では、最初のタグを

で囲み、その後にwidth、heightを書くなど、できるだけ美しく書くことができます。 、背景（

;
.dps{
width: 1px;
height: 12px;
background-color: #ddd;
margin-top: 9px など） ;
padding: 0
}
ここで、liには他のパディング値があり、継承される可能性があるため、ここでは0が設定されることに注意してください。
最後に直接書くことができます
以前はコードを書いてレイアウトが好きでしたが、これは書き始めるときに高さを書くのが簡単です。 , ただし、書き終わったら削除するように注意してください。
フロートしている場合は、コードの全体のレイアウトに疑似要素を追加してフロートをクリアできます。つまり、.clearfix:after{}

「ページノートの作成」
<1>三角形の記号は;◇
iとsはドラッグする必要があります。つまり、position:absoluteを追加します。 ; 幅と高さを設定し、overflow:hidden を設定します
Example.shortcut s{
font:400 15px/12px consolas;
位置: 絶対;
上: -6px;
右: 0;
}
.shortcut i{
幅: 15px;
高さ: 8px;
位置:絶対;
右:8px;
上:12px;
オーバーフロー:非表示;
}
前後に写真や三角形を追加する必要がある場合他の人は、padding の設定など、スペースを残すことに注意してください。 オブジェクトの位置関係を変更するには、次の 3 つの表示があります。 border-radius:0 0 0 0 を使用して、不規則な形のアイコンを記述することができます。ハードコーディングされないように、幅を設定しないように注意し、.shopping-t{
position:absolute; などのpadding
を設定します。
上: -6px;
右: 7px;
境界半径: 8px 7px 7px 0;
背景: 赤;
カラー:#fff;
パディング: 0 3px;
フォント:400 11px/15px 通常;
}

<4> ページが縮小するにつれて、設定されたコードが中央の部分で変更される場合は、位置を設定することに注意してください
いいね

< ; span class="st sl2">

.slogen .st{
位置:絶対;
左:50%;
}
.slogen .sl1{
マージン左:-604px;
}
.slogen . sl2{
margin-left: -304px;
}
.slogen .sl4{
margin-left: 305px;
}

<5>a タグは、img をラップすることがよくあります (画像をクリックしてジャンプすると、大きな画像全体になりますが、小さな画像や移動する画像は引き続き b、i などを使用します)、b、i タグなど追加するスタイルについては、b と i の設定表示に注意してください

同時に、b、i などを背景画像として追加することもできます。 Web クローラーの最適化を促進するためのテキストの段落

など、Jingdong
a{
display: inline-block;
width: 270px;
height: 60px;
background: url ("../images/logo-201305.png");
margin-top: 20px;
text-indent: -10000px;/*文字が画像から遠く離れています*/
}
<6>特定のページを他のページの上に設定するには、z-index を使用しますが、このページがフローティングの場合は、位置を相対的に設定する必要があります。標準からフローティングされるため、z-index を設定できません