您的位置：首页 > Web前端 > CSS

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

2017-05-26 21:47 561 查看

<!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>

运行后的为：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航