您的位置：首页 > 其它

图片与文字并排显示的导航

2016-04-11 17:04 274 查看

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="css/reset.css" rel="stylesheet" type="text/css"/>

<title>无标题文档</title>

<style>

.nav{

 background-color:#34495e;

 width:200px;

 font-size:10px;

}

.nav li{

 height:50px;

 line-height:50px;

 border-bottom:1px solid #666;

}

.nav li a{

 color:#fff;

}

.icon01,.icon02,.icon03,.icon04,.icon05{

 background: url(imges/group.png) no-repeat;

 display:block;

 width:28px;

 height:28px;

 float:left;

 margin-left:20px;

 margin-right:10px;

 margin-top:12px;

}

.icon01{

 background-position:-18px -9px;

}

.icon02{

 background-position:-15px -48px;

}

.icon03{

 background-position:-18px -9px;

}

.icon04{

 background-position:-19px -90px;

}

.icon05{

 background-position:-18px -190px;

}

</style>

</head>

<body>

<ul class="nav">

 <li><a href="#">DASHBOARD</a></li>

 <li><a href="#">DASHBOARD</a></li>

 <li><a href="#">DASHBOARD</a></li>

 <li><a href="#">DASHBOARD</a></li>

 <li><a href="#">DASHBOARD</a></li>

</ul>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航