css中div列表样式

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中的div列表样式是在网页设计中常用的一种样式,可以通过CSS的样式表来控制div元素的样式。下面让我们来看一下如何实现一些常见的div列表样式:/* 去掉列表默认的样式 */ ul{ list

CSS中的div列表样式是在网页设计中常用的一种样式,可以通过CSS的样式表来控制div元素的样式。下面让我们来看一下如何实现一些常见的div列表样式:

/* 去掉列表默认的样式 */
ul{
   list-style:none;
   padding:0;
   margin:0;
}

/* 实现带圆点的列表样式 */
ul li{
   padding-left:10px;
   background:url('dot.png') no-repeat left center;
}

/* 实现水平排列的列表 */
ul li{
   float:left;
   margin-right:20px;
}

/* 实现垂直排列的列表 */
ul li{
   display:block;
   margin-bottom:10px;
}

/* 实现带背景色的列表 */
ul li{
   background-color:#f2f2f2;
   padding:10px;
   margin-bottom:10px;
}

/* 实现带边框的列表 */
ul li{
   border:1px solid #ccc;
   padding:10px;
   margin-bottom:10px;
} 

通过以上代码实现的样式,可以让列表更加美观,更加符合网页设计的需求。当然,还有很多其他的列表样式,可以根据实际需求进行调整和修改。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中div列表样式

粉丝

0

关注

0

收藏

0

已有0次打赏