2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍 第6天

6.1 定位-相对和绝对和固定

6.2 相对和绝对和固定

6.3 堆叠顺序z-index

6.4 定位总结

6.5 CSS精灵 基本使用

6.6 案例 CSS精灵 京东服务

6.7 字体图标-下载和使用

6.8 字体图标-上传

6.9 垂直对齐方式vertical-align

6.10 过渡属性

6.11 修饰属性-透明度与光标类型

6.12 综合案例-淘宝轮播图

 html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝轮播图</title><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./font/iconfont.css">
</head>
<body><div class="banner"><!-- 图 --><ul><li><img src="./img/banna01.png" alt="" srcset=""></li><li><img src="./img/banna02.png" alt="" srcset=""></li><li><img src="./img/banna03.png" alt="" srcset=""></li></ul><!-- 箭头 --><!-- 上一张 prev --><a href="#" class="prev"><i class="iconfont icon-zuojiantou2"></i></a><!-- 下一张 next --><a href="#" class="next"><i class="iconfont icon-youjiantou1"></i></a><!-- 圆点 --><ol><li></li><li class="active"></li><li></li></ol></div>
</body>
</html>

index.css代码:

* {margin: 0;padding: 0;box-sizing: border-box;
}li {list-style: none;
}.banner {position: relative;margin: 100px auto;width: 564px;height: 315px;/* background-color: pink; *//* 隐藏范围外的内容 */overflow: hidden; 
}/* 图片 */
.banner img {width: 564px;border-radius: 12px;vertical-align: middle;
}.banner ul {display: flex;
}/* 箭头 */
.banner .prev,
.banner .next {display: none;position: absolute;top: 50%;transform: translateY(-50%);width: 20px;height: 30px;background-color: rgba(0, 0, 0, 0.3);text-decoration: none;color: #fff;line-height: 30px;
}/* 鼠标滑到banner区域,箭头要显示 display:block */
.banner:hover .prev,
.banner:hover .next {display: block;
}.banner .prev {left: 0;border-radius: 0 15px 15px 0 ;
}.banner .next {right: 0;border-radius: 15px 0 0 15px;text-align: center;
}/* 圆点 */
.banner ol {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);height: 13px;background-color: rgba(255, 255, 255, 0.3);display: flex;border-radius: 10px;
}.banner ol li {margin: 3px;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;cursor: pointer;
}/* 橙色小li */
.banner ol .active {background-color: coral;
}

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

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

相关文章

2.8 数据类型与作用域练习

1、选择题 1.1、以下选项中,不能作为合法常量的是 ___B___ A&#xff09;1.234e04 B&#xff09;1.234e0.4 C&#xff09;1.234e4 D&#xff09;1.234e0 解析&#xff1a;在C语言中&#xff0c;合法的浮点常量形式通常遵循以下规则&#xff1a;1.可以有整数部分、小数部…

string容器

1. string基本概念 1.1 本质&#xff1a; string是C风格的字符串&#xff0c;而string本质上是一个类 string和char * 区别&#xff1a; char * 是一个指针 string是一个类&#xff0c;类内部封装了char*&#xff0c;管理这个字符串&#xff0c;是一个char*型的容器。 1.2 特点…

Unity类银河恶魔城学习记录5-1.5-2 P62-63 Creating Player Manager and Skill Manager源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili PlayerManager.cs using System.Collections; using System.Collections.G…

ClickHouse的优缺点和应用场景

当业务场景需要一个大批量、快速的、可支持聚合运算的数据库&#xff0c;那么可选择ClickHouse。 选择ClickHouse 的原因&#xff1a; 记录类型类似于LOG&#xff0c;读取、运算远远大于写入操作选取有限列&#xff0c;对近千万条数据&#xff0c;快算的运算出结果。数据批量…

内网穿透工具

1. nps-npc 1.1 简介 nps是一款轻量级、高性能、功能强大的内网穿透代理服务器。目前支持tcp、udp流量转发&#xff0c;可支持任何tcp、udp上层协议&#xff08;访问内网网站、本地支付接口调试、ssh访问、远程桌面&#xff0c;内网dns解析等等……&#xff09;&#xff0c…

Golang数据库编程详解 | 深入浅出Go语言原生数据库编程

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站https://www.captainbed.cn/kitie。 Golang学习专栏&#xff1a;https://blog.csdn.net/qq_35716689/category_12575301.html 前言 对数据库…

OLED调试简介

文章目录 一、介绍调试方法介绍OLED简介硬件电路OLED驱动函数 二、操作连接线路使用驱动函数显示内容 OLED.c的内容 一、介绍 调试方法介绍 OLED简介 硬件电路 OLED驱动函数 二、操作 连接线路 因为这两个引脚不做配置是浮空状态&#xff0c;在这里直接用电源给OLED供电 使…

【leetcode热题100】搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。…

python实现中国剩余定理

中国剩余定理又称孙子定理&#xff0c;是数论中一个重要定理。最早可见于我国的数学著作《孙子算经》卷下“物不知数”问题&#xff0c;原文如下&#xff1a; 有物不知其数&#xff0c;三三数之剩二&#xff0c;五五数之剩三&#xff0c;七七数之剩二。问物几何&#xff1f;即…

2024-02-04(hive)

1.Hive中的分区表 可以选择字段作为表分区。 分区其实就是HDFS上的不同文件夹。 分区表可以极大的提高特定场景下Hive的操作性能。 2.分区语法 create table tablename(...) partitioned by (分区列 列类型, ...) row format delimited fields terminated by ; 3.Hive中的…

《向量数据库指南》——Milvus Cloud「删除」:眼见未必为实

“执行 Collection 中的 delete 操作后,再次调用 num_entities 检查集合中的数据的条数,和删除前一致, delete 不能从物理层面上删除数据吗?”“删除的数据还能被查到是为什么?”“请问下删除 collection 后,磁盘大小没有恢复,该怎么处理?”社区中关于“删除”讨论最多…

ppi rust开发 python调用

创建python的一个测试工程 python -m venv venv .\venv\Scripts\activatepip install cffi创建一个rust的lib项目 cargo new --lib pyrustlib.rs #[no_mangle] pub extern "C" fn rust_add(x: i32, y: i32) -> i32 {x y }Cargo.toml [package] name "p…

【算法】递归入门

文章目录 一、基础知识二、刷题实战1. 汉诺塔问题2. 合并两个有序链表3. 反转链表4. 快速幂 三、技巧总结 一、基础知识 什么是递归&#xff1a; 函数自己调用自己 什么时候能用递归&#xff1a; 有重复子问题 如何看待递归函数&#xff1a; 看作一个黑盒 如何编写递归代码…

Allergo_17_4安装记录

习惯用Allergo软件中的Orcad组件来画原理图&#xff0c;画PCB用PADS PADS的安装记录参考&#xff1a;PADS VX 2.7安装记录-CSDN博客 一、资源&#xff1a; 资源&#xff1a;百度云安装包&#xff1a;Cadence SPB 17.4-2019 安装包 提取码&#xff1a;ajow 二、安装 2.1 右键…

链表算法练习

1、206-单链表反转 思路1:在链表上直接反转&#xff0c;只是需要一个节点存储剩余部分的链表指针 时间复杂度&#xff1a;O(n) 空间复杂度&#xff1a;O(1) const listNode (val,next) >{this.val val;this.next next; }const reverseList (head) >{if(!head || !hea…

百面嵌入式专栏(面试题)C语言面试题22道

沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇我们将介绍C语言相关面试题 。 宏定义是在编译的哪个阶段被处理的?答案:宏定义是在编译预处理阶段被处理的。 解读:编译预处理:头文件包含、宏替换、条件编译、去除注释、添加行号。 写一个“标准”宏MIN,这个…

React中的Props:传递数据与组件通信

在React程序中&#xff0c;Props&#xff08;属性&#xff09;是组件之间通信的核心机制之一。Props允许将数据从一个组件传递到另一个组件&#xff0c;并在整个应用程序中有效地管理状态和行为。本文将探讨React中的Props&#xff0c;包括其基本概念和用法。 什么是Props&…

c#表达式树(MemberInitExpression)成员初始化表达式

在 C# 中&#xff0c;表达式树是表示代码中的表达式的一种抽象表示形式。它可以用于在运行时动态地构建、分析和执行代码。表达式树提供了一种方式来表示代码中的表达式&#xff0c;而不是直接执行它们。 成员初始化也可以在表达式树中使用&#xff0c;通过表达式树&#xff0…

备战蓝桥杯---搜索(进阶3)

看一道比较难又有趣的题&#xff1a; 下面是分析&#xff1a; 我们不妨把属性值看成点&#xff0c;一个装备可以看成一条边&#xff08;只能选一个端点&#xff09;不存在有装备属性值的当成一个点&#xff0c;于是我们便形成了树或图&#xff0c;如果是树的话&#xff0c;有一…

2024年的VUE2下的无效指令npm install --save vue-i18n

vue官网已经声明了不再维护vue2, vue-i18n安装依赖的时候就只接安装vue3的vue-i18, 直接报错&#xff1a; > npm install --save vue-i18n npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: yudao-ui-admin…