怎么用css对列表项前面的图片的大小进行控制

html-css023

怎么用css对列表项前面的图片的大小进行控制,第1张

这个是要看你如何加载列表项目图片了。如果你是在列表的CSS定义里用背景图片往里加载列表项目图片的话，那只能你自己在其他的平面软件里改好图片尺寸后再定义后加载进去了，不能用CSS直接修改；如果你是在结构标签里的每个列表前面把图片用<img>的形式插入，那么你可以在CSS里统一定义display:black

之后就可以定义height和width了。不过比较麻烦。

1、首先打开vscode编辑器，新建一个html文件，定义一个两行两列的表格，在浏览器打开的效果。

2、然后给表格添加边框，这里给table标签和td标签都设置边框，不过两个标签的边框颜色值不一样。

3、最后可以用width属性给表格设置宽度，用height属性设置单元格的高度，设置好后可以在浏览器看到效果。

这个属性是列表中li的样式，对于其前面的项目符号的大小是根据其内容一般是字体的大小来匹配的，详细解释如下：

1、实例一：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<ul>

<li>百度知道</li>

<li>百度知道</li>

<li>百度知道</li>

<li>百度知道</li>

<li>百度知道</li>

<li>百度知道</li>

</ul>

</body>

</html>

因为此时字体是默认大小，其项目符号和字体匹配大小，其显示结果如下图：

实例二：

此时我们更改字体大小，其代码和显示效果如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

li{

font-size: 30px

}

</style>

</head>

<body>

<ul>

<li>百度知道</li>

<li>百度知道</li>

<li>百度知道</li>

<li>百度知道</li>

<li>百度知道</li>

<li>百度知道</li>

</ul>

</body>

</html>

效果如下，项目符号随着字体的增大而增大，如下图：