如何使用HTML5+CSS3设置无序列表无标点横向排列

2024-04-11 19:41:05

在CSS3属性中，有属性list-style，可以用来设置无序列表每项前显示图标。无序列表子项前显示小黑圆点，有时根据需求需要去掉这个点；无序列表默认是垂直展示每项，如果做成菜单，需要横向排列。下面利用一个实例讲述属性list-style控制无序列表样式，操作如下：

操作方法

01

第一步，打开HBuilder后新建Web项目，在指定目录pages新建静态页面ul.html，并引入Bootstrap相关的样式文件，如下图所示：
02

第二步，在<body></body>标签元素内插入一个无序列表，以星期作为数据源；利用Bootstrap设置div布局样式，如下图所示：
03

第三步，保存代码并预览页面，可以看到无序列表以默认形式展示出来，如下图所示：
04

第四步，给ul添加一个class属性，利用类选择器设置无序列表 list-style:none; float:left; 如下图所示：
05

第五步，再次保存代码并在浏览器中预览页面，可以看到无序列表前的小圆点已去掉，纵向排列变为横向排列，如下图所示：
06

第六步，利用CSS3获取元素子节点的选择器分别设置无序列表子项字体颜色，如下图所示：

赞 (0)

如何使用HTML5+CSS3属性word-break设置文字换行

在开发系统的过程中,会发现有时界面上一行显示的内容过多,超出了范围占用其他地方,导致页面错乱.在CSS3新加的属性中,有几个属性可以用来控制行内文字换行或者显示省略号.其中,word-break属性可 ...
如何在Linux下设置访问控制列表(ACL)来控制用户的权限

Linux下的访问控制列表（ACL）主要用来控制用户的权限，可以做到不同用户对同一文件有不同的权限，那么具体要如何操作呢？下面小编就教你如何在Linux下设置访问控制列表（ACL）来控制用户的权限。 ...
献给网页设计师的HTML5/CSS3/JS便捷工具

是时候为网页设计师的来一组便捷的辅助工具了。日新月异的网页技术革新催生了大量的设计与开发工具，HTML5/CSS3几乎成了设网页设计师的必修课，而强大的JS也为网页提供了更多的可能性。尤其是HTML5 ...
手机版美图秀秀App中怎么设置拍摄照片无水印

美图秀秀是我们爱用的一款p图软件,它功能强大,操作简便,有的朋友不知道怎么设置拍摄照片无水印,今天,小编为大家分享解决问题的方法.具体如下:1. 第一步,请大家在自己的手机中找到[美图秀秀]图标,点击 ...
怎么将手机UC浏览器内的多窗口视图设置为列表视图

当我们在使用手机的时候,可以下载uc浏览器来浏览网页,那么如何将其中的多窗口视图模式设置为列表视图呢?接下来就由小编来告诉大家.具体如下:1. 第一步,打开手机并在桌面找到uc浏览器图标,点击进入.2 ...
如何给电脑的背景设置无序播放

今天给大家介绍一下如何给电脑的背景设置无序播放的具体操作步骤.1. 打开电脑,进入电脑,在任务栏的空白处,右键,在打开的菜单中,选择任务栏设置选项2. 在打开的页面,点击左侧上方的主页选项3. 在打开 ...
怎么在Word文档打印时设置左右两侧无白边

我们在编辑好Word文档进行打印的时候,默认都会留有一些边缘空白不打印,如果想要设置左右页面没有白边显示,只要对文档的页边距进行设置一下即可,今天就跟大家介绍一下怎么在Word文档打印时设置左右两侧无 ...
如何将米家App显示模式设置为列表

米家是小米旗下的智能家具管理软件,有些用户想知道如何将软件显示模式设置为列表,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,找到并点击[米家]图标.2. 第二步 ...
如何给华为手机TalkBack设置以列表形式显示上下文菜单

今天给大家介绍一下如何给华为手机TalkBack设置以列表形式显示上下文菜单的具体操作步骤.1. 首先解锁手机,找到桌面上的设置图标,打开2. 在打开的设置页面,找到下方的辅助功能选项,点击3. 进入 ...