商品分类

01.创建一个html页面

    
             
     
     
    
      
       全部商品分类
      
    
      
        
       
图书 音像 数字商品
        
       
家用电器 手机 数码
        
       
电脑 办公
        
       
家居 家装 厨具
        
       
服饰鞋帽 个护化妆
        
       
礼品箱包 钟表 珠宝
        
       
食品饮料 保健食品
        
       
彩票 旅行 充值 票务
    
      
     

02.创建对应的demo1.css文件

*{
       margin: 0px;  /*设置网页中所有的元素  外边距为0*/}#nav{
       width: 230px;  /*最大的div宽度*/}.title{
       height: 30px;  /*div的高度*/    line-height: 30px;/*内容的行高*/    color: white; /*字体颜色*/    background:red url("../image/arrow-down.gif") 210px no-repeat; /*背景*/    cursor: move; /*控制鼠标的形状为 可移动状态*/}ul{
       background-color: #D7D7D7;  /*背景颜色*/}a{
       text-decoration: none;  /*去掉超链接默认的下划线*/}li{
       background-image: url("../image/arrow-right.gif") ; /*背景图片*/    background-repeat: no-repeat;   /*背景图片的填充方式*/    background-position: 173px;     /*背景图片的位置*/    line-height: 30px;     /*内容的行高*/    /*list-style-image: url("../image/arrow-down.gif");  设置列表的标志图片*/   /* list-style-type: decimal-leading-zero;  设置列表的标志类型*/   /* list-style: decimal url("../image/arrow-down.gif") ; 类型和图片同时存在  取图片*/   list-style: none;  /*去除标记*/}/* 超链接的伪类*//*a:link{  未访问的链接    color:red;}*//*a:visited{ 已经访问的链接    color:darkcyan;}*/a:hover{
   /* 鼠标悬停的链接*/    color:red;    text-decoration: underline;/*给超链接增加下划线*/}/*a:active｛ 点或者是被选中的链接    color:yellow;}*/

03.效果图