如何利用HTML5和CSS3设置间隔缩进图片列表

 时间:2024-10-27 07:26:19

1、第一步,双击打开HBuilder开发工具,创建Web项目,在指定的目录新建静态页面,并修改title显示的内容,如下图所示:

如何利用HTML5和CSS3设置间隔缩进图片列表

2、第二步,在body元素内插入div元素和无序列表,这里选取计算机语言作为无序列表项内容,如下图所示:

如何利用HTML5和CSS3设置间隔缩进图片列表

3、第三步,预览该静态页面,在浏览器中查看页面效果,发现无序列表显示效果,如下图所示:

如何利用HTML5和CSS3设置间隔缩进图片列表

4、第四步,在style标签元素内设计ul和li的样式属性.ali{ list-style-position: inside; } .bli{ list-style-position: outside; }如下图所示:

如何利用HTML5和CSS3设置间隔缩进图片列表

5、第五步,再次设计ul li奇偶项样式属性ul li:nth-child(even){ list-style-type: none; list-style-image: url(../img/five.png); font-size: 18px; } ul li:nth-child(odd){ list-style-type: none; list-style-image: url(../img/up.png); font-size: 18px; }如下图所示:

如何利用HTML5和CSS3设置间隔缩进图片列表

6、第六步,在ul li内添加样式class,间隔设置无序列表样式,如下图所示:

如何利用HTML5和CSS3设置间隔缩进图片列表
  • 游览顺序图怎么设置
  • Visual Studio Code怎么设置模式启动
  • css设置字体间距
  • 如何用HTML5实现图片拖拽功能
  • 基因频率和基因型频率有什么区别
  • 热门搜索
    沙坡头旅游 无线局域网怎么设置 新锅使用前怎么处理 北京旅游公司 痔疮该怎么治疗 租房协议书怎么写 最终幻想8攻略 旅游体验师 当然可以的英文 肉粽怎么做