ホームページ > 記事 > ウェブフロントエンド > DIV+CSS Webページの簡単な作成方法 TIP_CSS/HTML

DIV+CSS Webページの簡単な作成方法 TIP_CSS/HTML

WBOYオリジナル: 2016-05-16 12:10:471652ブラウズ

基本原則は、display を使用することです。display: ブロックの場合、表示されません。
例:

コードは次のとおりです:

#infobox span{ display: none; } 
#infobox a:hover span{display: block;position:absolute ;} 

/*以是下显示TIP的内容*/ 
#infobox span{ display: none; } 
#infobox a:hover span{display: block;position:absolute;border:1px solid #640000;background: #FFFFCC;margin-top:26px!important; margin-top:20px;color:#000;padding:5px;white-space: nowrap;} 
</style>

<div id="info">
  <div id="infobox">
   <ul>
<li>
<a href="http://www.zishu.cn" target="_blank">ここから私のホームページに入ることができます！ <span>ホームページ</span></a>
   </li>
<li>
<a href="http://www.zishu.cn" target="_blank">ここには英語とジョークがいくつかあります。 <span>英語のジョーク</span></a>
   </li>
<li>
<a href="http://www.zishu.cn" target="_blank">ここに友達のウェブサイトがあります! <span>フレンドリーリンク</span></a>
   </li>
<li>
<a href="http://www.zishu.cn" target="_blank">何か言いたいことがあれば、ここに来てください！ <span>メッセージを残してください</span></a>
   </li>
<li>
<a href="http://www.zishu.cn" target="_blank"> は私自身が書いて集めた記事です。 <span>技術記事</span></a>
   </li>
<li>
<a href="http://www.zishu.cn" target="_blank"> もう持っていない場合は、日記に記入してください。 <span>人生の写真</span></a>
  </li>
  </ul>
<div class="c">
 </div>
</div>
<div id="center">
</div>
</div>

[Ctrl+A ですべて選択注: 外部 Js を導入する必要がある場合は、それを更新してを実行する必要があります]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS を使用してテキスト属性を動的に制御する_CSS/HTML次の記事：CSS を使用してテキスト属性を動的に制御する_CSS/HTML

続きを見る

DIV+CSS Webページの簡単な作成方法 TIP_CSS/HTML

関連記事