怎样更改css中list-style 里面的图片的大小?

html-css018

怎样更改css中list-style 里面的图片的大小?,第1张

这个属性是列表中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>

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

li:{list-style-type:circle}

也可以用image代替type位置,链接你喜欢的图片

circle:是空心圆点。square:方形

disc:默认实心圆。

不知道你说的是不是这个意思

所谓的响应式,都是通过media这个属性来实现的。

针对每个屏幕尺寸,在页面结构不变的前提下,重新写了一遍样式覆盖原有的而已。

比如下面这个,就是在宽度小于360px的屏幕里给每个DIV加红线:

@media screen and (max-width:360px){

div{border:1px solid red}

}

现在手机屏幕比显示器还大,响应式已经不那么需要了:)