CSS3第5章上机练习5(问题解决版)

版权声明:@桔橘酱 https://blog.csdn.net/weixin_44100210/article/details/89252635

ps:关于上次的文章,也就是CSS第5章上机练习5(畅销书排名榜页面),"榜"字的疑问,发现了一个致命点的问题 : 审题不清 !

列表前的图标使用背景图片的方式实现,使用结构伪类选择器选择每个列表项并设置背景图片.

背景图片设置的属性是background-image,而不是list-style-image,

请注意,这次是在一个div里镶嵌两个div,在第2个内部的div,加入了margin(外边框),设置为0像素,使得内部两个div之间没有间隙
并且,还加入了padding(内边框),而padding-top:13px表示的是所在的div内部上方空出13px的地方.这些将在第6章盒子模型里有讲.

所以,正确并"完美"的代码如下:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
ps:附上最后的完成效果图:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44100210/article/details/89252635
今日推荐