首页 > 代码库 > 雪碧图，列表样式以及列表样式实现导航栏布局
雪碧图，列表样式以及列表样式实现导航栏布局
雪碧图
<style>
div {
height: 28px;
width: 28px;
background-repeat: no-repeat;
background-image: url("../../img/xuebitu.gif");
}
#div2 {
background-position: -85px 0;
}
#div3 {
background-position: -163px -30px;
}
</style>
<title>雪碧图</title>
</head>
<body>
<div></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
结果图：
列表样式以及其实现导航栏布局
<style>
ul{
list-style: none;
}
</style>
<title>列表样式</title>
</head> （通常都用list-style中的none去除无序列表的圆点）
<body>
<ul>
<li>烟台大学</li>
<li>鲁东大学</li>
<li>山东工商学院</li>
<li>山东科技大学</li>
<li>青岛理工大学</li>
</ul>
结果图：
列表实现导航栏布局
<style>
* {
padding: 0;
margin: 0;
}
div {
background-color: darkorange;
height: 50px;
}
ul {
list-style: none;
color: red;
font-size: 15px;
}
li {
float:left;
width: 130px;
line-height: 50px;
}
li:first-child{
margin-left: 30px;
}
</style>
<title>列表实现导航栏布局</title>
</head>
<body>
<div>
<ul>
<li>购物车</li>
<li>帮助中心</li>
<li>加入收藏</li>
<li>设为首页</li>
<li>登录</li>
<li>注册</li>
</ul>
</div>
</body>
结果图：
雪碧图，列表样式以及列表样式实现导航栏布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。