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>