返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: dw入门 >

css设置有序列表属性

2020-04-21 文章标签: css 按钮 教程 浏览次数:

我们讲解下HTML5和CSS3,包含知识点CSS设置项目符号,自定义项目图标,定义列表项目的版式

HTML5教程

1.CSS设置li符号,网站里面经常看到的有序列表,无序列表,默认css前面是有小黑点的。怎么设置默认按照数字排序,或者其他属性呢,这个时候就需要用到list-style-type语法。我们先对比下有什么不同

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body { background-color: #CCCCCC; }       /* 设置页面背景颜色 */
ul {/*列表样式*/
    color: #CC0000;
    list-style-type: decimal;/*项目编号*/
}
</style>
</head>
<body>
<h2>北京最吸引人的地方</h2>
<ul>
    <li>什刹海</li>
    <li>故宫</li>
    <li>长城</li>
    <li>北海公园泛舟</li>
    <li>香山公园赏红叶</li>
</ul>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {background-color: #CCCCCC;}       /* 设置页面背景颜色 */
ul {/*列表样式*/
    color: #CC0000;
    list-style-type: square;/*项目符号*/
}
</style>
</head>
<body>
<h2>北京最吸引人的地方</h2>
<ul>
    <li>什刹海</li>
    <li>故宫</li>
    <li>长城</li>
    <li>北海公园泛舟</li>
    <li>香山公园赏红叶</li>
</ul>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body { background-color: #CCCCCC; }/* 设置页面背景颜色 */
ul {/*列表样式*/
    color: #CC0000;
    list-style-type: disc;/*项目符号为实心圆*/
}
.special { list-style-type: square;/*单独设置项目符号为正方形*/ }
</style>
</head>
<body>
<h2>网站导航</h2>
<ul>
    <li>财经</li>
    <li>体育</li>
    <li>互联网</li>
    <li>时尚</li>
    <li class="special">更多</li>
</ul>
</body>
</html>

2.自定义li图标,有的新闻列表前面是小小的圆点,其实他是一个图片,怎么设置css呢

自定义项目图标

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {/*列表样式*/
    color: #CC0000;
    list-style-image: url(//freemuban.com/js/421/open.png);/*项目符号图片*/
}
.author {
    color: #666;
    float: right;
}
</style>
</head>
<body>
<h1>热歌榜</h1>
<ul>
    <li>微微一笑很倾城<span class="author">杨洋</span></li>
    <li>演员<span class="author">薛之谦</span></li>
    <li>你在终点等我<span class="author">王菲</span></li>
    <li>夜空中最亮的星<span class="author">G.E.M.邓紫棋</span></li>
    <li>寂寞的人伤心的歌<span class="author">龙梅子</span></li>
    <li>来日方长<span class="author"> 薛之谦</span></li>
</ul>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li{
    background: url(//freemuban.com/js/421/open.png) no-repeat 0 20%;
    padding-left:30px;
    line-height:28px;
}
.author {
    color: #666;
    float: right;
}
</style>
</head>
<body>
<h1>热歌榜</h1>
<ul>
    <li>微微一笑很倾城<span class="author">杨洋</span></li>
    <li>演员<span class="author">薛之谦</span></li>
    <li>你在终点等我<span class="author">王菲</span></li>
    <li>夜空中最亮的星<span class="author">G.E.M.邓紫棋</span></li>
    <li>寂寞的人伤心的歌<span class="author">龙梅子</span></li>
    <li>来日方长<span class="author"> 薛之谦</span></li>
</ul>
</body>
</html>

3.定义列表li的版式,我们仿照一个百度mp3的效果

定义列表li的版式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body { background-color: #CCCCCC; }/*页面背景色*/
ul, h1, p {
    margin: 0px;
    padding: 0px;
}
.content {
    background-color: #F8F8F8;
    padding: 4px;
    border: solid 1px #666;
}
.content ul { list-style-type: none; }/*不显示项目符号*/
.content ul li { float: left; }/*左浮动,实现列表项的横向显示*/
/*进一步美化样式*/
.content {
    width: 800px;
    height: 60px;
}
.content ul {
    float: right;
    margin-top: -45px;
}
.content h1 {
    font-size: 24px;
    padding: 4px 0 4px 24px;
}
.content p {
    font-size: 12px;
    color: #666;
    margin: 4px 0 0 38px;
}
.content ul li {
    padding: 4px 8px 4px 54px;
    margin: 4px;
    height: 30px;
    width: 50px;
    border: solid 1px #666;
    line-height: 30px;
    font-size: 12px;
    background: url(//freemuban.com/js/421/z1.png) 6px center no-repeat;
    background-color: #FFFFFF;
}
.content ul li:nth-child(1) { background-image: url(//freemuban.com/js/421/z1.png); }
.content ul li:nth-child(2) { background-image: url(//freemuban.com/js/421/z2.png); }
.content ul li:nth-child(3) { background-image: url(//freemuban.com/js/421/z3.png); }
.content ul li:nth-child(4) { background-image: url(//freemuban.com/js/421/z4.png); }
.content ul li:nth-child(5) { background-image: url(//freemuban.com/js/421/z5.png); }
</style>
</head>
<body>
<div class="content">
    <h1>百度随心听</h1>
    <p>不用找歌直接听!</p>
    <ul>
        <li>随便听听</li>
        <li>在家</li>
        <li>上网</li>
        <li>轻松</li>
        <li>舒缓</li>
    </ul>
</div>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body { background-color: #CCCCCC; }/*页面背景色*/
ul, h1, p {
    margin: 0px;
    padding: 0px;
}
.content {
    background-color: #F8F8F8;
    padding: 4px;
    border: solid 1px #666;
}
.content ul { list-style-type: none; }/*不显示项目符号*/
.content ul li { display:inline-block;}
/*进一步美化样式*/
.content {
    width: 800px;
    height: 60px;
}
.content ul {
    float: right;
    margin-top: -45px;
}
.content h1 {
    font-size: 24px;
    padding: 4px 0 4px 24px;
}
.content p {
    font-size: 12px;
    color: #666;
    margin: 4px 0 0 38px;
}
.content ul li {
    padding: 4px 8px 4px 54px;
    margin: 4px;
    height: 30px;
    width: 50px;
    border: solid 1px #666;
    line-height: 30px;
    font-size: 12px;
    background: url(//freemuban.com/js/421/z1.png) 6px center no-repeat;
    background-color: #FFFFFF;
}
.content ul li:nth-child(1) { background-image: url(//freemuban.com/js/421/z1.png); }
.content ul li:nth-child(2) { background-image: url(//freemuban.com/js/421/z2.png); }
.content ul li:nth-child(3) { background-image: url(//freemuban.com/js/421/z3.png); }
.content ul li:nth-child(4) { background-image: url(//freemuban.com/js/421/z4.png); }
.content ul li:nth-child(5) { background-image: url(//freemuban.com/js/421/z5.png); }
</style>
</head>
<body>
<div class="content">
    <h1>百度随心听</h1>
    <p>不用找歌直接听!</p>
    <ul>
        <li>随便听听</li>
        <li>在家</li>
        <li>上网</li>
        <li>轻松</li>
        <li>舒缓</li>
    </ul>
</div>
</body>
</html>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。