如何把无序列表用css平铺为一行?

html-css017

如何把无序列表用css平铺为一行?,第1张

用css的浮动属性,float:left

比如代码如下:

<ul>

<li>内容</li>

<li>内容</li>

<li>内容</li>

</ul>

在css里面控制

li{float:left}

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

第一种:当然是无序列表中的默认小圆点

第二种:是把小圆点改为小方块显示

第三种:是把小圆点改为空心圆显示

第四种:是把小圆点给去掉,这个应该是比较常用的。

第五种:也是不太常用的,就是把无序列表编程有序列表的方法,前面加数字

1.有序列表:每项之间有先后顺序,默认在每项前面显示1,2,3…

<ol type="A">:在每项前面显示A,B,C…

<ol type="a">:在每项前面显示a,b,c…

<ol type="I">:在每项前面显示I,II,III…

有序列表ol增加了一个属性, <ol start="50">,这样就指定了起始值从50开始

2.无序列表使用一对闭合的标签表示, <ul></ul>。内部的一项使用 <li>内容 </li>来表示。

可以通过ul标签的type属性来修改这个修饰符。

<ul type="disc">显示为一个圆点,是默认值

<ul type="circle">显示为一个空心圆圈

<ul type="square">显示为一个实体正方形

“无序”指的是没用数字或字母等来标记,不是像1,2,3或a,b,c这样的显示,而是前面增加一个圆点来表示。

3.自定义列表

<dl>标签全称是definition list,代表“自定义列表”。 <dl>后面的l代表list,列表的意思。

<dt>标签全称是definition term,代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。 <dt>后面的t代表term,“项目”的意思。

<dd> 标签的全称是definition description,代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。 <dd>后面的d代表description,“描述”的意思。

例子:

使用 list-style-type: none

id:指定标签的唯一标识

class:指定标签的类名,class可以通过给多个元素赋予同一class,批量操作来设置css

块元素都是独立显示,把内容分割成块,是网页的主要结构模块;行内元素,即内联元素,只显示在段落的文字流中,是用来标记内容的小片段

块级元素标签 h,ul,li,ol,p,div

行内元素标签 a,em,q, img,span

页面分:头部、内容、底部,头部有三个导航栏,内容有侧边栏和中心区块,三个区块结构里面共用了一个class样式。

语义化:使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。

1.<form>标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。

<form name="myForm" action="/test/6.php" method="post">

name:表单提交时的名称;

action:提交到的地址,如果不写action,信息就会提交到当前页面;

method:提交方式(get和post),如果不写,默认的是get

2.常用标签:

复选框当中,可以把name值设置成一个数组,例:

<button>提交 </button> ——普通按钮,button默认是不提交任何数据,需要绑定事件才可以用提交数据

<a class="btn" href="#">提交 </a> ——链接

<input type="submit" value="提交"> ——提交按钮,提交信息到服务器

设置name值实现分组,如果name值相同,则表示它们是一组,可以实现单选。

placeholder 属性提供可描述输入字段预期值的提示信息。

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。

<input type="hidden" name="identity" value="123">