小编今天的分享主题是显示属性、列表属性、定位属性;

首先,我们先来了解一下关于显示属性

显示属性,它表示了一个框或者盒的表现,具有2层含义,分别是显示方式和显示效果;

1.显示方式,即display属性,具体是指一个框的表示形式,它自己固定的取值候选:

a)none:表示让这个元素不显示,隐藏起来,同时这个元素是不占据这个文档的空间的。

b)block:表示让这个元素以块级元素的形式显示,在它后面的元素是会另外起一行,这个时候的元素是可以自己定义它的高度和宽度的。如果你想设置一个行内元素的高和宽,或者想让一个隐藏了的元素显示的话,这个方式就是非常好的。

c)inline:表示让这个元素以行内元素的形式显示,这个时候后面的元素会紧跟着前面的元素,并列显示,同事也不能设置高度和宽度。

d)inline-block:表示让这个元素以行内块的形式显示,其实就是一个行内元素,不过这个行内元素可以设置高度和宽度了。如果你不想让这个元素的后面元素另外起一行又想改变这个元素的高度和宽度,那这个方法是极好的。

以上4个候选取值,就是display的取值详解,语法规范就是display:none/block/inline/inline-block,具体的按照实实际开发需求。练习的时候,可以每个都试一试,看看它们分别是什么效果。

2.显示效果,就是元素显示了之后,再设置它的一些效果,先简单的介绍4个效果:

a)visibility属性,即表示这个元素的显示与否,取值有visible(显示的,也是默认值)、hidden(不显示),这个属性看似和上诉的显示方式挺像的,它们有一个非常明显的区别就是,display为none时,它是不占据空间的;而visibility为hidden时,它虽然是看不见的小写罗马数字,但是它会占据页面空间,可能会影响文档的排版问题,这需要特别的注意。

b)opacity属性,即表示这个元素的透明度,取值范围就是0至1,其中0表示完全透明,1表示完全不透明,记住取值越大,越不透明。

c)vertical-align属性,即表示这个元素的垂直对齐小写罗马数字,取值可以有:top/middle/bottom baseline;基线对齐

d)cursor属性即光标,表示当你的鼠标在经过这个元素时候,鼠标显示的样式;取值有:pointer(手的形状)、default(默认)、crosshair(显示为“+”)、text(显示为“I”)、wait(显示为 等待)、help(显示为“?”)

其次,我们了解一下列表属性

列表,就是讲这部分的内容按照一定的顺序排列,可以是横向的也可以是纵向的,她有列表样式属性、列表项图像属性、列表项位置、列表综合属性。

1.列表样式即list-style-type,分为有序列表、无序列表,有序的列表是按照数值排序、罗马数字排序,无序列表就是列表项为实心圆、空心圆、实心矩形。

无序列表的取值为:none(无标记)、disc(实心圆)、circle(空心圆)、square(实心矩形)

有序列表的取值为:none(无标记)、decimal(数字)、lower-roman(小写的罗马数字)、upper-roman(大写的罗马数字)

2.列表项图像即list-style-image,表示列表项图像不想取值为数字或者实心圆等时,可以自定义一个图像;语法规范:list-style-image:url(文件路径)

3.列表项位置即list-style-position,就是li前面标识的位置,取值有:outside(标识在li外)、inside(标识在li内)

4.列表的总和属性即list-style,语法规范:list-style:type url position 实例list-style:circle url(xxxx.jpg) inside

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源