马小萍
2016-08-22 10:47
<!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" />
<title>商城分类导航效果CSS</title>
<style type="text/css">
body{/*设置全局属性*/
padding=0;/*左边距0*/
font-size:10pt;/*字体10磅*/
}
.topmenu
{
display:block;/*块状显示*/
width:220px;
border:2px solid #e4393c;/*边框*/
margin:0;
padding:0;
}
.toptitle
{
height:40px;
line-height:40px;/*行高*/
text-align:left;/*对齐方式 左对齐*/
font-size:11pt;/*字体大小*/
font-weight:bold;/*字体加粗*/
color:White;/*字体颜色*/
background:#e4393c;/*背景颜色*/
padding-left:20px;/*toptitle左边距*/
}
.topmenu li/*topmenu下的所有li标签*/
{
height:30px; /*每个li高度为30px*/
line-height:30px;/*行高*/
font-size:11pt;/*字体大小*/
list-style-type:none;/*去掉li的小圆点*/
text-align:left;/*对齐方式 左对齐*/
padding-left:8px;/*li左边距*/
z-index:3;/*用于出现悬浮层是区分上下的顺序*/、
background-image: url(../image/FFFFF.png);
background-repeat: no-repeat;
background-position: right;
}
.topmenu li a /*topmenu下的所有li的a 标签*/
{
text-decoration:none;/*去掉下划线*/
color:#313131;/*字体颜色*/
}
</style>
</head>
<body>
<ul class="topmenu">
<div class="toptitle"><!--标题 可以写在ul里边 也可以写在ul外边-->
全部商品分类
</div>
<li><a href="#">图书、音响、家用电器</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机、数码</a></li>
<li><a href="#">电脑、办公</a></li>
<li><a href="#">家居、家具、家装、厨具</a></li>
<li><a href="#">服饰内衣、珠宝首饰</a></li>
<li><a href="#">个护化妆</a></li>
<li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
<li><a href="#">运动户外</a></li>
<li><a href="#">汽车用品</a></li>
<li><a href="#">母婴、玩具乐器</a></li>
<li><a href="#">食品饮料、酒类、生鲜</a></li>
<li><a href="#">营养保健</a></li>
</body>
</html>
可能图片路径的问题吧
"background-image: url(../image/FFFFF.png);"没写对吧
商城分类导航效果
63734 学习 · 313 问题
相似问题