Heim > Artikel > Web-Frontend > Beispielcode-Freigabe zur Implementierung eines Navigationsmenüs mit unregelmäßigen Hintergrundbildern mithilfe von CSS

Beispielcode-Freigabe zur Implementierung eines Navigationsmenüs mit unregelmäßigen Hintergrundbildern mithilfe von CSS

黄舟Original: 2017-07-19 15:13:291978Durchsuche

Im Allgemeinen ist das Hintergrundbild des Navigationsmenüs relativ regelmäßig, aber normalerweise stoßen wir auch auf viele unregelmäßige Hintergrundbilder in der Navigationsleiste (z. B. wenn die Maus darüber bewegt wird, ist das Hintergrundbild unregelmäßig). Beispiel behandelt nur diesen Typ), wie in der folgenden Abbildung gezeigt:

(Abbildung 1)

Wenn die Maus nach oben bewegt wird, verwandelt sich der Hintergrund in einen roten Pfeil. Vielleicht denke ich auf den ersten Blick, dass an diesem Effekt nichts Besonderes ist, aber wenn Sie sich den grünen Rahmen, den ich gezeichnet habe, genau ansehen, werden Sie feststellen, dass jedes Stück ist verbunden mit Sie werden nicht miteinander verbunden; wenn Sie der gewöhnlichen Methode folgen, können Sie den im Bild unten gezeigten Effekt erzielen:

(Bild 2)

Das heißt, Blöcke sind voneinander getrennt.

<!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>

Der wichtigste Teil bei der Realisierung dieses Effekts besteht darin, die linken und rechten Randwerte von „li“ auf negative Zahlen zu setzen , und dann Stellen Sie die Breite von „li“ und „a“ auf die gleiche ein, sodass die Breite von „a“ fest ist und die linke und rechte Seite von „li“ aufgrund des Rands kleiner werden.

Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe zur Implementierung eines Navigationsmenüs mit unregelmäßigen Hintergrundbildern mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Positionsattribut absolute und relative horizontale Zentrierung im CSS-StilNächster Artikel：Positionsattribut absolute und relative horizontale Zentrierung im CSS-Stil

In Verbindung stehende Artikel

Mehr sehen