欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css列表样式

程序员文章站 2022-07-09 21:08:15
...
1. css列表样式

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>
相关标签: css