css练习:商品分类

最新推荐文章于 2023-04-13 11:28:47 发布

ztt0918

最新推荐文章于 2023-04-13 11:28:47 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： css练习商品分类文章标签： css练习商品分类

本文链接：https://blog.youkuaiyun.com/ztt0918/article/details/70176098

css练习商品分类专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        ul{
            list-style: none;
            width: 180px;
            height: 250px;
            border: 1px solid orange;
            padding:0;
            margin: 0;
            text-align: center;
            border-radius: 20px;
            padding-left: 10px;
            padding-right: 10px;
        }
        li{
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom: 2px solid #cccccc;

        }
        #first{
            margin-top: 15px;
            border-bottom: 2px solid orange;
            padding-bottom: 10px;
            color: orange;
        }
        #last{
            border-bottom: none;
        }
    </style>
    <title>商品分类</title>
</head>
<body>
<ul>
    <li id="first">商品分类</li>
    <li>分类1</li>
    <li>分类2</li>
    <li>分类3</li>
    <li id="last">分类4</li>
</ul>


</body>
</html>