【H2O2|全栈】关于CSS(4)CSS基础(四)

目录

CSS基础知识

前言

准备工作

精灵图

概念

属性

案例

浮动

基础属性

清除浮动

案例 

预告和回顾

后话


CSS基础知识

前言

本系列博客将分享层叠样式表(CSS)有关的知识点。

接下来的几期内容相对比较少,主要是对前面的内容进行一些补充了。本期分享的内容为精灵图(雪碧图)和浮动效果的相关知识。

不是专业的科普博主,主打一个分享知识,写的不好,多多包涵(嘿嘿)。

准备工作

软件:【参考版本】Visual Studio Code

插件(扩展包):Open in browser

浏览器版本:Chrome

系统版本: Win10/11/其他非Windows版本

*我的电脑是Win10的版本,仅供参考*

精灵图

概念

精灵图,又叫sprite图,中文直译为雪碧图。

在我们之前自己做的网页中,需要用到很多张图片。比如我做的百度主页(后面优化一下看能不能做个类似的网站当案例讲),打开F12进行检查,可以看到加载的内容:

可以看到,加载三张图片花费了16ms的时间,而加载整个页面的html文档只花了1ms。

这还是几张相当小的、大小仅为KB级别的图片,试想,如果像正常网页一样需要一次加载成百上千张图片,而且部分图片的大小也比较大。那么,服务器将不断发出上千次的请求,加载时间也无限拉长,网站的效率就会很低,且服务器的负载极大。

所以,如果几张图片能在一张图中加载,就可以解决或改善上述问题。

精灵图将多个图标放到同一张图片上,它的优点可以总结为:

减少服务器接收和发送的请求次数,提高页面的加载速度以对网页进行性能优化

属性

精灵图利用到了背景属性相关的内容。主要涉及到background-imagebackground-position这几个属性。

background-image的作用是将图像设置为元素背景。默认值为none(无效果),也可以使用ul("路径")调用图片。

background-position用于设置显示的背景图像的起始位置。初始的位置是左上角(大概率)。该属性有两个值,分别对应水平位置和垂直位置,对应属性值如下:

水平位置 垂直位置
left/center/right top/center/bottom
px(x轴正方向向右)px(y轴正方向向上)
%(50%为相对背景居中)%(50%为相对背景居中)

*注意,如果只设置一个属性值,另一个值将默认为center*

此外,还有widthheight,他们用于设置显示的小图片的大小。

可以这么理解这个属性,我们现在有一个窗口,也就是我们的可见部分,背景图的默认位置是左上角大致与窗口左上角对齐。通过移动窗口,使得背景图显示的区域发生变化,以达到显示指定区域特定大小的图片的效果。

窗口左上角的点的位置坐标,就是background-position的值,该坐标符合笛卡尔四象限坐标系。

案例

现在有下面这么一张雪碧图:

我现在需要设计一排按钮,使他们的初始颜色为白色,鼠标悬浮时颜色变为黄色,就需要分别定位到白色和黄色的小图标了。 

注意哈,上面这张图是没有背景的,所以白色图标看不清。下载之后记得放到对比度较高的背景里来看。

原点大致在第一排的小图标的头的位置,所以,第一组(第一排)小图标的background-position就可以写成:

.icon-1 {background-position: 22px 0;}.icon-1:hover {background-position: -4px 0;}

类似的可以设置其他的小图标,这里我把所有的按钮放到一个表格里了,完整CSS代码如下:

<style>* {margin: 0;padding: 0;}table {margin: 20px auto;}td {width: 28px;height: 28px;background-image: url("./image/sidebaricon.png");background-color: #000;}.icon-1 {background-position: 22px 0;}.icon-1:hover {background-position: -4px 0;}.icon-2 {background-position: 22px -23px;}.icon-2:hover {background-position: -4px -23px;}.icon-3 {background-position: 22px -48px;}.icon-3:hover {background-position: -4px -48px;}.icon-4 {background-position: 22px -70px;}.icon-4:hover {background-position: -4px -70px;}.icon-5 {background-position: 22px -95px;}.icon-5:hover {background-position: -4px -95px;}.icon-6 {background-position: 22px -118px;}.icon-6:hover {background-position: -4px -118px;}.icon-7 {background-position: 22px -140px;}.icon-7:hover {background-position: -4px -140px;}.icon-8 {background-position: 22px -165px;}.icon-8:hover {background-position: -4px -165px;}.icon-9 {background-position: 22px -187px;}.icon-9:hover {background-position: -4px -187px;}.icon-10 {background-position: 22px -260px;}.icon-10:hover {background-position: -4px -260px;}</style>

完整HTML的主体中的代码如下:

<table><tr><td class="icon-1"></td></tr><tr><td class="icon-2"></td></tr><tr><td class="icon-3"></td></tr><tr><td class="icon-4"></td></tr><tr><td class="icon-5"></td></tr><tr><td class="icon-6"></td></tr><tr><td class="icon-7"></td></tr><tr><td class="icon-8"></td></tr><tr><td class="icon-9"></td></tr><tr><td class="icon-10"></td></tr></table>

网页运行效果如下:

鼠标悬浮到按钮上时,可以变成黄色:

浮动

基础属性

float属性,即浮动属性,使元素向左向右移动,其周围的元素会重新排列

在使用div时,一般display都是为block(块元素),所以会呈现从上到下的排列方式。

而使用float可以将这种排列方式改换成水平排列的方式。

它的属性值和对应效果如下:

属性值效果
none默认   不浮动
left元素向左浮动
right元素向右浮动

设置了浮动效果的元素会一直向指定方向移动,直到遇到另一个浮动元素或遇到父级元素的边框

清除浮动

注意,设置了浮动效果的元素会脱离标准文档流

顾名思义,元素会相对于页面“浮起来”,导致后面没有浮动效果的元素就不能参考到它的位置了。

所以,我们需要清除这个“浮起来”的效果,让它“落地”。

使用到的属性就是clear。我们一般用一个专门设置了clear的空div,放到所有浮动元素的后面,以清除浮动效果——

<div class="top-wrap"><div class="left-box"></div><div class="right-box"></div><!-- 设置在这里 --><div class="clear"></div></div>

clear的属性值和对应清除效果如下:

属性值效果

left

清除左浮动的元素   在左侧不允许浮动元素
right清除右浮动的元素   在右侧不允许浮动元素
both在左右两侧都不允许浮动元素
none不清除

一般的,clear需要清除的元素既有left也有right,所以使用both属性操作比较方便。

案例 

下面给出百度首页的顶部标签栏使用浮动产生效果的示例代码,注意自己调整href哦。

HTML代码:

<div class="top-wrap"><div class="left-box"><a href="" target="_blank">新闻</a><a href="" target="_blank">hao123</a><a href="" target="_blank">地图</a><a href="" target="_blank">贴吧</a><a href="" target="_blank">视频</a><a href="" target="_blank">图片</a><a href="" target="_blank">网盘</a><a href="" target="_blank">文库</a><a href="" target="_blank">AI助手</a><a href="" target="_blank">更多</a></div><div class="right-box"><input type="button" value="登录"><a href="">设置</a></div><div class="clear"></div></div>

CSS代码:

        * {margin: 0;padding: 0;}.top-wrap {width: 100%;height: 80px;}.top-wrap .left-box {margin-left: 10px;}.top-wrap .right-box {margin-right: 10px;}.top-wrap a {display: block;width: auto;margin: 28px 15px 0;font-weight: 400;text-decoration: none;text-align: center;}.top-wrap input {display: block;width: 50px;color: #fff;font-size: 16px;margin: 26px 20px 0;padding: 2px;font-weight: 700;background-color: #4e6eed;border: 1px solid #4e6eed;border-radius: 5px;cursor: pointer;}.left-box a {float: left;}.right-box a,.right-box input {float: right;}a:link,a:visited {color: #000;}a:hover,a:active {color: blue;}.clear {clear: both;}.search-wrap {width: 100%;margin-top: 0;}

相关的知识在前几期博客中都了解过了,没有使用到超前的内容。

效果如下(上面有我一个不太方便展示的路径,图就不截全了):

预告和回顾

在下一期博客可能依然是对前面内容的补充,可能会补充一下定位的内容吧,不然像百度网页这样的页面的部分功能就不好做了。

对CSS文件感兴趣的朋友,可以看下面的CSS专栏,当前为第四期:

专栏 | CSS入门icon-default.png?t=O83Ahttp://t.csdnimg.cn/4bvCJ当然,也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。

后话

在全栈领域,博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。

==期待与你在下一期博客中再次相遇==

——疑似有点缺氧的【H2O2】

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

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

相关文章

[数据集][目标检测]车油口挡板开关闭合检测数据集VOC+YOLO格式138张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;138 标注数量(xml文件个数)&#xff1a;138 标注数量(txt文件个数)&#xff1a;138 标注类别…

Linux相关:在阿里云下载centos系统镜像

文章目录 1、镜像站2、下载方式一2.1、第一步打开镜像站地址2.2 下载地址: https://mirrors.aliyun.com/centos/2.3、选择7版本2.4、镜像文件在isos文件夹中2.5、选择合适的版本 3、下载镜像快捷方式 1、镜像站 阿里云镜像站地址 2、下载方式一 2.1、第一步打开镜像站地址 2…

modbus调试助手/mqtt调试工具/超轻巧物联网组件/多线程实时采集/各种协议支持

一、前言说明 搞物联网开发很多年&#xff0c;用的最多的当属modbus协议&#xff0c;一个稳定好用的物联网组件是物联网平台持续运行多年的基石&#xff0c;所以这个物联网组件从一开始就定位于自研&#xff0c;为了满足各种场景的需求&#xff0c;当然最重要的一点就是大大提…

【程序分享】express 程序:可扩展的高级工作流程,用于更快速的从头算材料建模

分享一个 express 程序&#xff1a;可扩展的高级工作流程&#xff0c;用于更快速的从头算材料建模。 感谢论文的原作者&#xff01; 主要内容 “在这项工作中&#xff0c;我们介绍了一个开源的Julia项目express&#xff0c;这是一个可扩展的、轻量级的、高通量的高级工作流框…

数据驱动型营销与开源 AI 智能名片 O2O 商城系统的融合发展

摘要&#xff1a;本文探讨了数据驱动型营销在现代商业中的重要性&#xff0c;阐述了其在消费者管理和产品管理方面的作用。同时&#xff0c;引入“开源 AI 智能名片 O2O 商城系统”&#xff0c;分析其如何与数据驱动型营销相结合&#xff0c;为企业提供更精准的营销决策和更高效…

Kafka+PostgreSql,构建一个总线服务

之前开发的系统&#xff0c;用到了RabbitMQ和SQL Server作为总线服务的传输层和存储层&#xff0c;最近一直在看Kafka和PostgreSql相关的知识&#xff0c;想着是不是可以把服务总线的技术栈切换到这个上面。今天花了点时间试了试&#xff0c;过程还是比较顺利的&#xff0c;后续…

LineageOS源码下载和编译(Xiaomi Mi 6X,wayne)

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 源码下载 LineageOS官网&#xff1a;https://lineageos.org/ LineageOS源码 github 地址&#xff1a;https://github.com/LineageOS/android LineageOS源码…

创建dataSource错误

说明&#xff1a;记录一次启动项目时的异常&#xff0c;如下&#xff1a; Error starting ApplicationContext. To display the conditions report re-run your application with debug enabled. 2024-09-14 23:27:27.338 ERROR 42260 --- [ main] o.s.boot.SpringA…

leetcode hot100_part4_子串

2024/4/20—4/21 560.和为K的子数组 前缀和哈希表&#xff0c;做二叉树的时候也有这个套路。注意细节&#xff0c;遍历到当前前缀和的时候是先找结果个数还是先加入哈希&#xff1f;应该先找结果个数&#xff0c;不然的话&#xff0c;当前位置也算上了&#xff08;因为是前缀和…

架构师备考的一些思考(四)

前言 对于数学&#xff0c;我们之前学的是对的&#xff0c;但不是真的&#xff0c;所以我们没有数学思维。 对于计算机&#xff0c;我们学校教的是对的&#xff0c;但不是真的&#xff0c;所以仅仅从学校学习知识的应届毕业生&#xff0c;不论985,211&#xff0c;本科&#xff…

中国初创公司数量下降了98%

近年来&#xff0c;中国风险投资市场的风云变幻&#xff0c;通过IT Juzi&#xff08;IT桔子&#xff09;等权威数据服务提供商的透镜&#xff0c;得以清晰展现。数据显示&#xff0c;自2018年的鼎盛时期——拥有51,302家初创公司以来&#xff0c;这一数字在短短五年内急剧下降至…

如何通过网络找到自己想要的LabVIEW知识?

学习LabVIEW或其他编程技术时&#xff0c;无法依赖某一篇文章解决所有问题。重要的是通过多种途径获取灵感&#xff0c;并学会归纳总结&#xff0c;从而逐渐形成系统性的理解。这种持续学习和总结的过程是技术提升的基础。通过网络找到所需的LabVIEW知识可以通过以下几个步骤进…

编写注册接口与登录认证

编写注册接口 在UserController添加方法 PostMapping("/login")public Result login(Pattern(regexp "^\\S{5,16}$") String username,Pattern(regexp "^\\S{5,16}$") String password){ // 根据用户名查询用户User loginUser userS…

第二期: 第二节 , 裸机编程 , gpio

1 首先就是 看原理图&#xff1a; 这里有两个 &#xff2c;&#xff25;&#xff24; 核心板的原理图。 可以看到 是这个脚。 &#xff12; 然后就是 查看数据手册。 从 数据手册可以看出 &#xff0c;一共有这么多的 gpio 组&#xff0c; 但是这些 组 是有复用的&#xf…

跨平台开发新视角:利用Android WebView实现Web内容的原生体验

在移动应用开发领域&#xff0c;跨平台解决方案一直是一个热门话题。开发者们不断寻求能够同时在iOS和Android平台上提供一致用户体验的方法。而Android的WebView组件&#xff0c;作为一个强大的工具&#xff0c;允许开发者在Android应用中嵌入Web内容&#xff0c;为用户提供接…

瑞芯微Android6 内核编译报错解决方案

1、报错内容如下图所示 错误内容&#xff1a; Kernel: arch/arm/boot/zImage is ready make: *** [kernel.img] Error 127 2、分析与解决方法 由于之前在ubuntu环境下编译没问题&#xff0c;现在是在centos环境下重新编译的时候报错&#xff0c;所以经过分析对比两个环境的…

根据第七次人口普查数据探索中国平均预期寿命

一&#xff1a;数据介绍 数据来源&#xff1a;预期寿命数据集 - Heywhale.com 该数据提供了中国各地区在第七次人口普查&#xff08;2020年&#xff09;中的平均预期寿命&#xff0c;包括男性和女性的预期寿命。该表具有93行和3列。以下是关于这个数据表的具体信息&#xff1…

FTP搜索引擎爬虫设计与实现

博主介绍&#xff1a;专注于Java .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的可以…

摩尔信使MThings逻辑控制实例——交通灯

摩尔信使MThings提供了强大的数据配置和逻辑控制功能&#xff0c;可为用户带来一种高效且直观的方式进行管理和控制交通灯系统。与传统的PLC&#xff08;可编程逻辑控制器&#xff09;相比&#xff0c;MThings的界面更加用户友好&#xff0c;使得即使是非专业的用户也能够轻松地…

BSN六周年:迈向下一代互联网

当前&#xff0c;分布式技术作为现代计算机科学和信息技术的重要组成部分&#xff0c;在云计算、区块链等技术的推动下&#xff0c;正以多样化的形式蓬勃发展。 ​而区块链作为一种特殊的分布式系统&#xff0c;近年来也在各个领域得到了广泛关注。通过在区块链上运行智能合约…