CSS10：列表样式练习

一个优雅的搬砖人

已于 2022-02-11 09:39:25 修改

阅读量392

点赞数 1

分类专栏： # CSS 文章标签： elementui javascript webview

于 2022-02-11 09:39:03 首次发布

本文链接：https://blog.csdn.net/weixin_48306950/article/details/122873806

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

列表样式 list-style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul>
    <li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
    <li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
    <li><a href="#">电脑</a> <a href="#">办公</a></li>
    <li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
    <li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
    <li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
    <li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
    <li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</body>
</html>

line-style: none; 去掉原点

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

line-style: circle; 空心圆

ul li {
    height: 30px;
    list-style: circle;
    text-indent: 1em;
}

line-style: decimal; 数字

ul li {
    height: 30px;
    list-style: decimal;
    text-indent: 1em;
}

line-style: square; 正方形

ul li {
    height: 30px;
    list-style: square;
    text-indent: 1em;
}

一个优雅的搬砖人

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS10：列表样式练习

列表样式 list-style<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"></head><body><ul> <li>&l
复制链接

扫一扫

专栏目录