28、设计的导航实例

28、设计的导航实例

<!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=gb2312" />

<title>网页特效观止--CSS设计的导航实例</title>

<style>

/* http://7stk.com 子鼠 */

#menu{

 font-family: Arial, Helvetica, sans-serif;

 font-size: 12px;

 border:1px solid #000000;

 width:200px;

 background-color: #FF9D1F;

 text-align:center;

}

#menub{

 margin:20px;

}

.w1{

 margin:3px;

 border-top:1px solid #FFC881;

 border-right:1px solid #EE8600;

 border-bottom:1px solid #EE8600;

 border-left:1px solid #FFC881;

}

.w2{

 border-top:1px solid #EE8600;

 border-right:1px solid #FFAD42;

 border-bottom:1px solid #FFAD42;

 border-left:1px solid #EE8600;

}

.w3{

 border-top:2px solid #D07500;

 border-right:2px solid #FFB85D;

 border-bottom:2px solid #FFB85D;

 border-left:2px solid #D07500;

}

.w4{

 border:1px solid #FC8E00;

}

.w5{

 border:1px solid #000000;

}

 

.w7{

 border-top:1px solid #FFDCAF;

 border-right:1px solid #C87000;

 border-bottom:1px solid #C87000;

 border-left:1px solid #FFDCAF;

}

.w8{

 border-top:1px solid #FFD7A4;

 border-right:1px solid #FF9204;

 border-bottom:1px solid #FF9204;

 border-left:1px solid #FFD7A4;

}

.w9{

 background:#FFC881;

 border-top:1px solid #FECE8F;

 border-right:1px solid #FFAE44;

 border-bottom:1px solid #FFAE44;

 border-left:1px solid #FECE8F;

}

#menu a{

 color: #884C00;

 text-decoration: none;

 font-weight: bold;

}

#menu a:hover{background:#FFB85D; color:#000000;}

#menu a:hover .w7 {

 border-top:1px solid #C87000;

 border-right:1px solid #FFDCAF;

 border-bottom:1px solid #FFDCAF;

 border-left:1px solid #C87000;

}

#menu a:hover .w8 {

 border-top:1px solid #FF9204;

 border-right:1px solid #FFD6A1;

 border-bottom:1px solid #FFD6A1;

 border-left:1px solid #FF9204;

}

#menu a:hover .w9 {

 background:#FFB85D;

 border-top:1px solid #FFAE44;

 border-right:1px solid #FECF91;

 border-bottom:1px solid #FECF91;

 border-left:1px solid #FFAE44;

}

</style>

</head>

<body>

<!-- http://7stk.com 子鼠-->

<div id="menu">

  <div id="menub">

    <div class="w1">

      <div class="w2">

        <div class="w3">

          <div class="w4">

            <div class="w5"> <a href="http://http://7stk.com" target="_blank">

              <div class="w7">

                <div class="w8">

                  <div class="w9"> www..7stk.com </div>

                </div>

              </div>

              </a> </div>

          </div>

        </div>

      </div>

    </div>

    <div class="w1">

      <div class="w2">

        <div class="w3">

          <div class="w4">

            <div class="w5"> <a href="http://http://7stk.com" target="_blank">

              <div class="w7">

                <div class="w8">

                  <div class="w9"> http://7stk.com </div>

                </div>

              </div>

              </a> </div>

          </div>

        </div>

      </div>

    </div>

    <div class="w1">

      <div class="w2">

        <div class="w3">

          <div class="w4">

            <div class="w5"> <a href="http://http://7stk.com" target="_blank">

              <div class="w7">

                <div class="w8">

                  <div class="w9"> http://7stk.com </div>

                </div>

              </div>

              </a> </div>

          </div>

        </div>

      </div>

    </div>

    <div class="w1">

      <div class="w2">

        <div class="w3">

          <div class="w4">

            <div class="w5"> <a href="http://http://7stk.com" target="_blank">

              <div class="w7">

                <div class="w8">

                  <div class="w9"> http://7stk.com </div>

                </div>

              </div>

              </a> </div>

          </div>

        </div>

      </div>

    </div>

    <div class="w1">

      <div class="w2">

        <div class="w3">

          <div class="w4">

            <div class="w5"> <a href="http://http://7stk.com" target="_blank">

              <div class="w7">

                <div class="w8">

                  <div class="w9"> http://7stk.com </div>

                </div>

              </div>

              </a> </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

</body>

</html>

 

Write a comment

Comments: 0