CSS制作一个商品分类列表，边框是圆角弧度

来源：互联网发布：软件系统关键技术指标编辑：程序博客网时间：2024/05/01 21:50

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        ul{            list-style: none;            width: 200px;            height: 300px;            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: 20px;            border-bottom: 2px solid #cccccc;/*在底部有一条2px的实线*/        }        #first{            margin-top: 15px;            border-bottom: 2px solid orange;/*在底部有一条2px的实线*/            padding-bottom: 10px;            color: orange;        }    </style>    <title>商品分类</title></head><body><ul>    <li id="first">商品分类</li>    <li>冰箱</li>    <li>洗衣机</li>    <li>空调</li>    <li>电脑</li></ul></body></html>

运行后的为：

阅读全文

0 0