Maison > Article > interface Web > Exemple de partage de code sur la façon d'implémenter un menu de navigation avec des images d'arrière-plan irrégulières à l'aide de CSS

Exemple de partage de code sur la façon d'implémenter un menu de navigation avec des images d'arrière-plan irrégulières à l'aide de CSS

黄舟original: 2017-07-19 15:13:291976parcourir

Généralement, l'image de fond du menu de navigation est relativement régulière, mais généralement on rencontre aussi de nombreuses images de fond irrégulières dans la barre de navigation (par exemple, lorsque la souris est déplacée, l'image de fond est irrégulière, ceci l'exemple ne traite que de ce type), comme le montre la figure suivante :

(Figure 1)

Lorsque la souris est déplacée vers le haut, l'arrière-plan se transforme en une flèche rouge. Peut-être qu'à première vue, je pense qu'il n'y a rien de spécial dans cet effet, mais si vous regardez attentivement le cadre vert que j'ai dessiné, vous constaterez que chaque pièce est visible. est connecté à Ils ne seront pas déconnectés ensemble ; si vous suivez la méthode ordinaire, vous pouvez obtenir l'effet montré dans l'image ci-dessous :

(Image 2)

C'est-à-dire que les blocs sont déconnectés les uns des autres.

<!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(&#39;.previous,img&#39;); 
     </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>

La partie la plus critique pour réaliser cet effet est de définir les valeurs de marge gauche et droite de "li" sur des nombres négatifs , puis définissez la largeur de "li" et de "a" pour qu'elle soit la même, de sorte que la largeur de "a" soit fixe et que les côtés gauche et droit de "li" rétrécissent à cause des marges.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Attribut de position centrage horizontal absolu et relatif dans le style CSSArticle suivant：Attribut de position centrage horizontal absolu et relatif dans le style CSS

Articles Liés

Voir plus