【CSS3】css开篇基础(5)

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋,这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣,记得关注我👀👀以便不错过每一篇精彩。

当然,如果在阅读中发现任何问题或疑问,我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力,一起进步!

加油,一起CHIN UP!💪💪

🔗个人主页:E绵绵的博客
📚所属专栏:

1. JAVA知识点专栏

        深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

        实战演练,巩固JAVA编程技能

3.c语言知识点专栏

        揭示c语言的底层逻辑与高级特性

4.c语言题目练习

        挑战自我,提升c语言编程能力

5.Mysql数据库专栏

        了解Mysql知识点,提升数据库管理能力

6.html5知识点专栏

        学习前端知识,更好的运用它

7. css3知识点专栏

        在学习html5的基础上更加熟练运用前端

8.JavaScript专栏

        在学习html5和css3的基础上使我们的前端使用更高级

📘 持续更新中,敬请期待❤️❤️

2.精灵图Sprites

为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术

核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了

1.精灵技术主要针对于背景图片的使用,就是把多个小背景图片整合到一张大图片中

2.该大图当背景后是以左上角对齐的,所以要让其他小背景图片插入进去就要移动大背景图

3.移动大背景图片的位置,此时可以使用 background-position。

4.一般情况下都是往上往左移动,所以数值是负值,往左移动,所以是负值。

5.使用精灵图的时候需要精确测量,每个小背景图片的大小和位置,根据位置然后移动相应距离。

精灵图的优点很多,但是缺点也很明显

1.图片文件还是比较大的

2.图片本身放大和缩小会失真

3.一旦图片制作完毕想要更换非常复杂

此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont

3.字体图标iconfont

字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标。展示的是图标,本质属于字体。

优点:

轻量级:一个图标字体比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少了服务器的请求

灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影,透明效果,旋转等

兼容性:几乎支持所有的浏览器

步骤:

字体图标的下载

字体图标的引入(引入到我们html页面中)

字体图标的追加(以后添加新的小图标)

3.1字体图标的下载


icomoon字库:外网,不需要登录即可下载 http://icomoon.io

1.点击 IcoMoon App

2.选择需要的图标

3.点击Generate Font

4.点击下载

阿里 iconfont字库:免费,但是需要登录iconfont-阿里巴巴矢量图标库

3.2字体图标的引入


 生成之后点击download

1.把下载包里面的 fonts 文件夹放入页面根目录下

 2.在CSS样式中全局声明字体:简单理解把这些字体通过css引入到我们页面中

右键打开 style.css,复制如图代码引入我们自己的CSS文件中

 3.html标签内添加小图标

我们打开解压文件中的 demo.html ,复制想要的图标,粘贴进 <span></span>标签中

 mac不显示小框框,直接复制即可

 4.给标签定义字体

span {font-family: 'icomoon';font-size: 100px;color: pink;}

注意:标签中的 font-family 的值和我们之前引入字体图标的font-family 必须一样,这里均为 icomoon(如果上面改为pink,下面也是pink)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?aoa0ns');src: url('fonts/icomoon.eot?aoa0ns#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?aoa0ns') format('truetype'),url('fonts/icomoon.woff?aoa0ns') format('woff'),url('fonts/icomoon.svg?aoa0ns#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {font-family: 'icomoon';font-size: 100px;color: pink;}</style>
</head>
<body><span></span><span></span>
</body>
</html>

3.3字体图标的追加

如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。
以 icomoon字库 网为例,点击网站内import icons


把压缩包里面的 selection.json 重新上传,然后选中自己想要新的图标,重新下载压缩包,并替换原来的文件即可。

4.css三角做法

我们要设定盒子宽高是0,并且指定边框,不同边框长度会造成不同的现象,最经典的是四个相同长度边框生成如下的第一个图。所以生成一个三角就可以让其他三个边框变为透明色,留一个就行。

div{width:0;height:0;/*下面两句为了兼容问题*/line-height:0;font-size:0;border: 50px solid transparent;border-left-color: green;}

 5.CSS用户界面样式

所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止表单域拖拽

1.鼠标样式

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状,以下是pointer可以所属的很多值:

li {cursor: pointer; 
}

2.表单轮廓线outline

给表单添加 outline:0; 或者outline: none;样式后,就可以去掉默认的蓝色边框

input { outline: none; }

3.防止拖拽文本域

textarea { resize: none; }

本来默认文本域可以无限放大,加入该代码后就可以控制了,正常文本域我们都是防止其被拖拽 

 

6.vertical-align属性 

vertical-align:

  • 使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
  • 官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效

让图片和文字垂直居中,修改的是img或者textarea属性,行内块元素都可以

图片底侧空白缝隙解决:

bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐(给图片加边框就可以看见)

主要解决办法有两种:

给图片添加 vertical-align : middle | top |bottom 等(推荐)

把图片转换为块级元素 display:block;,因为块级元素不会有vertical-align 属性

7.溢出的文字省略号显示 

单行文本溢出省略号显示

必须满足三个条件:

​
/* 1.先强制一行内显示文本 */
white-space: nowrap;         /*默认 normal 是自动换行,nowrap是强制一行显示文本*//* 2.超出的部分隐藏 */
overflow: hidden;/* 3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;
/*ellipsis:省略号*/​
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div {width: 150px;height: 80px;background-color: pink;margin: 100px auto;/*换行*//*white-space: normal;*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
</style>
<body><div>啥也不说,此处省略一万字</div>
</body>
</html>

多行文本溢出显示省略号显示

多行文本溢出显示省略号,有较大的兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webKit内核) 

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient : vertical;

 8.常见布局技巧

  margin负值的运用

两个盒子加边框1px,浮动,贴紧会出现 1 + 1 = 2px,从而边框加粗,要解决该状况:
所以给右边盒子添加margin-left: -1px,让每个盒子 margin 往左侧移动 ,-1px 正好压住相邻盒子边框。

此时如果要让盒子发生变化,标准流中的盒子发生变化就会因为重叠有一部分不会变,所以提高当前盒子的层级即可:
如果没有定位,则加相对定位(保留位置,并且能覆盖标准流)
如果有定位,则加 z-index

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>ul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;}/*ul li:hover{1.如果li没有定位,鼠标经过添加相对定位position: relative;border: 1px solid blue;}*/ul li:hover {/*2.如果li有定位,则利用z-index提高层级*/z-index: 1;border: 1px solid blue;}
</style>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>

 文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

 先准备大盒子,左边盒子浮动,右边不需要盒子,文字会自动环绕

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0;padding: 0;}.box {width: 300px;height: 160px;background-color: pink;margin: 0 auto;padding: 5px;}.pic {/*左边盒子浮动*/float: left;height: 157px;width: 226px;margin-right: 5px;}.pic img {width: 100%;}
</style>
<body><div class="box"><div class="pic"><img src="img/图层2.png" alt=""></div><p>比较快不愉快VB采用无多擦VB我饿预测误差不饿完不成</p></div>
</body>
</html>

 行内块巧妙运用

因为这里块很多,用浮动就有点麻烦,不如直接用行内块,行内块本身之间就有点距离,浮动还需要设置。

把这些链接盒子转换为行内块,之后给父级大盒子指定 text-align: center,行内块元素会水平居中,之后操作就轻车熟路了。

三角强化 

我们不只是能做出如上最简单的三角形,还能根据不同边框长度做出更多不同的三角形,在这三角形的做法我就只说一种,另外的你们自己去探索。此外还说一点不能做出三角形的情况。

当边框的左边右边都为0或者上面下面都为0时就没有三角形,其他情况都存在。 

width:0
height:0
border-color:transparent red transparent transparent
border-style:solid
border-width:22px 8px 0 0 

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 0;height: 0;/*把上边框宽度调大*/border-top: 100px solid transparent;border-right: 50px solid red;/*左边和下边边框宽度设置为0*/border-bottom: 0px solid blue;border-left: 0px solid green;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

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

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

相关文章

C++学习路线(数据库部分)二

类型 整形类型 整数类型是数据库中最基本的数据类型。标准SQL中支持INTEGER和SMALLINT这两种数据类型。MySQL数据库除了支持这两种类型以外&#xff0c;还扩展支持了TINYINT、MEDIUMINT和BIGINT。下表从不同整数类型的字节数、取值范围等方面进行对比。 类型名称后面的小括号…

IDEA中通义灵码的使用技巧

大家好&#xff0c;我是 V 哥。在日常写代码的过程中&#xff0c;通过 AI 工具辅助开发已是当下程序员惯用的方式&#xff0c;V 哥在使用了众多的 AI 工具后&#xff0c;多数情况下&#xff0c;选择通义灵码来辅助开发&#xff0c;尤其是解释代码和生成单元测试功能甚是好用&am…

Docker篇(实际应用)

目录 一、MySQL 部署 1. 拉取 MySQL 镜像 2. 查看镜像 3. 创建 MySQL 容器 4. 进入 MySQL 容器,登陆 MySQL 5. 远程登陆 MySQL 6. 查看容器 IP 地址 二、tomcat 部署 1. 拉取 tomcat 镜像 2. 创建 tomcat 容器 3. 搭建 Tomcat 服务并部署 web 应用 三、Nginx 部署 …

Darknet 连接教程

本篇文章仅供学习&#xff0c;严禁用于非法用途。 1&#xff0c;前言&#xff1a; 首先明确一点&#xff0c;Darknet真没那么神奇&#xff0c;虽然有些技术文章的确很有水平&#xff0c;对于前端学习&#xff0c;软件开发以及PHP和一些服务器端维护都有许多文章&#xff0c;但…

江协科技STM32学习- P33 实验-软件I2C读写MPU6050

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

Hadoop生态圈框架部署(四)- Hadoop完全分布式部署

文章目录 前言一、Hadoop完全分布式部署&#xff08;手动部署&#xff09;1. 下载hadoop2. 上传安装包2. 解压hadoop安装包3. 配置hadoop配置文件3.1 虚拟机hadoop1修改hadoop配置文件3.1.1 修改 hadoop-env.sh 配置文件3.3.2 修改 core-site.xml 配置文件3.3.3 修改 hdfs-site…

立刻解决 gcc: error: unrecognized argument in option ‘-mabi=aapcs-linux’

unrecognized argument in option ‘-mabiaapcs-linux’ Linux 主线支持的硬件较少&#xff0c;一般是第三方开源&#xff08; Linaro/Yocto &#xff09;或者硬件厂商提供定制的嵌入式 Linux 如果确认主线支持自己的硬件&#xff0c;可以从 https://www.kernel.org/ 获取指定…

「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用

自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。 关键词 自定义组件复用组件属性传递组件通信组…

Windows版 nginx安装,启动,目录解析,常用命令

Windows版 nginx安装&#xff0c;启动&#xff0c;目录解析&#xff0c;常用命令 一级目录二级目录三级目录 1. 下载2. 启动方式一&#xff1a;方式二&#xff1a; 3. 验证是否启动4. 安装目录解析5. 常用命令 一级目录 二级目录 三级目录 1. 下载 官网下载&#xff1a;ngi…

Oracle视频基础1.3.7练习

1.3.7 看oracle是否启动构造一个pfile:boobooke.ora看spfilewilson内容修改alert log file里拷贝的参数内容&#xff0c;创建一个pfile boobooke.ora用新创建的pfile启动数据库&#xff0c;并创建新的spfile:spfilebbk.ora启动数据库&#xff0c;监听&#xff0c;看新的进程解…

【LeetCode】每日一题 2024_11_2 使两个整数相等的位更改次数(位运算/模拟)

前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动&#xff01; 题目&#xff1a;使两个整数相等的位更改次数 代码与解题思路 先读题&#xff1a; 题目要我们把 n 这个数字转换成 k 这个数字&#xff0c;但是只能是二进制位 1 转换成 0 纯模拟的解法&#xff1a; f…

鸿蒙生态下开发挑战-鸿蒙低代码开发工具展望及优势

鸿蒙生态下开发挑战 在鸿蒙生态下开发时&#xff0c;开发者可能会遇到多方面的挑战&#xff0c;这些挑战主要涉及开发工具、技术难度、生态竞争以及市场定位等方面。以下是对这些挑战的详细分析&#xff1a; 一、开发工具不完善 尽管鸿蒙系统的开发工具DevEco Studio在逐步完…

typescript 如何跳过ts类型检查?

文章目录 前言any类型条件判断进行使用断言加注释跳过ts检查 前言 typescript 的使用&#xff0c;虽然让代码更加规范&#xff0c;利于维护&#xff0c;但也给开发带来很多麻烦。为了跳过很多ts的类型检查&#xff0c;大家也是费尽心思&#xff0c;下面就介绍一些常用的方式&a…

(八)JavaWeb后端开发——Tomcat

目录 1.Web服务器概念 2.tomcat 1.Web服务器概念 服务器&#xff1a;安装了服务器软件的计算机服务器软件&#xff1a;接收用户的请求&#xff0c;处理请求&#xff0c;做出响应web服务器软件&#xff1a;在web服务器软件中&#xff0c;可以部署web项目&#xff0c;让用户通…

Leetcode - 142双周赛

目录 一&#xff0c;3330. 找到初始输入字符串 I 二&#xff0c;3331. 修改后子树的大小 三&#xff0c;3332. 旅客可以得到的最多点数 四&#xff0c;3333. 找到初始输入字符串 II 一&#xff0c;3330. 找到初始输入字符串 I 本题就是一道找规律的题&#xff0c;拿示例一来…

使用python画一颗圣诞树

具体效果&#xff1a; 完整代码&#xff1a; import random def print_christmas_tree(height): # 打印圣诞树的顶部 for i in range(height): # 打印空格&#xff0c;使树居中 for j in range(height - i - 1): print(" ", end"") # 打印星号&…

camera和lidar外参标定

雷达和相机的外参标定&#xff08;外部参数标定&#xff09;指的是确定两者之间的旋转和平移关系&#xff0c;使得它们的坐标系可以对齐。 文章目录 无目标标定livox_camera_calibdirect_visual_lidar_calibration 有目标标定velo2cam_calibration 无目标标定 livox_camera_ca…

《使用Gin框架构建分布式应用》阅读笔记:p307-p392

《用Gin框架构建分布式应用》学习第16天&#xff0c;p307-p392总结&#xff0c;总86页。 一、技术总结 1.AWS chapter 08讲使用AWS进行部署&#xff0c;可以根据需要选择是否阅读。因为使用到的概率很小&#xff0c;且还要绑卡&#xff0c;本人选择跳过。 2.CI/CD (1)什么…

【初阶数据结构】实现顺序结构二叉树->堆(附源码)

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…

ChatGPT变AI搜索引擎!以后还需要谷歌吗?

前言 在北京时间11月1日凌晨&#xff0c;正值ChatGPT两岁生日之际&#xff0c;OpenAI宣布推出最新的人工智能搜索体验&#xff01;具备实时网络功能&#xff01;与 Google 展开直接竞争。 ChatGPT搜索的推出标志着ChatGPT成功消除了即时信息这一最后的短板。 这项新功能可供 …