1、新建文件，创建div和ul列表
2、为div设置宽度 ul列表清除样式
3、效果如图，没有美化还
4、在列表上面添加图片栏目，产品分类
5、效果如图
6、在ul外面添加边框
7、效果如图
8、美化ul列表，为其添加图片角标，设置行距和边框
9、效果如图，是不是美观多了
10、为li添加鼠标滑过样式
11、鼠标滑过效果，底色变暗
12、添加大的div，使列表整体向左移动10px和向下移动10像素。
13、效果如图，看起来更锂淅铄旰直观，好了左侧列表就弄好了，附上代码<title>div与html制作左侧产品分类列表</title&爿讥旌护gt;</head><style>*{margin:0; padding:0px;}ul,li{ list-style:none;}.left_n{ width:221px; height:220px; float:left;}.left_n ul{border:1px solid #CCC;}.left_n ul li{line-height:40px; padding-left:30px; background:url(jk.png) no-repeat 5px center; border-bottom:1px solid #eee;}.left_n ul li:hover{background:#eee;}</style><body><div style="margin:10px;"><div><img src="s3.png" /></div><div class="left_n"> <ul> <li>中药化学成分化合物库</li> <li>中药化学成分化合物库</li> <li>中药化学成分化合物库</li> <li>中药化学成分化合物库</li> <li>中药化学成分化合物库</li> </ul></div></div></body>
