css3_html/css_WEB-ITnose を通じて実装されたアニメーションナビゲーションメニューコード-htmlチュートリアル-php.cn

css3_html/css_WEB-ITnose を通じて実装されたアニメーションナビゲーションメニューコード

WBOY

リリース： 2016-06-24 11:44:04

オリジナル

1115 人が閲覧しました

CSS3 スタイルで実装されたスライドナビゲーションメニュー、HTML コードは次のとおりです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3 Minimalistic Navigation Menu | Tutorialzine demo</title><link rel="stylesheet" type="text/css" href="styles.css" /></head><body><h1>CSS3 Minimalistic Navigation Menu</h1><h2><a href="http://www.100sucai.com">Read the tutorial on Tutorialzine &raquo;</a></h2><div id="main">  <ul id="navigationMenu">    <li> <a class="home" href="http://www.100sucai.com"> <span>Home</span> </a> </li>    <li> <a class="about" href="http://www.100sucai.com"> <span>About</span> </a> </li>    <li> <a class="services" href="http://www.100sucai.com"> <span>Services</span> </a> </li>    <li> <a class="portfolio" href="http://www.100sucai.com"> <span>Portfolio</span> </a> </li>    <li> <a class="contact" href="http://www.100sucai.com"> <span>Contact us</span> </a> </li>  </ul></div></body></html>

ログイン後にコピー

レンダリング:

デモとダウンロード