CSSとDIVの基礎知識(2)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSSとDIVの基礎知識(2)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:31:57

オリジナル

861 人が閲覧しました

margin: 外側のマージン、このラベルと他のラベルの間の距離です。パディング: 内側のマージン、ラベルの内部マージン。さまざまなブラウザーとの互換性を確保するには、CSS ファイルの先頭に追加するのが最適です。ラベルが使用されている限り、毎回次のリセット

div,body

{

margin:0;

padding:0;

}

display:block; を追加する必要があります。これにより、インライン要素をブロックに変換できます。 elements float:left; float、ブロック要素を 1 行に配置できます。 clear:both フローティング HTML タグをクリアします。順序付きリストの項目は li で、ul と li は両方ともブロック要素であるため、1 つの要素が 1 行になります。並列化したい場合は、float:left を実行してください。デフォルトのサブ項目の前にドットがありますが、これは list-style:none で (ul で) 削除できます。

/li & & & lt; /ul & gt;

中央をリセット: 行の高さをテキストの高さに設定し、text-align: center を次のようにします

#nav ul li

{

Margin -right:1px;

中央のメニューにいる場合は、上記のようにデザインしてください。

text-decoration:none; テキストの通常のスタイルを示します: 下線付き

10。 a:hover は、マウスが上を通過するときです

以下は、これら 2 つの研究を行った後の小さな例です。ナビゲーションバー、最初は HTML コードの一部です

                  <p class="sycode">                 <     div      id     ="nav"     >           <     ul     >           <     li     ><     a      href     ="#"     >     MyHome     </     a     ></     li     >           <     li     ><     a      href     ="#"     >     个人简介     </     a     ></     li     >           <     li     ><     a      href     ="#"     >     文档分类     </     a     ></     li     >           <     li     ><     a      href     ="#"     >     人生发展规划     </     a     ></     li     >           <     li     ><     a      href     ="#"     >     我要提问     </     a     ></     li     >           <     li     ><     a      href     ="#"     >     在线问答     </     a     ></     li     >           </     ul     >           </     div     >                  </p>

ログイン後にコピー

次に、CSS コードが適用されますこのディビジョンへ

                  <p class="sycode">                 div,body,ul,li     {      margin     :     0     ;      padding     :     0     ;          }     #nav     {      width     :     960px     ;      height     :     35px     ;      margin     :     0 auto     ;      margin-top     :     35px     ;      background-color     :     #CCC     ;          }     #nav ul     {      width     :     960px     ;      height     :     35px     ;      list-style     :     none     ;          }     #nav ul li     {      float     :     left     ;      margin-right     :     1px     ;      height     :     35px     ;      line-height     :     35px     ;       text-align     :     center     ;            }     #nav ul li a     {       font-size     :     14px     ;      color     :     Black     ;      text-decoration     :     none     ;      padding     :     0 10px     ;      height     :     35px     ;      display     :     block     ;      float     :     left     ;          }     #nav ul li a:hover     {      color     :     White     ;      background     :     #000     }                  </p>

ログイン後にコピー