ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用して不規則な背景画像を含むナビゲーションメニューを実装する方法に関するサンプルコードの共有
CSSを使用して不規則な背景画像を含むナビゲーションメニューを実装する方法に関するサンプルコードの共有
- 黄舟オリジナル
- 2017-07-19 15:13:292038ブラウズ
一般に、ナビゲーション メニューの背景画像は比較的規則的ですが、通常、不規則な背景画像を持つ多くのナビゲーション バーにも遭遇します (たとえば、マウスを上に移動すると、背景画像が不規則になります。この例では、このタイプについてのみ説明します)。 、下の写真に示すように:
(写真1)
マウスを上に動かすと、背景が赤い矢印に変わります。一見すると、この効果は特別なものではありません。 , しかし、私が描いた緑の枠の部分をよく見てみると、それぞれの部分がつながっていて、通常の方法でやれば、下の図のように実装できます。効果:
(写真 2)
は、ブロックが切断されていることを意味します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="js/jquery.js"></script><!-- wbg解决ie6下的背景 勿动！！！-->
<!--[if IE 6]>
<script src="js/ie_png.js" mce_src="js/ie_png.js">
</script>
<script type="text/javascript">
DD_belatedPNG.fix('.previous,img');
</script>
<![endif]--> <style type="text/css">body{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;}body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
list-style:none;} body img{
border:none;}a{
color:#000;
border:0;
text-decoration:none;}a:hover{
color:#f00;
text-decoration:none;}#warp{
margin:20px auto;
width: 960px;}body{
background:url(img/bj.jpg) no-repeat center top #090909;}.nav{
background:url(img/nav_bj.png) right no-repeat;
_background:url(img/nav_bj.gif) right no-repeat;
height:47px;
width:638px;}.nav ul li{
float:left;
margin:0 -7px;/*这里的marign是实现这个效果最关键的地方*/
display:inline;
width:104px;}.nav ul li a{
display:block;
color:#FFFFFF;
padding:7px 0px;
_padding:5px 0px 6px;
width:104px;
float:left;
text-align:center;
font-family:Microsoft YaHei !important;}.nav ul li a span{
display:block;}.nav ul li a:hover{
background:url(img/a_hover.png) no-repeat;
_background:url(img/a_hover.gif) no-repeat;
color:#fff;}.nav ul .home a:hover{
background:url(img/home_hover.png) 7px center no-repeat;
_background:url(img/home_hover.gif) 7px center no-repeat;}</style> <title></title></head><body>
<p id="warp">
<p class="nav">
<ul>
<li class="home"><a href=""><span>Home</span>首页</a></li>
<li><a href=""><span>About</span>关于九弘</a></li>
<li><a href=""><span>Serve</span>服务项目</a></li>
<li><a href=""><span>Case</span>活动案例</a></li>
<li><a href=""><span>Information</span>公司动态</a></li>
<li><a href=""><span>Partners</span>合作伙伴</a></li>
<li><a href=""><span>Contact</span>联系方式</a></li>
</ul>
</p>
</p></body></html>この効果を実現するプロセスで最も重要な部分は、「li」の左右のマージン値を負の数に設定し、次に「li」の幅を設定し、 「a」は同じように、このようにします。 「a」の幅は固定されていますが、「li」の左右は余白のせいで縮みます。
以上がCSSを使用して不規則な背景画像を含むナビゲーションメニューを実装する方法に関するサンプルコードの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。