web学习笔记(八)

这篇具有很好参考价值的文章主要介绍了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常见伪类选择符的使用格式


1.使用swiper制作轮播图的步骤:

1.1引入Swiper库:

首先需要在网页中引入Swiper的CSS和JS文件。可以通过下载Swiper库并将其文件导入,或者使用CDN引入。(补充:带min的文件都是被压缩过的,不太方便我们阅读,但使用效果和未压缩的文件一样)

<head>
  <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.2.3/swiper-bundle.min.css" rel="stylesheet">
</head>
<body>
  ...
  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.2.3/swiper-bundle.min.js"></script>
</body>

1.2定义HTML结构:

根据Swiper的要求,我们需要定义一个容器元素和一个用于显示轮播内容的元素。可以使用<div>元素作为容器和轮播内容的父元素,然后在其中添加多个子元素作为轮播项,如:

<div class="banner">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide ">Slide 1</div>
                <div class="swiper-slide ">Slide 2</div>
                <div class="swiper-slide ">Slide 3</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>

        </div>

    </div>

1.3初始化Swiper对象:

在页面加载完成后,我们需要初始化一个Swiper对象,并将其绑定到容器元素上。可以通过调用Swiper的构造函数,并传入容器元素的选择器和一些配置选项来完成,如:

 <script>
        var mySwiper = new Swiper('.swiper', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            effect: 'fade',


            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            autoplay: {
                delay: 1000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },

            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })
    </script>

1.4配置选项:

在初始化Swiper对象时,可以传入一些配置选项来定制轮播效果。常用的配置选项包括:

  • autoplay:设置是否自动播放,默认为false。
  • loop:设置是否循环播放,默认为false。
  • pagination:设置是否显示分页器,默认为false。
  • navigation:设置是否显示导航按钮,默认为false。
  • effect:设置轮播切换效果,默认为'slide'。
  • speed:设置轮播切换速度,默认为300毫秒。
  • 其他配置选项可参考Swiper的官方文档。

1.5补充:

  1. 样式定制:根据需要,可以通过CSS来对轮播图进行样式定制,如设置轮播项的宽度、高度、背景颜色等。

  2. 初始化后的Swiper对象可以通过调用其方法来实现一些交互效果,比如手动切换轮播项、获取当前活动的轮播项等。

  3. 定义html结构时元素自带的类名不可以进行修改,但可以根据自己的需求添加新的类名

  4. 将需要进行轮播的图片设置为swiper-slide的背景图片即可,可以根据自己·的需求在 <div class="swiper-slide "></div>中间添加添加其他的标签。

以上就是使用Swiper制作轮播图的基本步骤。根据实际需求,还可以进一步定制轮播图的特效、样式等。

2.补充css属性

2.1clip属性

  • clip属性是CSS中用来裁剪元素的一种方式。它可以用于裁剪图片、背景图像以及其他形状的元素。
  • clip属性使用四个值来定义裁剪区域,分别是left、top、right和bottom。这些值定义了一个矩形区域,该区域内的内容会被显示,区域外的内容会被隐藏。
  • clip属性仅可以用在绝对定位的元素上,以确定裁剪区域的参考位置。当使用绝对定位或固定定位时,clip属性的参考位置是相对于包含块的左上角。当使用相对定位时,clip属性的参考位置是相对于元素自身的左上角。
div {
  position: absolute;
  left:50%;
  top:50%;
  clip: rect(0px, 100px, 100px, 0px);
}

上述代码将一个div元素裁剪成一个100px * 100px的矩形,只显示该矩形区域内的内容,裁剪区域的左上角是坐标点(0,0),右下角是坐标点(100,100)。

clip属性在现代CSS中已经不常用,因为它不支持响应式布局和动态调整。取而代之的是使用更灵活的裁剪方式,例如使用CSS的overflow属性来实现元素的裁剪。

2.2columns  列

columns 是唯一可以分割内容的 CSS 布局方法。

要将连续的内容块拆分为多列,可以轻松便捷的实现瀑布流布局,

  • column-width:列宽。
  • column-count:列数。
  • column-gap:间隙。
  • column-rule: 1px solid #000;列于列之间的边框。
  • column-count: all;横跨所有列。

3.伪对象选择符

3.1伪对象选择符的定义

在前端开发中,伪对象选择符(pseudo-elements)是一种CSS选择器,它允许对元素的特定部分进行样式化。伪对象选择符以双冒号(::)开头,用于选择元素的某个特定的部分。 

3.2常见的伪对象选择符

1. ::first-letter:选择元素的第一个字符,并对其进行样式化。常用于对段落首字母进行特殊样式的设置。

2. ::first-line:选择元素的第一行,并对其进行样式化。可以用来设置段落的首行缩进、字母间距等。

3. ::-webkit-input-placeholder:用于设置输入框的占位符文本样式。它只能用于WebKit浏览器(包括Chrome、Safari等)。可以用来自定义输入框的占位符文本的字体样式、颜色、对齐方式等。其它浏览器可以使用::placeholder伪元素来设置输入框的占位符文本样式。

4. ::selection:用于更改元素被选择时的颜色。

5. ::before:设置在对象前发生的内容,依附对象树的逻辑结构,必须搭配content属性使用,并对其进行样式化。可以用来创建元素的装饰性内容。

6. ::after:设置在对象后发生的内容,依附对象树的逻辑结构,必须搭配content属性使用,并对其进行样式化。同样可以用来创建元素的装饰性内容。

3.3常见伪类选择符的使用格式

这些伪对象选择符通过在CSS中使用双冒号(::)来进行选择,比如:
p::before {
  content: "前缀";
  font-weight: bold;
}

p::after {
  content: "后缀";
  color: red;
}

p::first-letter {
  font-size: 2em;
}

p::first-line {
  text-transform: uppercase;
}

上述代码中,::before选择器会在所有<p>元素的内容前插入一个带有 "前缀" 文本的元素,并设置其字体为粗体;::after选择器会在所有<p>元素的内容后插入一个带有 "后缀" 文本的元素,并设置其颜色为红色;::first-letter选择器会选择所有<p>元素的第一个字母,并将其字体大小设置为2倍;::first-line选择器会选择所有<p>元素的第一行,并将其转换为大写字母。

通过使用伪对象选择符,我们可以对元素的特定部分进行样式化,实现更加灵活多样的设计效果。文章来源地址https://www.toymoban.com/news/detail-801173.html

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

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

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

相关文章

  • 【WEB前端进阶之路】 HTML 全路线学习知识点梳理(中)

    本文是HTML零基础学习系列的第二篇文章,点此阅读 上一篇文章。 标题是通过 h1 - h6 标签进行定义的。 h1 定义最大的标题。 h6 定义最小的标题。浏览器会自动地在标题的前后添加空行,例如: 标题用来正确的显示文章结构 ,通过不同的标题可以为文章建立索引,所以,标题

    2024年02月02日
    浏览(47)
  • 【学习笔记】HTML+CSS

    1、意义: 用于收集用户的输入信息 表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器 一个文本字段的默认宽度是20个字符 2、form创建表单: 格式: forminput 元素/form 多数情况下被用到的表单标签是输入标签 input 3、type输入标签类型(针对

    2023年04月11日
    浏览(54)
  • HTML学习笔记(二)

    HTML表单用于收集用户的输入信息    表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入内容,比如: 文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox)等 在 HTML 中创建表单需要用到from标签,具体语法如下所示:    action 属性用来指明将表

    2024年02月03日
    浏览(49)
  • 前端html学习笔记

    目录 一、文本标签 1. 单标签 2. 双标签 3. 重要的信息往下面放(自行判断) 4. 不重要的信息往下面放(自行判断) 二、图片标签 三、路径 1. 绝对路径 2.相对路径 (1) 同级目录: (2) 下级目录: (3) 上级目录 四、音频标签 五、视频标签 六、链接标签 1. target: 七、列表标签

    2024年01月24日
    浏览(49)
  • HTML学习笔记01

    HTML: Hyper Text Markup Language (超文本标记语言) HTML 5,提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性和规则的建立,提供了许多新的网页功能,如使用网页实现动态渲染图形、图表、图像和动画,以及不需要安装任何插件直接使用网

    2024年02月11日
    浏览(50)
  • HTML入门学习笔记

    HTML HTML,英文全称为 Hyper Text Markup Language,中文翻译为超文本标记语言,其中超文本包括:文字,图片,音频,视频,动画等 目前 目前主流使用的是HTML5+CSS3 HTML的优势 主流浏览器都支持 微软 GOOGLE 苹果 市场的需求 跨平台(类似JVM) W3C标准 W3C Wold Wide Web Consortium(万维网联

    2023年04月24日
    浏览(48)
  • HTML+CSS+JS 学习笔记(一)———HTML(中)

    🌱博客主页:大寄一场. 🌱系列专栏:前端 🌱前期回顾:HTML+CSS+JS 学习笔记(一)———HTML(上) 😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注 ​ 目录  字符实体  段落 段落标签 段落的换行标签  段落的原格式标签  水平线 水平线标签 ​编辑 水平线标签的宽度  图像

    2023年04月16日
    浏览(52)
  • HTML+CSS+JS 学习笔记(一)———HTML(上)

    🌱博客主页:大寄一场. 🌱系列专栏:前端 😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注 目录 代码开发工具 概念 HTML模板 body元素的常用属性  HTML 控制标记(标签)的类型 HTML语法规范  HTML常用标签 标题的对齐方式 文字 文字的上标与下标 俗话说:“工欲善其事,必先

    2023年04月14日
    浏览(60)
  • 【HTML】学习笔记(自用持续更新)

    只定义信息,通过标签组成整个页面框架,再通过CSS渲染使得前端页面做的好看 title/title 网页标题 h1/h1 一级标题 h2/h2 二级标题  //标题最多6级 p/p 文本段落 br 强制换行 b/b 加粗 i/i 斜体 u/u 下划线 img src=\\\"图片链接\\\" width= 图片 width设置图片宽度 a href=\\\"网页链接\\\" 属性连接名/a 打

    2024年02月11日
    浏览(37)
  • html5学习笔记13-HTML5 新元素

    https://www.runoob.com/html/html5-new-element.html 新多媒体元素 新表单元素 新的语义和结构元素 移除的元素,HTML 4.01 元素在HTML5中已经被删除:

    2024年02月11日
    浏览(73)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包