【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.mzph.cn/pingmian/58549.shtml

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

相关文章

net framework 3.5组件更新失败错误代码0x80072f8f怎样解决

浏览器地址栏输入www.dnz9.com远程解决netframework问题 当遇到.NET Framework 3.5 组件更新失败&#xff0c;错误代码为 0x80072f8f 时&#xff0c;可以尝试以下几种解决方法&#xff1a; 一、检查网络连接和时间设置 网络连接 错误代码 0x80072f8f 通常与网络相关问题有关。首…

STM32F103C8T6学习笔记2--LED流水灯与蜂鸣器

1、简要说明与电路图 LED灯与蜂鸣器都是GPIO的输出操作&#xff0c;给高低电平实现。GPIO操作也是后续操作的基础&#xff0c;没有什么难度&#xff0c;记不住寄存器没关系&#xff0c;只要把流程理清楚就可以了。 端口配置成推挽输出模式&#xff0c;高低电平均有驱动能力。 …

计算机网络网络层笔记

互联网提供的两种服务 1.虚电路服务 2.数据报服务 需要记住的是现在只用第二种也就是数据报服务 网际协议IP 物理层的中断系统:转发器(hub) 链路层的中断系统:交换机 网络层的中断系统:路由器 网络层以上:网关 如上图所示,网关是用来访问其他的网段的一个接口,网关的地…

大屏可视化:舞动数据与美观的“设计秘籍”

大屏可视化鉴赏&#xff1a;踏入软件系统产品设计之旅&#xff0c;让我们一同鉴赏那些闪耀在智慧农业、智慧园区、智慧社区及智慧港口等领域的大屏可视化杰作。每一帧画面&#xff0c;都是科技与创新的完美融合&#xff0c;数据跃然屏上&#xff0c;智慧触手可及。 >> 数…

持续基础怎么搞?Jenkins+Docker+Git实战

在如今的互联网时代&#xff0c;随着软件开发复杂度的不断提高&#xff0c;软件开发和发布管理也越来越重要。目前已经形成一套标准的流程&#xff0c;最重要的组成部分就是持续集成&#xff08;Continuous Integration&#xff0c;CI&#xff09;及持续部署、交付&#xff08;…

EDA --软件开发之路

之前一直在一家做数据处理的公司&#xff0c;从事c开发&#xff0c;公司业务稳定&#xff0c;项目有忙有闲&#xff0c;时而看下c&#xff0c;数据库&#xff0c;linux相关书籍&#xff0c;后面跳槽到了家eda公司&#xff0c;开始了一段eda开发之路。 eda 是 electric design …

「Mac畅玩鸿蒙与硬件10」鸿蒙开发环境配置篇10 - 项目实战:计数器应用

本篇将通过一个简单的计数器应用,带你体验鸿蒙开发环境的实际操作流程。本项目主要练习组件的使用、事件响应和状态管理,帮助开发者熟悉基本的应用构建流程。 关键词 计数器应用组件操作事件响应状态管理HarmonyOS 应用开发一、创建计数器项目 1.1 在 DevEco Studio 中新建项…

window快捷键:window + v 打开剪切板历史记录 / 非常实用

一、剪切板历史记录功能介绍 1.1、window v 打开剪切板历史记录 / 文字、图片都可记录 1.2、window v 最近使用 1.3、window v 表情符号 1.4、window v GIF 1.5、window v 颜文字 1.6、window v 符号 二、欢迎交流指正

寻找专业在线微信投票和点赞服务团队攻略

在当今的社交网络时代&#xff0c;微信投票和点赞活动日益频繁&#xff0c;无论是企业评选、才艺比赛还是个人荣誉的角逐&#xff0c;都可能需要一定的投票和点赞支持。然而&#xff0c;要找到领先、高效、专业的在线微信投票和点赞服务团队并非易事。以下是一些关键步骤和注意…

115页PPT华为管理变革:制度创新与文化塑造的核心实践

集成供应链&#xff08;ISC&#xff09;体系 集成供应链&#xff08;ISC&#xff09;体系是英文Integrated Supply Chain的缩写&#xff0c;是一种先进的管理思想&#xff0c;它指的是由相互间提供原材料、零部件、产品和服务的供应商、合作商、制造商、分销商、零售商、顾客等…

Games101 05~06 - Raterization 光栅化

1.Viewport Transformation视口变换&#xff1a; 1.1Canonical Cube 之前我们通过MVP矩阵把物体坐标变换到正方体中&#xff08;每个顶点的x&#xff0c;y&#xff0c;z坐标都应该在-1.0到1.0之间&#xff09;也被称为裁剪空间clip space&#xff0c;接下来我们需要将该空间映…

为Meta Spark准备3D模型

有许多工具可以帮助你为 Meta Spark Studio 创建 3D 对象&#xff0c;包括 Cinema4D、Blender 和 3ds Max。你还可以使用 Meta Spark Toolkit 优化 Blender 对象。 在本指南中&#xff0c;我们将介绍正确的设置&#xff0c;以便你可以成功地为 Meta Spark Studio 准备对象&…

shodan7,shodan参数使用,常用端口,Google语法

参数使用 alert shodan alert -h(查看帮助文档 这个就是怎么去配置ip监控)我们能在web页面上面去做&#xff0c;而且更加方便&#xff0c;所以就不多讲了 info shodan info(查看你查询的扫描的一些次数每个账户都是每个月有限制次数的)domain shodan domain(查询域名信息…

MATLAB/Simulink学习|在Simulink中调用C语言-04使用C Function 实现PI运算(使用模块自定义代码-仿真自定义代码)

在上一篇博客中&#xff0c;介绍了如何使用C Function 实现PI运算&#xff0c;但是在模块内编辑C代码&#xff0c;而不能直接调用已经写好了的C代码。 在Simulink中使用C Function调用自定义代码有两种方法&#xff0c;本篇博客介绍其中一种方法。 添加头文件和源文件 在实际…

博图V19的DB块,批量导入组态王

最近在使用组态王做一个厂区的DCS项目&#xff0c;plc选用西门子1500系列。一共用了3个1500&#xff0c;5个io站点。整个项目下来&#xff0c;点位大约有5000多个。把这5000多个点位&#xff0c;一个一个导入到组态王&#xff0c;无疑是一个非常非常非常难受的工作&#xff0c;…

Kafka相关API开发

(一)引入依赖 用API直接去操作kafka(读写数据)在实际开发中用的并不多&#xff0c;学习它主要还是为了加深对Kafka功能的理解。kafka的读写操作&#xff0c;实际开发中&#xff0c;是通过各类更上层的组件去实现。而这些组件在读写kafka数据时&#xff0c;用的当然是kafka的jav…

linux离线安装Ollama并完成大模型配置(无网络)

这篇文章主要分享两方面内容&#xff1a; 1&#xff09;在纯内网环境下如何部署ollama 2&#xff09;在纯内网环境下如何配置大模型 话不多说直接开始。 ①离线部署ollama 一、通过浏览器访问ollama官方安装脚本&#xff0c;获取脚本内容。复制里面的内容。 在Linux中执行…

Centos安装配置Jenkins

下载安装 注意&#xff1a;推荐的LTS版本对部分插件不适配&#xff0c;直接用最新的版本&#xff0c;jenkins还需要用到git和maven&#xff0c;服务器上已经安装&#xff0c;可查看参考文档[1]、[2]&#xff0c;本次不再演示 访问开始使用 Jenkins 下载jenkins 上传至服务器…

【java数据结构】二叉树

【java数据结构】二叉树 一、 认识二叉树1.1 二叉树的概念1.2 二叉树的特性&#xff1a;1.3 两种特殊的二叉树&#xff1a;1.4 二叉树的性质&#xff1a;1.5 二叉树的存储&#xff1a; 二、 实现二叉树2.1 二叉树节点的定义&#xff1a;2.2 二叉树的基本操作&#xff1a;获取树…

智源推出小时级超长视频理解大模型Video-XL

北京智源人工智能研究院联合上海交通大学、中国人民大学、北京大学和北京邮电大学等高校推出了一款名为Video-XL的超长视频理解大模型。这款模型是多模态大模型核心能力的重要展示&#xff0c;也是向通用人工智能&#xff08;AGI&#xff09;迈进的关键步骤。与现有多模态大模型…