如何使用CSS3属性控制无序列表文字显示与背景

 时间:2024-10-14 19:47:05

1、第一步,双击打开HBuilderX工具,新建Web项目并创建静态页面,如下图所示:

如何使用CSS3属性控制无序列表文字显示与背景

2、第二步,在<body></body>标签元素内,插入一个div标签和无序列表,如下图所示:

如何使用CSS3属性控制无序列表文字显示与背景

3、第三步,利用元素选择器设置无序列表每项前面的标志,然后使用CSS3伪类选择器设置子项文字内容划线,如下图所示:

如何使用CSS3属性控制无序列表文字显示与背景

4、第四步,保存代码并打开浏览器预览无序列表展示效果,可以发现默认的圆点改为方块,文字内容出现划线,如下图所示:

如何使用CSS3属性控制无序列表文字显示与背景

5、第五步,最后再使用伪类选择器控制最后两项的样式,倒数第一个使用nth-last-child,如下图所示:

如何使用CSS3属性控制无序列表文字显示与背景

6、第六步,再次保存代码并预览效果,返回编辑器修改代码,添加背景渐变和椭圆角效果,如下图所示:

如何使用CSS3属性控制无序列表文字显示与背景
  • python中运算符有哪些?
  • Eclipse怎么设置不要提示保存?
  • 文明与征服如何探索物资
  • visual studio2019如何查找标签
  • 怎样才能延迟开学
  • 热门搜索
    皮肌炎最佳治疗方法 宝宝红屁屁怎么办 胸部胀痛是怎么回事 小儿尿床的治疗方法 发出的邮件怎么撤回 带字图片大全 一岁宝宝发烧怎么办 蔬菜大全 治疗喉咙痛最快方法 陈述句改反问句的方法