css-共通ナビゲーションバースタイル設定_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

Jun 24, 2016 am 11:52 AM

html コード:

<body>
<h3>垂直ナビゲーション</h3>
<ul class = 'sort'>
<li><a href= "#多肉植物">多肉植物</a></li>
<li><a href="#">花植物</a></li>
&lt ;li><a href="#">観葉植物</a></li>
<li><a href="#">草本植物</a></li>
<li>< ;a href="#">木本植物</a></li>
<li><a href="#">水生植物< /a></li> ul>

<h3>水平ナビゲーション</h3>
<ul class = "des">
<li><a href="# ">形態的特徴</a></li&gt ;
<li><a href="#">主な品種</a></li>
<li><a href="#">生理的特徴</a>< /li>
<li><a href="#">科と属の紹介</a></li>
<li><a href="#">分布</a&gt ;</li>
<li><a href="#">生活習慣</a></li> ;
</ul>

<h3>ページネーションコンテンツ</h3>
<ol class = "ページネーション">
<li><a href="#" rel="prev"&gt ;前のページ</a></li>
<li><a href="#">1 </a></li>
<li><a href=" #">2 </a></li>
<li>< ;a href="#">3 </a></li>
<li>gt;<a href="#">4 </a></li>
<li&gt ;<a href="#">5 </a></li>
<li><a href="#">6 </a></li> ;li><a href="#" rel ="next">次のページ</a></li> ;
</ol>
</body>

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"]:前
{
コンテンツ: "