css-共通ナビゲーション バー スタイル設定_html/css_WEB-ITnose

html コード:

垂直ナビゲーション

• 多肉植物


• 花植物

< ;li>観葉植物

• 草本植物


• < ;a href="#">木本植物


• 水生植物< /a>
ul>



水平ナビゲーション





• 形態的特徴
• 主な品種


• 生理的特徴< /li>
  
• 科と属の紹介


• 分布
  
• 生活習慣




ページネーションコンテンツ







2. 1


3. 2


4. < ;a href="#">3


5. gt;4

5

6. 6
;li>次のページ




CSS コードとコメント:

/*CSS に堪能なリファレンス~*/

/*垂直ナビゲーション*/

ul.sort
{
margin: 1px ; /*Margin*/
padding: 1px; /*Padding*/
list-style-type : none; /*デフォルトの箇条書き (項目の前にある醜いドット) を削除します*/
width: 8em ;
background-color: #8BD400;
border: 1px Solid #486B02;
}
ul.sort li
{
margin: 1px; /*margin*/
background: url(img/arrow_state_blue_right.png) no-repeat 0% 50%;/*画像は繰り返しません*/
padding-left:15px; /*テキストの左側のスペース*/
border-top: 1px Solid #E4FFD3;
border-bottom: 1px Solid #486B02 ;
}
ul.sort a
{
display: block;/*このようにスタイルの a は、li コンテンツ全体 (後ろの空白部分を含む) に適用されます*/
color: #2B3F00;
text-decoration: none ; /*underline*/
}
ul.sort a:hover,
ul。 sort a:focus,
ul.sort .selected a
{
色: #E4FFD3;
背景色: #6DA203;
}

/*水平ナビゲーション*/

ul.des

{
margin: 1px;
padding: 1px;
overflow: hidden;/*フローティングの場合、ドキュメント フロー内のスペースを占有せず、実際のコンテンツがない場合は親リストが縮小します* /
}
ul.des li
{
float :left;
padding-right:0.5em; /*テキストの前後の空白*/
padding-left:0.5em;
background-color:#8BD400;
border:1pxsolid #486B02;
}
ul .des a
{
表示: ブロック;
カラー: #2B3F00;
テキスト装飾: なし; /*下線*/
}
ul.des a:hover,
ul.des .選択された
{
色: #E4FFD3;
背景色: #6DA203;
}


/*水平ナビゲーション (ページネーション)*/
ol.pagination
{
margin: 1px; /*外側のマージン*/
padding: 1px; /*Pagination*/
}
ol.pagination li
{
float : left ;
margin-right: 0.6em;
}
ol.pagination a
{
display: block;
padding: 0.2em 0.5em;
border: 1px Solid #ccc;
text-decoration: none; /* 下線* /
}
ol.pagination a:hover,
ol.pagination a:focus
{
background-color:blue;
color:white;
}
/*前のページと次のページの境界線を削除して追加しますformatting* /
ol.pagination a[rel="prev"],
ol.pagination a[rel="next"]
{
border: none;
}
ol.pagination a[rel="prev"]:前
{
コンテンツ: "