• 纯CSS实现的蓝色竖向导航代码


    代码简介:纯CSS实现的蓝色竖向导航代码

    代码内容:

    <!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>
    <title>纯CSS实现的蓝色竖向导航代码_网页代码站(www.webdm.cn)</title>
    <STYLE type=text/css>
    body {background: #fff;font-family: "Lucida Grande", Helvetica, Arial, sans-serif;font-size: 12px;}
    #menu DL {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(http://www.webdm.cn/images/20100916/bottom1.gif) #69c no-repeat left bottom; PADDING-BOTTOM: 10px; MARGIN: 0px auto; WIDTH: 150px; 
    
    PADDING-TOP: 0px
    }
    #menu DT {
    	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 1.4em; BACKGROUND: url(http://www.webdm.cn/images/20100916/top1.gif) #69c no-repeat left top; PADDING-BOTTOM: 10px; 
    
    MARGIN: 0px; COLOR: #fff; PADDING-TOP: 10px; BORDER-BOTTOM: #fff 1px solid
    }
    #menu DD {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; BACKGROUND: #47a; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 0px; BORDER-BOTTOM: #fff 1px solid
    }
    #gallery A {
    	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(http://www.webdm.cn/images/20100916/arrow1.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 5px; WIDTH: 125px; COLOR: #fff; 
    
    PADDING-TOP: 5px; TEXT-DECORATION: none
    }
    #gallery A:visited {
    	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: urlhttp://www.webdm.cn/images/20100916/(arrow1.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 5px; WIDTH: 125px; COLOR: #fff; 
    
    PADDING-TOP: 5px; TEXT-DECORATION: none
    }
    #gallery A:hover {
    	BACKGROUND: url(http://www.webdm.cn/images/20100916/arrowr1.gif) #258 no-repeat 11px 10px; COLOR: #9cf
    }
    OL LI {
    	FONT-SIZE: 11px
    }
    </STYLE>
    </head>
    
    <body>
    <div align="center">
    
    <DIV id=menu>
    <DL id=gallery>
      <DT>Art Gallery 
      <DD><A title="Paul Cezanne" 
      href="http://www.cssplay.co.uk/menus/definition.html#">Paul Cezanne</A> 
      <DD><A title="Henri Matisse" 
      href="http://www.cssplay.co.uk/menus/definition.html#">Henri Matisse</A> 
      <DD><A title="Vincent van Gogh" 
      href="http://www.cssplay.co.uk/menus/definition.html#">Vincent van Gogh</A> 
      <DD><A title="William Turner" 
      href="http://www.cssplay.co.uk/menus/definition.html#">William Turner</A> 
      <DD><A title="John Constable" 
      href="http://www.cssplay.co.uk/menus/definition.html#">John Constable</A> 
      <DD><A title="Claude Monet" 
      href="http://www.cssplay.co.uk/menus/definition.html#">Claude Monet</A> 
    </DD></DL></DIV>
    
    
    <p align="center"><p>很经典的CSS蓝色竖导航,方便实用。</p></p>
    <p align="center"></p>
    <br><br>
    </div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/75836f1c-3f3e-4d32-acfd-5787da4aa24a.html

  • 相关阅读:
    string类
    设计模式--策略模式
    设计模式--单例模式
    Python 3.7的安装过程
    为什么学习Python?
    折半查找、选择排序在一位数组中的应用
    三天打鱼两天晒网
    字符串逆序
    求字符串长度函数实现的三种方法
    Spring学习笔记一 IOC、AOP原理
  • 原文地址:https://www.cnblogs.com/webdm/p/2083405.html
Copyright © 2020-2023  润新知