首页 > 软件开发 > CSS >

div+css前边带图片的列表制作

来源:互联网 2023-03-16 19:17:28 313

div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

方法/步骤

  • 1

    1.预览效果图:O5G办公区 - 实用经验教程分享!

    div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

  • 2

    2.添加如下代码:O5G办公区 - 实用经验教程分享!

    div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

  • 3

    3. 预览效果如下:O5G办公区 - 实用经验教程分享!

    div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

  • 4

    4.这个是Ul自带的默认样式,而我们很少会这么用,首先去除Ul默认样式O5G办公区 - 实用经验教程分享!

    div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

  • 5

    5. 预览效果:O5G办公区 - 实用经验教程分享!

    div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

  • 6

    6.准备一张 16*16的图片,添加如下代码:O5G办公区 - 实用经验教程分享!

    div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

  • 7

    7. 预览效果图如下:O5G办公区 - 实用经验教程分享!

    div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

  • 8

    8.我们要把图片不重复O5G办公区 - 实用经验教程分享!

    div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

  • 8该信息未经授权抓取自百度经验
  • 9

    9. 预览效果:O5G办公区 - 实用经验教程分享!

    div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

  • 10

    10.发现文字和图片重复了,那我们要把文字向右移动一点,正好移动图片的宽度16px即可,(这里为什么要用padding?因为图片的位置固定了,是li的背景图片,而文字位于li当中,相当于扩充li的内边距)O5G办公区 - 实用经验教程分享!

    div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

  • 11

    11. 最终预览效果:O5G办公区 - 实用经验教程分享!

    div css前边带图片的列表制作O5G办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!O5G办公区 - 实用经验教程分享!


    标签: CSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码