web前端学习第十一天

2024-02-01 02:38

本文主要是介绍web前端学习第十一天,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

网页布局总结
通过盒子模型,清楚知道大部html标签是一个盒子。

通过CSS浮动,定位可以让每个盒子排列成为网页

一个完整的网页,是标准流,浮动,定位一起完成布局的,每个都有自己的专门用法。

1,标准流
可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。

2,浮动
可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局。

3,定位
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示,如果元素自由在某个盒子内移动就用定位布局。

元素的显示与隐藏

类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现

本质:让一个元素在页面中隐藏或者显示出来

1,display 属性

display:none;隐藏对象

display:block;除了转换为块级元素之外,同时还有显示元素的意思。

display隐藏元素后,不再占有原来的位置
后面应用及其广泛,搭配JS可以做很多的网页特性。

2,visibility 属性用于指定一个元素应可见还是隐藏
visibility :visible; 元素可视

visibility:hidden; 元素隐藏

visibility 隐藏元素后,继续占有原来的位置

如果隐藏元素想要原来位置,就用visibility:hidden

如果隐藏元素不想要原来位置,就用display:none (用处更多 重点)

3,overflow 溢出
overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。

属性值:
visible:不剪切内容也不添加滚动条
hidden:不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll:不管超出内容否,总是显示滚动条
auto:超出自动显示滚动条,不超出不显示滚动条。

一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局

但是如果有定位的盒子,请慎用overflow:hidden 因为它会隐藏多余的部分。

精灵图

1,为什么需要精灵图

一个网页往往会应用很多小的背景图像作为装饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。

因此。为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites,CSS雪碧)

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

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

2,精灵图(sprites)的使用

使用精灵图核心:

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

2,这个大图片也称为sprites精灵图,或者雪碧图

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

4,移动的距离就是这个目标图片的x和y坐标,注意网页中的坐标有所不同

5,因为一般情况下都是往上往左移动,所以数值是负值

6,使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。

使用精灵图核心总结:

1,精灵图主要针对于小的背景图片使用。

2,主要借助于背景位置来实现–background-position。

3,一般情况下精灵图都是负值,(千万注意网页中的坐标:x轴右边走是正值,左边走是负值,y轴同理)

语法:

选择器 {background-position: -182px 0/  x  y;}

3,字体图标的产生
字体图标使用场景:主要用于显示网页中通用,常用的一些小图标

3.1,精灵图是有诸多优点的,但是缺点很明显。
1,图片文件还是比较大的
2,图片本身放大和缩小会失真
3,一旦图片制作完毕想要更换非常复杂

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

字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。

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

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

兼容性:几乎支持所有的浏览器,请放心使用。

注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提示和优化。

总结:
1,如果遇到一些结构和样式比较简单的小图标,就用字体图标。
2,如果遇到一些结构和样式复杂一点的小图片,就用精灵图。

3.3,字体图标的引入
下载完毕之后,注意原先的文件不要删,后面会用

第一步:把下载包KIM的fonts文件夹放在HTML页面根目录下。

第二步:在CSS样式中全局声明字体:简单理解把这些字体文件通过CSS引入到我们页面中,一定注意字体文件路径的问题。style.css :文件复制font-face样式。

第三步:打开下载好的demo浏览器里面复制对应的图标复制后面的小框框然后放在结构里

第四步:根据对应的结构来样式声明CSS。

4,三角

网页中常见一些三角形,使用CSS直接画出来就可以了,不必做成图片或者字体图标。

一张图,你就知道CSS三角是怎么来的了,做法如下:

div {width: 0;height: 0;line-height: 0;font-size: 0;border: 10px solid transparent;border-top-color: aquamarine;}

这篇关于web前端学习第十一天的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/665823

相关文章

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

web网络安全之跨站脚本攻击(XSS)详解

《web网络安全之跨站脚本攻击(XSS)详解》:本文主要介绍web网络安全之跨站脚本攻击(XSS)的相关资料,跨站脚本攻击XSS是一种常见的Web安全漏洞,攻击者通过注入恶意脚本诱使用户执行,可能... 目录前言XSS 的类型1. 存储型 XSS(Stored XSS)示例:危害:2. 反射型 XSS(Re

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl