css列表样式
程序员文章站
2022-07-09 21:08:15
...
1. css列表样式
1) 设置列表的符号
2) 设置列表图片符号
3) 创建简单导航菜单
1) 设置列表的符号
list-style-type: square;
<style type="text/css">
ul,ol{
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>主页</li>
<li>我的博客</li>
<li>我的相册</li>
<li>留言</li>
<li>关于我</li>
</ul>
<ol>
<li>主页</li>
<li style="list-style-type: circle;">我的博客</li>
<li>我的相册</li>
<li>留言</li>
<li style="list-style-type: none;">关于我</li>
</ol>
</body>
2) 设置列表图片符号
list-style-image: url("../li.png");
<style type="text/css">
ul,ol{
list-style-image: url("../li.png");
}
</style>
</head>
<body>
<ul>
<li>主页</li>
<li>我的博客</li>
<li style="list-style-image: url('../image.png');">我的相册</li>
<li>留言</li>
<li>关于我</li>
</ul>
<ol>
<li>主页</li>
<li>我的博客</li>
<li>我的相册</li>
<li>留言</li>
<li>关于我</li>
</ol>
</body>
3) 创建简单导航菜单
<style type="text/css">
#navigation {
width:120px;
font-family:Arial;
font-size:14px;
text-align:right
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #9F9FED; /* 添加下划线 */
}
#navigation li a{
display:block;
height:1em;
padding:5px 5px 5px 0.5em;
text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
background-color:#1136c1;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#002099; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<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>
</ul>
</div>
</body>
<style type="text/css">
#navigation {
font-family:Arial;
font-size:14px;
text-align:center;
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #9F9FED; /* 添加下划线 */
float: left;
}
#navigation li a{
width:120px;
display:block;
height:1em;
padding:5px 5px 5px 0.5em;
text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
background-color:#1136c1;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#002099; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<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>
</ul>
</div>
</body>