Web网页开发-CSS高级技巧1-笔记

1.display:设置元素隐藏和元素属性转换成块级元素     
(1)元素隐藏: 本质是让元素完全消失,转换成没有,位置不再保留 
        display: none;
        元素显示:display:block

  visibility:设置或检索元素是否可见
(2)元素隐藏: 本质上是改变元素的可见性: 隐藏,位置仍然保留
         visibility:hidden;
         元素可见:visibility:visible;

2.对溢出内容的处理方式
hidden表示让溢出的内容隐藏      visible表示可见,不对溢出内容进行处理   
scroll会让盒子出现滚动条            auto:如果盒子内容溢出,自动出现滚动条

3.光标样式
光标cursor
default:箭头形状
text:文本类型,大写I
pointer:小手形状
move:船锚形状,移动
not-allowed:禁止形状

4.文本区域textarea
resize:是否能够进行拖拽,改变尺寸。
none:不能改变尺寸
both:宽高都可以改变
horizontal:只能水平拖拽
vertical:只能垂直拖拽

5.
字符间距:表示字母或汉字之间的距离
letter-spacing
单词间距:专用于英文,用空格区分单词
word-spacing

6.图片的基线与底线之间有空白间隙
(1) 改变图片的对齐方式
(2) 改变图片的显示模式,转换成块级元素

7.溢出文字省略号显示  

前提是先有宽高
(1) 让文字强制一行显示,不允许自动换行 
white-space: nowrap;
(2) 超出盒子的内容隐藏 
overflow: hidden;
(3) 让隐藏的内容转成省略号
text-overflow: ellipsis;

8.transparent 透明

9.CSS精灵

CSS精灵技术:减少对服务器的请求次数,提高页面的加载速度。

当网页元素需要用到某个图标时,我们需要使用CSS的

  • background-image 背景图片

  • background-repeat 背景平铺

  • background-position 进行背景图定位

精灵图核心:
1.精灵技术主要是针对背景图片的使用,就是把很多小背景图片放在一张大图片种,减少服务器请求(如图片本身就很大,就不建议整合在一起了)。
2.精灵图的使用,最关键的是利用background-position 属性精确地定位到所需小图。移动的距离就是这个目标图片的x和y坐标。
3.当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。

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

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

相关文章

年度最整洁的海盗3.0版本

在修改海盗3.0客户端源码的时候,一直都存在这样的一个问题: 客户端在某些特定的情况下,会报内存错误导致程序崩溃。 经过调试,发现是那个MindPower3D的dll,在跳转地图等情况下卸载清理内存的时候,会偶发出…

进程的介绍及相关命令

首先,先了解一下计算机五大性能的命令 cpu top w 内存 top free 硬盘剩余 df 硬盘读写性能 iostat 网络带宽 iftop 一,进程与程序 1,什么是程序 : 硬盘上躺着,执行特点任务的一串代码 2&am…

【c++面试集】年度整理

系列文章目录 文章目录 系列文章目录前言一、C基础(必备)三目运算符表达式原码、反码和补码常量定义变量定义变量持久性lambda 表达式默认捕获变量const、virtual、static和noexcept关键字的用法自增自减在while中使用模板使用类和结构体区别标准库strcp…

Transformer从菜鸟到新手(三)

引言 这是Transformer的第三篇文章,上篇文章中我们了解了多头注意力和位置编码,本文我们继续了解Transformer中剩下的其他组件。 层归一化 层归一化想要解决一个问题,这个问题在Batch Normalization的论文中有详细的描述,即深层…

dll文件是什么,如何解决dll文件丢失

在使用电脑时是否遇到过关于dll文件丢失的问题,遇到这样的问题你是否会不知所措,其实dll文件丢失的解决伴有很多,今天这篇文章就将和大家聊聊dll文件是什么,以及如何解决dll文件丢失的问题。 一.Dll文件的作用 代码重用和模块化…

大创项目推荐 深度学习图像修复算法 - opencv python 机器视觉

文章目录 0 前言2 什么是图像内容填充修复3 原理分析3.1 第一步:将图像理解为一个概率分布的样本3.2 补全图像 3.3 快速生成假图像3.4 生成对抗网络(Generative Adversarial Net, GAN) 的架构3.5 使用G(z)生成伪图像 4 在Tensorflow上构建DCGANs最后 0 前言 &#…

期货日数据维护与使用_概述

目录 【技术选择】 【项目架构】 sqlite3 数据库设计: csv数据: 指标: 【技术选择】 数据存储: 1 合约日数据、主力合约数据使用csv文件存储 2 其他小量数据使用sqlite3 界面GUI:PyQt5 图形:pyqtgra…

远程监控云平台,让你的数据无处可藏!

远程监控云平台,让你的数据无处可藏! 云平台远程监控是一种通过云平台实现对设备的远程监控和管理的技术。通过将设备连接到云平台,可以实时获取设备的数据、监控设备的状态,并进行远程控制和管理。 在物联网领域,云平…

国际光伏展

国际光伏展是一个专门展示和推广光伏技术和产品的国际性展览会。光伏技术是一种利用光能转化为电能的技术,被广泛应用于太阳能发电系统和其他可再生能源系统中。国际光伏展汇集了来自全球的光伏企业、研究机构和专业人士,展示最新的光伏产品、技术和解决…

【Nodejs】基于express|ejs的用户博客管理系统前后端代码

目录 package.json 后端: server.js router/admin/index.js router/admin/login.js router/admin/blog.js router/admin/users.js router/web/index.js 前端: views/admin/common/top.ejs views/admin/index.ejs views/admin/login.ejs vie…

[蓝桥杯学习]​树上差分

差分 前缀和 sum_i sum_i-1 a_i 差分 diff_i a_i - a_i-1 差分的好处 点的差分 问题引入 解决问题 要用到差分的思想,每次从叶子向上的回溯,让父结点子结点的cnt值,但是仅仅这样,还不行 回溯的过程中,LCA被加…

03- OpenCV:矩阵的掩膜操作

目录 1、矩阵的掩膜操作 简介 2、获取图像像素指针 3、掩膜操作解释 4、代码演示 1、矩阵的掩膜操作 简介 在OpenCV中,矩阵的掩膜操作是一种通过使用一个二进制掩膜来选择性地修改或提取图像或矩阵的特定区域的方法。 掩膜是一个与原始图像或矩阵具有相同大小的…

Moment.js 使用

Moment.js的简介 Moment.js是一个轻量级的JavaScript时间库,以前我们转化时间,都会进行很复杂的操作,而Moment.js的出现,简化了我们开发中对时间的处理,提高了开发效率。日常开发中,通常会对时间进行下面这…

如何使用 NFTScan NFT API 在 PlatON 网络上开发 Web3 应用

PlatON 是由万向区块链和矩阵元主导开发的面向下一代的全球计算架构,创新性的采用元计算框架 Monad 和基于 Reload 覆盖网络的同构多链架构,其愿景是成为全球首个提供完备隐私保护能力的运营服务网络。它提供计算、存储、通讯服务,并提供算力…

使用docker安装mysql 8.0

打开命令行,运行 ocker pull mysql:8.0.21 下载成功后,可以看到 进入cmd,输入 docker run -d --name mysql -p 3306:3306 -v /root/mysql/data:/var/lib/mysql -v /root/mysql/config:/etc/mysql/conf.d -e MYSQL_ROOT_PASSWORDabc12345…

汽车变速箱日常巡检VR虚拟教学课件真实还原维修场景

在汽车行业中,VR技术的应用也日益广泛,尤其是在汽车维修培训领域。VR公司深圳华锐视点采用UE引擎进行渲染开发,制作了一款VR电动汽车故障检测模拟仿真培训系统,以逼真的维修环境,真实的维修过程及沉浸式体验&#xff0…

LeetCode(38)外观数列⭐⭐

「外观数列」是一个整数序列,从数字 1 开始,序列中的每一项都是对前一项的描述。 你可以将其视作是由递归公式定义的数字字符串序列: countAndSay(1) "1"countAndSay(n) 是对 countAndSay(n-1) 的描述,然后转换成另一…

unity图像处理简单流程

在渲染管线中,后处理通常位于渲染过程的末尾,即在所有的渲染通道(例如顶点着色器、片段着色器等)完成之后执行后处理操作。后处理操作是在已经渲染的图像上进行的,它不会影响到场景的几何形状或光照等因素。一般来说&a…

JavaScript高级程序设计读书记录(四):基本引用类型Date,RegExp,原始值包装类型,Global对象 eval(),Math

引用值(或者对象)是某个特定引用类型的实例。在 ECMAScript 中,引用类型是把数据和功能组织到一起的结构,经常被人错误地称作“类”。虽然从技术上讲 JavaScript 是一门面向对象语言,但ECMAScript 缺少传统的面向对象编…

MySQL基础笔记(5)DCL数据控制语句

数据控制语句,用来管理数据库用户、控制数据库的访问权限~ 目录 一.用户管理 1.查询用户 2.创建用户 3.修改用户密码 4.删除用户 二.权限管理 1.查询权限 2.授予权限 3.撤销权限 一.用户管理 1.查询用户 use MySQL; select * from user; 2.创建用户 crea…