详细研究CSS列表

最新推荐文章于 2024-09-14 08:09:14 发布

bcbobo21cn

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量513

点赞数

分类专栏：原创教程 .Net 文章标签： css css列表 css样式

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/48225657

版权

.Net 同时被 2 个专栏收录

382 篇文章 14 订阅

订阅专栏

原创教程

190 篇文章 6 订阅

订阅专栏

先看图图；

码码：

<html>
<head>
<style type="text/css">
ul 
{
margin:50px;
background: green;
width:500px;
}
</style>
</head>

<body>
<ul>
<li style="list-style-image: url('img/tuxiao1.png');padding:10px 150px 10px;background: red; ">偶是小兔兔</li>
<li style="list-style-image: url('img/maoxiao1.png');padding:10px 150px 10px;background: blue;">偶是小猫咪</li>
<li style="list-style-image: url('img/gouxiao1.png');padding:10px 150px 10px;background: red; ">偶是小狗狗</li>
</ul>
</body>

</html>

在没有定义ul背景和宽度，及各个li的各自风格时显示如图1；

定义了背景之后显示如图2；如果不定义ul宽度，其默认宽度占据整个浏览器窗口；

定义了背景和宽度之后如图3；

再为三个li单独定义样式：

内边距：上和下10px; 右和左150px；

由图可见li的内边距定义对li的背景在ul的背景中的位置无影响；只是影响了li中文字的位置；