web学习笔记(七)

这篇具有很好参考价值的文章主要介绍了web学习笔记(七)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.css动画

1.1动画的编写格式

1.2引入动画

1.3用动画实现简单轮播图的效果

2.媒体查询

2.1媒体查询的编写格式

2.2媒体查询总结

3.html表示大小的单位


1.css动画

动画需要先编写出想要的动画,然后在所需位置引入动画。动画的命名是随意的,可以根据自己的习惯命名。

1.1动画的编写格式

动画的编写格式分以下两种,推荐使用百分比格式,方便后续的修改。

  1. from to格式:
      @keyframes myfist {
                from {
                    
                }
    
                to {
                   
                }
    
            }

    在from和to后面的花括号内写入想要实现的效果,可以是背景颜色、宽度、高度等语句。

  2. 百分比格式:

      @keyframes box2bj {
                0% {
                    background-color: black;
                }
    
                25% {
                    background-color: azure;
                  
                }
                50%{
                    background-color: blue;
    
                }
                100%{
                    background-color: aqua;
                }
            }

    0% 是动画的开始,100% 是动画的完成,可以根据自己的需求写入多个百分比,从而实现不同的效果(注意编写0%的语句时不可以把百分号省略掉)。

1.2引入动画

  • 格式:animation: 要引入的动画名 完成动画所需时间 ;如果需要让动画循环播放可以在完成动画所需时间后写入属性值infinite。
  • eg: animation: myfist 5s infinite;

1.3用动画实现简单轮播图的效果

  • html部分代码:
<div class="divlbt1">
<div class="divallimg">
    <img src="../IMG/t1.jpg" alt="">
    <img src="../IMG/t2.jpg" alt="">
    <img src="../IMG/t3.jpg" alt="">
</div>
</div>
  • css部分代码:
         @keyframes allimg{
                0%{position: relative;
                    left: 0;
            }
                50%{position: relative;
               left: -1920px;}
                100%{position: relative;
               left: -3840px;}
            }
            /* 编写动画 */
            .divlbt1{
                width: 1920px;
                height: 420px;
                overflow: hidden;
                border: 2px solid #f69;
                margin: auto;
                position: relative;
            }
         
            .divallimg{
                animation: allimg 8s infinite;
                width: 7760px;
            }

总结:

  1. 一定要保证存放图片的盒子宽度足够大,可以让轮播图所需的所有图片都横向排列。
  2. 在编写动画0%展示的效果时一定要编写left:0;和后面几个动画的步骤保持一致(如果是用right来定位也同理需要编写right:0;),否则会出现图一和图二轮播不顺畅的现象。

2.媒体查询

媒体查询不需要引入,直接在对应位置编写需要修改的类名和对应的属性值即可,媒体查询内部的编写格式和css一致,需要注意在编写媒体查询条件时各个条件之间的空格不可以漏掉。

2.1媒体查询的编写格式

  1. 之间在css内直接写入(注意:媒体查询尽量要写在css文件中靠下的位置)。
      @media screen and () {
                
            }

    and后面的括号内写入媒体查询的条件,可以是最大宽度,最小宽度,最大高度,最小高度等语句。

  2. 当页面中多个部分需要在特定屏幕大小下进行变化时,可以在链接css时将媒体查询条件写入。eg:
    <link rel="stylesheet" href="../css/1.css" media="screen and (min-width:700px) and (max-width:1200px)">

    表示当屏幕大小大于700px,小于1200px时,执行1.css文件中的样式(注意要将引入链接写在正常引入css文件的Link语句下面)。

2.2媒体查询总结

  • screen后面可以同时跟多个and语句,eg:
     @media screen and (min-width:700px) and (max-width:1200px){
                .box{
                    border-radius: 50%;
                    background-color: aquamarine;
                    
                }
            }

    表示当屏幕大于700px小于1200px时box盒子产生对应的效果。

  • 也可以在媒体查询的语句中间用animation语句引入动画的效果。

  • 补充知识点:最大宽度 max-width;最小宽度min-width;最大高度max-height;最小高度min-height;

  • 注意and语句前后的空格不可以漏掉。文章来源地址https://www.toymoban.com/news/detail-818793.html

  •   @media后可以跟多个属性值,我们比较常用的是screen.
     
    screen 用于电脑屏幕,平板,智能手机等。
    all 用于所有多媒体类型设备
    print 用于打印机
    speech  用于屏幕阅读器

    3.html表示大小的单位

  • html中表示大小的单位值有五种:px 、em 、rem、vh和vw。
  • 其中px表示像素,而em和rem都是表示倍数,前者的参照物是父级元素(当父级元素不存在时参照物变成网页),后者的参照物为html网页。
  • 以px作为单位的数值不可以是小数,而em和rem可以跟小数。
  • 1vh的高度等于视口高度的1%。
  • 1vw的宽度等于视口宽度的1%。
  • 可以将盒子的宽度设置为100vw,高度设置为100vh,再给盒子设置背景图片,这样可以实现同一个页面中,滑动一整个屏幕更换一张背景图片的效果,如果是将盒子设置了具体px的宽高,那么在不同的显示器上背景将会有不同的显示效果,影响用户体验。
  • 在编写网页时可以先设置html的字号为100px,然后后面所需字体大小就用rem表示,eg:font-size:0.16rem;这样做的好处是在后续通过媒体查询设置当屏幕缩小时页面的字号可以只修改html的字号,而不用多处修改.

到了这里,关于web学习笔记(七)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web学习笔记(十八)

    目录 1.函数的参数 1.1显式参数 1.2隐式参数 (1)this (2)Arguments 1.3伪数组转换为真数组 2.函数补充知识点 2.1函数可以调用另一个函数 2.2闭包函数 2.3递归函数 2.4回调函数 2.5高阶函数 显式参数就是我们自定义的参数。 JavaScript函数定义显式参数时没有指定数据类型。 系统给定的

    2024年02月21日
    浏览(34)
  • web学习笔记(十七)

    目录 1.Bootstrap知识点汇总 1.1什么是Bootstrap 1.2引入Bootstrap 1.3Bootstrap提供的类名  1.4Bootstrap栅格系统 2.Math对象常用方法和属性汇总 2.1属性 2.2方法 Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。 可以在页面引入在线文件,也可以将文件

    2024年01月21日
    浏览(38)
  • web学习笔记(十九)

    目录 1.作用域 1.1作用域的概念 1.2作用域的分类 1.2.1全局作用域 1.2.2局部作用域 1.2.3块级作用域(ES6新增  ) 2.变量作用域 2.1全局变量 2.2局部变量 3.作用域链  3.1作用域链的定义 4.垃圾回收机制 4.1定义 4.2如何避免内存泄漏 5.预解析 我们平时声明的变量的名字,并不是在所有

    2024年02月22日
    浏览(31)
  • web学习笔记(二十八)

    目录 1.JSON 1.1JSON简介 1.2JSON的语法 1.3JSON字符串分类  1.4JSON方法  2.数据存储  2.1会话存储 2.1.1会话存储的特点 2.1.2会话存储的常用方法  2.2本地存储 2.2.1本地存储的特点 2.2.2本地存储的常用方法  2.3两者的共同点 JSON(JavaScript Object Notation)是JavaScript的对象表示法,是轻量级

    2024年03月24日
    浏览(41)
  • web学习笔记(十五)

    目录 1.Date对象 1.1日期对象的概念 1.2Date()方法的使用  1.3Date()常用方法汇总 1.4例题:用函数编写一个倒计时 2.函数 2.1函数的概念 2.2函数的使用 2.3函数的参数 2.4函数的声明   2.5函数的返回值 2.6异步函数 3特殊函数类型 3.1匿名函数 3.2箭头函数  3.3 函数形参和实参个数不匹

    2024年02月02日
    浏览(29)
  • web学习笔记(七)

    目录 1.css动画 1.1动画的编写格式 1.2引入动画 1.3用动画实现简单轮播图的效果 2.媒体查询 2.1媒体查询的编写格式 2.2媒体查询总结 3.html表示大小的单位 动画需要先编写出想要的动画,然后在所需位置引入动画。动画的命名是随意的,可以根据自己的习惯命名。 动画的编写格

    2024年01月23日
    浏览(34)
  • web学习笔记(八)

    目录 1.使用swiper制作轮播图的步骤: 1.1引入Swiper库: 1.2定义HTML结构: 1.3初始化Swiper对象: 1.4配置选项: 1.5补充: 2.补充css属性 2.1clip属性 2.2columns  列 3.伪对象选择符 3.1伪对象选择符的定义 3.2常见的伪对象选择符 3.3常见伪类选择符的使用格式 首先需要在网页中引入Swip

    2024年01月18日
    浏览(25)
  • web学习笔记(四十四)

    目录 1. 接口 1.1 什么是接口 1.2 接口的请求过程 1.3 接口文档 1.3.1 什么是接口文档 1.3.2 接口文档的组成部分 1.3.3 接口文档示例  2. XMLHttpRequest 2.1 什么是XMLHttpRequest 2.2 XHR发起Get请求的步骤 2.3 XHR发起post请求的步骤 2.4 什么是查询字符串   2.5 什么是XML        使用Ajax 请求数

    2024年04月17日
    浏览(35)
  • Web学习笔记-React(路由)

    笔记内容转载自 AcWing 的 Web 应用课讲义,课程链接:AcWing Web 应用课。 本节内容是如何将页面和 URL 一一对应起来。 Web 页面可以分为两大类: 静态页面:页面里的数据是写死的,即整个文件存放在服务器上,当用户访问 URL 时,服务器原封不动地将页面信息传给前端。 动态

    2024年02月09日
    浏览(40)
  • Web 学习笔记 - 网络安全

    目录 m前言 正文 XSS 攻击 简单示例 XSS 防御 CSRF  Web 安全方面的基本知识是有很必要的,未必就要深入理解。本文主要介绍常见的网络攻击类型,不作深入探讨。 网络攻击的形式种类繁多,从简单的网站敏感文件扫描、弱口令暴力破解,到 SQL 注入,再到复杂的网络劫持等,

    2023年04月24日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包