专栏首页老码农的一亩三分地IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4

IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/ITXDL123/article/details/102830838

6 鼠标光标属性

在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”。但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同的效果。CSS可以通过cursor属性实现鼠标形状的改变,其属性可以是默认的鼠标形状default、小手形状hand、指示某对象可被移动move、交叉十字crosshair、文本选择器号text、Windows的沙漏形状wait、带有问号的鼠标help及各个方向的箭头属性值。例句如下:

p {cursor: pointer;} /* 当鼠标放在此项修饰的段落元素上时,出现“小手”形状鼠标 */

7 列表属性

默认的列表样式比较简单,但可以使用CSS中有关的属性丰富列表的外观。例如可以在文本行前面加实心圆、空心圆、实心方块,还可以在有序列表中使用阿拉伯数字、大写或小写的罗马数字、大写或小写的英文字母,还可以定制列表符号。其属性如表1所示。

表1 CSS中常见的控制列表的属性

虽然可以使用list-style-type属性设定丰富的列表符号类型,而且也可以使用list-style-image属性添加自定义的列表符号,但是这些方法对符号的位置控制能力不强。比较常用的方法是关闭列表项自身的符号,然后使用定制的符号图像作为背景添加在列表元素上。这样就可以使用CSS的背景图像定位属性,精确地控制自定义符号的对齐方式。

不同的浏览器对列表样式的解析也不一样,IE和Opera浏览器使用左外空白边距控制列表的缩进,而Firefox和Safari浏览器则使用左内填充空白边距控制列表的缩进。因此,在使用列表样式时,首先要将列表的左外空白边距(margin)和左内填充空白边距(padding)设置为0,去掉所有边距的缩进。完成这些工作的例句代码如下所示:

接下来就可以添加自定义的符号了。首先在列表项左边用空白填充或使用文本缩进,为符号图像留出所需的空间,然后将自定义的符号图像作为背景图像应用于列表项中。如果一个列表项中的内容跨越多行,不希望将符号图像放置在第一行的位置,就可以将垂直位置设置为center或50%,让符号图像垂直居中。例句如下所示:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Qt编写自定义控件70-扁平化flatui

    对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦...

    feiyangqingyun
  • 11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)

    这篇文章我会介绍 11 在开发过程中经常遇到的 CSS 相关知识点,以及 11 个有趣亦实用的 JavaScript 特性。

    用户1462769
  • redis的安装与五种结构的使用

      这次我们来说说我们的redis,在我们的redis的认知里,最熟悉的就是用redis作为缓存使用,还有我们的分布式session,其实还有很多redis的使...

    小菜的不能再菜
  • 听说你碰到这种反爬就歇菜了?手把手教你秒杀它!

    上面的这段话对于没做过前端开发的朋友而言,看着可能会有点难懂,没关系,我们用个例子简单地演示一下。

    咸鱼学Python
  • ECharts绘图解决方案——流动关系图(桑基图)

    | 导语 基于实际业务场景使用ECharts的经验,总结一些通用的解决方案。 应用场景 用流动关系图来映射品牌之间的有效换机数量,从而帮助运营对手机品牌的行...

    腾讯大讲堂
  • Web高性能动画及渲染原理(1)CSS动画和JS动画

    Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区别并不是由语言来决定的,而是由两者的特点和适用场景来判断的。CSS动画简洁高效,提升交互体...

    大史不说话
  • Selenium自动化测试-4.By定位及如何确定元素唯一

    (1)有时候我们不知道用哪种方法来定位元素,By定位可以根据实际场景设定定位策略。

    ITester软件测试小栈
  • Selenium自动化测试-3.元素定位(3)

    css定位是通过css选择器进行定位,我们需要了解css选择器的一些知识才能进行css定位,选择器基本语法如下:

    ITester软件测试小栈
  • HTTP(二) 缓存

    重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间。借助 HTTP 缓存,Web 站点...

    用户2202688
  • Python爬虫进阶必备 | X薯中文网加密分析

    经过查看请求,并没有请求的加密参数,但是响应的内容却不正常,许多文字在响应中都变成了 span 标签【图1-2】

    咸鱼学Python

扫码关注云+社区

领取腾讯云代金券