css学习笔记5

css学习笔记5

        • 5.CSS列表属性
        • 6.CSS表格属性
          • 1.边框相关属性(其他元素也能用):
          • 2.表格独有属性(只有table标签才能使用):
        • 7.CSS背景属性
        • 8.CSS鼠标属性

5.CSS列表属性

列表相关的属性,可以作用在ulolli元素上。

css属性名功能属性值
list-style-type设置列表符号常用值如下:
none:不显示前面的标识(很常用!)
square:实心方块
disc:圆形
decimal:数字
lower-roman:小写罗马数字
upper-roman:大写罗马数字
lower-alpha:小写字母
upper-alpha:大写字母
list-style-position设置列表符号的位置inside:在li的里面
outside:在li的外边
list-style-image自定义列表符号url(图片地址)
list-style复合属性没有数量、顺序的要求
6.CSS表格属性
1.边框相关属性(其他元素也能用):
css属性名功能属性值
border-width边框宽度CSS中可用的长度值
border-color边框颜色CSS中可用的颜色值
border-style边框风格none:默认值
solid:实线
dashed:虚线
dotted:点线
double:双实线
border边框符合属性没有数量、顺序的要求

注意:

  1. 以上4个边框相关的属性,其他元素也可以用,这是我们第一次遇见它们。
  2. 在后面的盒子模型中,我们会详细讲解边框相关的知识。
2.表格独有属性(只有table标签才能使用):
css属性名功能属性值
table-layout设置列宽度auto:自动,列宽根据内容计算(默认值)。
fixed:固定列宽,平均分。
border-spacing单元格间距CSS中可用的长度值。
生效的前提:单元格边框不能合并。
border-collapse合并单元格边框collapse:合并
separate:不合并
empty-cells隐藏没有内容的单元格show:显示,默认
hide:隐藏
生效的前提:单元格不能合并。
caption-side设置表格标题位置top:上面(默认值)
bottom:在表格下面

以上5个属性,只有表格才能使用,即:table标签。

7.CSS背景属性
css属性名功能属性值
background-color设置背景颜色符合CSS中颜色规范的值。
默认背景颜色是transparent
background-image设置背景图片url(图片的地址)
background-repeat设置背景重复方式repeat:重复,铺满整个元素,默认值。
repeat-x:只在水平方向重复。
repeat-y:只在垂直方向重复。
no-repeat:不重复。
background-position设置背景图位置通过关键字设置位置:
写两个值,用空格隔开
水平:left、center、right
垂直:top、center、bottom
如果只写一个值,另一个方向的值取center


通过长度指定坐标位置:
以元素左上角为坐标原点,设置图片左上角的位置。
两个值,分别是x坐标和y坐标。
只写一个值,会被当做x坐标,y坐标取center
background复合属性没有数量、顺序的要求
8.CSS鼠标属性
css属性名功能属性值
cursor设置鼠标光标的样式pointer:小手
move:移动图片
text:文字选择器
crosshair:十字架
wait:等待
help:帮助

扩展:自定义鼠标图标

/* 自定义鼠标光标 */
cursor:url("./arrow.png"),pointer;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/236265.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企业需要哪些数字化管理系统?

企业需要哪些数字化管理系统? ✅企业引进管理系统肯定是为了帮助整合和管理大量的数据,从而优化业务流程,提高工作效率和生产力。 ❌但是,如果各个系统之间不互通、无法互相关联数据的话,反而会增加工作量和时间成本…

【递归 回溯】LeetCode-226. 翻转二叉树

226. 翻转二叉树。 给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。 示例 1: 输入:root [4,2,7,1,3,6,9] 输出:[4,7,2,9,6,3,1]示例 2: 输入:root [2,1,3] 输出&#xf…

写给测试同学的福利 | 招募

一、简介 寻找空闲时间有能力进行有偿协助测试的人员,协助大厂产品进行测试优化产品工作 二、要求 1.安卓设备2.具备熟练使用手机的能力 三、你可以得到 1.优先体验相关产品新功能、了解产品走向2.任务有偿:每次任务5-30米 四、需要了解事项 1.嫌…

生于越南,“开源改变了我的人生!”

注:本文精选自《新程序员 007:大模型时代的开发者》,欢迎点击订购。 作者 | 王启隆 责编 | 唐小引 出品 | 《新程序员》编辑部 随着人工智能浪潮的席卷,开源不再仅仅是计算机领域的一个话题,而是成为推动技术创新…

让测试效率起飞的8款浏览器兼容性测试工具,你get了吗?

浏览器的兼容性问题,是指不同浏览器使用内核及所支持的 HTML 等网页语言标准不同,用户客户端的环境不同造成的显示效果不能达到理想效果。 对于用户而言,无论使用哪款浏览器,期望看到的效果是正常的统一的。市面上发布的浏览器版本…

JVS低代码和智能BI(自助式数据分析)12.19更新功能说明

低代码更新功能 新增: 1、表单组件:标题、分割线、按钮等非数据组件增加小程序端隐藏设置; 隐藏设置允许开发者对表单组件中的非数据组件进行隐藏,例如,可能只想展示表单的部分内容,或者希望在特定条件下显示或隐藏…

<JavaEE> 网络编程 -- 网络编程和 Socket 套接字

目录 一、网络编程的概念 1)什么是网络编程? 2)网络编程中的基本概念 1> 收发端 2> 请求和响应 3> 客户端和服务端 二、Socket套接字 1)什么是“套接字”? 2)Socket套接字的概念 3&…

高并发场景下的延时双删

基本介绍 "延时双删"是一种在并发编程中使用的技术,用于处理缓存和数据库之间的数据一致性问题。在高并发的场景下,这种方法特别有用。下面是对延时双删的详细介绍: 基本概念: 缓存与数据库的不一致:在并发…

整数比较(比较4个数并从小到大输出)C语言xdoj94

描述: 从键盘输入四个整数,要求按由小到大的顺序输出。 输入说明: 输入四个整数,以空格间隔。 输出说明: 输出排序后的整数,以空格间隔。 输入样例 样例1输入 -99 9 99 -9 输出样例 样例1输出 -99 -9 9 99 …

关于图像像素opencv行与列关系

使用C opencv读取一张图片 如下操作&#xff1a; cv::Mat m4 cv::imread("/home/juchunyu/20231013/globalPlanner/PM.pgm",cv::IMREAD_GRAYSCALE);std::cout << "图像宽为&#xff1a;" << m4.cols << "\t高度为&#xff1a;&quo…

关于“Python”的核心知识点整理大全32

目录 12.6.4 调整飞船的速度 settings.py ship.py alien_invasion.py 12.6.5 限制飞船的活动范围 ship.py 12.6.6 重构 check_events() game_functions.py 12.7 简单回顾 12.7.1 alien_invasion.py 12.7.2 settings.py 12.7.3 game_functions.py 12.7.4 ship.py …

JavaGUI(但期末速成版)之JFrame和JDialog

前言 学到期末发现越来越没时间来细写这些东西了&#xff0c;毕竟蒟蒻博主的发展方向主要需要学的不是Java&#xff0c;但为了期末高分通过&#xff0c;也不得不花一些精力上来&#xff0c;于是有了这样一篇速成GUI&#xff0c;本篇会以十分精简的语言来学习&#xff0c;主打一…

2312d,d重载+=号

原文 我正在试为类重载opOpAssign.已编译代码,但似乎不管用. //已为值实现了二元操作,我需要,-,*,/ auto opOpAssign(string op)(Value rhs) {mixin("return this" ~ op ~ "rhs;"); } auto opOpAssign(string op)(in ElementType rhs) {mixin("retur…

我的一天:追求专业成长与生活平衡

早晨的序幕&#xff1a;奋斗的开始 今天的一天始于清晨的6点47分。实现了昨天的早睡早起的蜕变计划。洗漱完成之后&#xff0c;7点17分出门&#xff0c;7点33分我抵达公司&#xff0c;为新的一天做好准备。7点52分&#xff0c;我开始我的学习之旅。正如我所体会的&#xff0c;“…

CN3302 PFM升压型双节电池充电控制集成电路外置MOS管 双节锂电池充电IC

CN3302是一款工作于2.7V到6.5V的PFM升压型双节鲤电池充电控制集成电路。CN3302采用恒流和准恒压模式(Quasi-CVTM)对电池进行充电管理&#xff0c;内部集成有基准电压源&#xff0c;电感电流检测单元&#xff0c;电池电压检测电路和片外场效应品体管驱动电路等&#xff0c;具有外…

企业网络常用技术-快速生成树RSTP原理与配置

STP协议虽然能够解决环路问题&#xff0c;但是收敛速度慢&#xff0c;影响了用户通信质量。如果STP网络的拓扑结构频繁变化&#xff0c;网络也会频繁失去连通性&#xff0c;从而导致用户通信频繁中断。IEEE于2001年发布的802.1w标准定义了快速生成树协议RSTP&#xff08;Rapid …

微信基于StarRocks的湖仓一体实践

作者&#xff1a;StarRocks Active Contributer、微信 OLAP 内核研发工程师 微信作为国内活跃用户最多的社交软件&#xff0c;其数据平台建设经历了从 Hadoop 到 ClickHouse 亚秒级实时数仓的阶段&#xff0c;但仍旧面临着数据体验割裂、存储冗余的问题。通过 StarRocks 的湖仓…

时钟偏移与时钟抖动

1、时钟偏移 如下图所示&#xff0c;由于布局布线导致&#xff0c;clk到达三个触发器的时间是不一样的。这个就是时钟偏移&#xff0c;对每个触发器而言&#xff0c;不会改变时钟周期。 2、时钟抖动 如下图所示&#xff0c;指芯片的某一个给定点上时钟周期发生暂时性变化&…

【Spring】15 ApplicationContextAware 接口

文章目录 1. 简介2. 作用3. 使用3.1 创建并实现接口3.2 配置 Bean 信息3.3 创建启动类3.4 启动 4. 应用场景总结 Spring 框架提供了许多回调接口&#xff0c;用于在 Bean 的生命周期中执行特定的操作。ApplicationContextAware 接口是其中之一&#xff0c;它允许 Bean 获取对 A…

Collection体系的综合案例--斗地主游戏

需求&#xff1a; 在启动游戏房间的时候&#xff0c;应该提前准备好54张牌&#xff0c;完成洗牌、发牌、牌排序、逻辑。 分析&#xff1a; 当系统启动的同时需要准备好数据的时候&#xff0c;就可以用静态代码块了。 洗牌就是打乱牌的顺序。 定义三个玩家、依次发出51张牌 …