前端学习-day08

文章目录

    • 01-相对定位
    • 02-绝对定位
    • 03-绝对定位居中
    • 04-固定定位
    • 05-堆叠顺序
    • 06-CSS精灵-基本使用
    • 07-案例-京东服务
    • 08-字体图标
    • 10.垂直对齐方式
    • 11-过度
    • 12-透明度
    • 13-光标类型
    • 14-轮播图

01-相对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 一般不使用相对定位 */*{margin: 0;padding: 0;}/* 1.改变位置的参照物是自己原来的位置。2.不脱标,占位。3.标签显示特点不发生改变。*/div{position: relative;top: 100px;left: 200px;}</style>
</head>
<body><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><div><img src="./20.jpg" alt=""></div><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p></body>
</html>

在这里插入图片描述

02-绝对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 子绝父相 */*{margin: 0;padding: 0;}img{width: 400px;}.news{position: relative;margin: 100px auto;width: 400px;height: 350px;background-color: #fff;}/* 1.脱标,不占位置2.参照物:先找最近的已定位的祖先元素,如果所有祖先元素都没有定位,参照浏览器窗口改位置3.显示模块特点改变:具备行内块的特点*/.news span{position: absolute;top: 0px;right: 0px;display: block;width: 92px;height: 32px;background-color: rgba(0,0,0,0.6);text-align: center;line-height: 32px;color: #fff;}</style>
</head>
<body><div class="news"><!-- 300*266 --><img src="./20.jpg" alt=""><span>展会活动</span><h4>djnj </h4></div>
</body>
</html>

在这里插入图片描述

03-绝对定位居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{position: absolute;left: 50%;top: 50%;/*上述代码会让图片的左上角出现在页面中心。下面的代码是需要对他进行移动  *//* margin-left: -150px; *//* margin-top: -133px; */transform: translate(-50%,-50%);}</style>
</head>
<body><img src="./20.jpg" alt="">
</body>
</html>

在这里插入图片描述

04-固定定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 一般不使用相对定位 */*{margin: 0;padding: 0;}body{width: 100%;}/* 1.脱标:不占位2.参照物:浏览器窗口3.具备行内块的特点(但是我这里修改之后没生效)*/div{position: fixed;top: 0;left: 0;width: 20px;}</style>
</head>
<body><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><div><img src="./20.jpg" alt=""></div><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p><p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于20242月发表在Nature旗下子刊《Scientific Reports》上。</p></body>
</html>

在这里插入图片描述

05-堆叠顺序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{position: absolute;/* 如果不修改,这个蓝色会把粉色覆盖掉,这就叫后来者居上 */width: 200px;height: 200px;}.box1{background-color: pink;z-index: 1;/* 谁的index属性值大,就不会被盖住 */}.box2{background-color: skyblue;left: 100px;top: 100px;z-index: 2;}</style>
</head>
<body><div class="box1">box1</div><div class="box2">box2</div>
</body>
</html>

在这里插入图片描述

06-CSS精灵-基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 102px;height: 118px;background-color: pink;background-image: url(./21.png);/* 231  142 */background-position: -231px -142px;}</style>
</head>
<body><!-- 1.创建盒子:盒子尺寸和想要显示的小图一样大2.给盒子设置背景图为精灵图3.调整位置--><div></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

07-案例-京东服务

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}li{list-style: none;}.service{margin: 50px auto;width: 1190px;height: 42px;/* background-color: pink; */}.service ul{display: flex;}.service li{display: flex;padding-left: 40px;width: 297px;height: 42px;/* background-color: skyblue; */}.service li h5{margin-right: 10px;width: 36px;height: 42px;/* background-color: pink; */background: url(./22.png) 0 -192px;}.service li:nth-child(2) h5{background-position: -41px -192px;}.service li:nth-child(3) h5{background-position: -82px -192px;}.service li:nth-child(4) h5{background-position: -123px -192px;}.service li p{font-size: 18px;color: #444;font-weight: 700;line-height: 42px;}</style>
</head>
<body><div class="service"><ul><li><h5></h5><p>jsdj间距你先</p></li><li><h5></h5><p>jsdj间距你先</p></li><li><h5></h5><p>jsdj间距你先</p></li><li><h5></h5><p>jsdj间距你先</p></li></ul></div>
</body>
</html>

在这里插入图片描述

08-字体图标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>/* 注意:如果要调整字体大小,选择器的优先级要高于iconfontlei*/.iconfont{font-size: 200px;color: red;}</style>
</head>
<body><span class="iconfont icon-xihuan"></span>
</body>
</html>

在这里插入图片描述

10.垂直对齐方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 1px solid #000;}img{/* 这一步可以使得字体垂直居中,消除img下的空隙 *//* vertical-align: middle; *//* vertical-align: top; *//* vertical-align: bottom; *//* 为什么改变display就可以把下面的空隙删除:img是行内块,浏览器会把行内块(行内标签)当成字处理,会按照基线处理,所以有缝隙 */display: block;}</style>
</head>
<body><div><img src="./20.jpg" alt=""><!-- Hhbh笔记本举报B接纳你尽快的解决农村的 --></div>
</body>
</html>

在这里插入图片描述

11-过度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 200px;height: 300px;transition: all 1s;}img:hover{width: 300px;height: 500px;}</style>
</head>
<body><img src="./20.jpg" alt="">
</body>
</html>

请添加图片描述

12-透明度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 500px;height: 500px;background-color: pink;opacity: 0;opacity: 1;opacity: 0.5;}</style>
</head>
<body><div><img src="./20.jpg" alt=""></div>
</body>
</html>

在这里插入图片描述

13-光标类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: pink;/* 小手-提升可点击 */cursor: pointer;/* 工字型-提示可选择文字 */cursor: text;/* 十字光标-提示可移动 */cursor: move;}</style>
</head>
<body><div></div>
</body>
</html>

14-轮播图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>*{padding: 0;margin: 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);/* 给a标签设置样式 */text-decoration: none;color: white;line-height: 30px;}.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{width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px;cursor: pointer;}.banner ol .active{background-color: #ff5000;}</style>
</head>
<body><div class="banner"><!----><ul><li><a href="#"><img src="./1111.jpg" alt=""></a></li><li><a href="#"><img src="./22222.jpg" alt=""></a></li><li><a href="#"><img src="./33333.jpg" alt=""></a></li></ul><!-- 箭头 --><a href="#" class="prev"><i class="iconfont icon-fanhui"></i></a><a href="#" class="next"><i class="iconfont icon-jinru"></i></a><!-- 圆点 --><ol><li></li><li class="active"></li><li></li></ol></div>
</body>
</html>

在这里插入图片描述

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

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

相关文章

动态规划(算法)---01.斐波那契数列模型_第N个泰波那契数

前言&#xff1a; 有一个很著名的公式 “程序数据结构算法”。 算法是模型分析的一组可行的&#xff0c;确定的&#xff0c;有穷的规则。通俗的说&#xff0c;算法也可以理解为一个解题步骤&#xff0c;有一些基本运算和规定的顺序构成。但是从计算机程序设计的角度看&#xff…

【C++】牛客 ——NC138 矩阵最长递增路径

✨题目链接&#xff1a; NC138 矩阵最长递增路径 ✨题目描述 给定一个 n 行 m 列矩阵 matrix &#xff0c;矩阵内所有数均为非负整数。 你需要在矩阵中找到一条最长路径&#xff0c;使这条路径上的元素是递增的。并输出这条最长路径的长度。 这个路径必须满足以下条件&#…

【STM32项目】基于stm32智能鱼缸控制系统的设计与实现(完整工程资料源码)

实物演示效果 基于stm32智能鱼缸控制系统的设计与实现 目录&#xff1a; 实物演示效果 目录&#xff1a; 一、 绪论 1.1 项目研究目的及意义 1.1.1 选题目的 1.1.2 选题意义 1.2 国内外研究现状 1.2.1 国外发展现状 1.2.2 国内发展现状 1.3 项目研究内容 二、智能鱼缸系统总体设…

一文读懂Linux

前言 为了便于理解&#xff0c;本文从常用操作和概念开始讲起。虽然已经尽量做到简化&#xff0c;但是涉及到的内容还是有点多。在面试中&#xff0c;Linux 知识点相对于网络和操作系统等知识点而言不是那么重要&#xff0c;只需要重点掌握一些原理和命令即可。为了方便大家准…

2024年5月19日优雅草蜻蜓K知识付费系统旗舰版v1.0.9进度更新

v1.1.0更新 v1.1.0更新 2024年5月19日优雅草蜻蜓K知识付费系统旗舰版v1.0.9进度更新&#xff0c;首页体育栏目完善新增用户发布页面 开发进度 首页体育栏目完善 新增用户发布页面 新增用户登录完善 新增学习课程页面完善-过往课程数据完成 去掉其他三方登录&#xff0c;新增…

java文档管理系统的设计与实现源码(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的文档管理系统的设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 文档管理系统的…

第二证券今日投资参考:5月国产游戏版号发放 猪价加速上涨

昨日&#xff0c;两市股指盘中震荡上扬&#xff0c;沪指盘中续创年内新高&#xff0c;创业板指一度涨超1%。到收盘&#xff0c;沪指涨0.54%报3171.15点&#xff0c;深证成指涨0.43%报9750.82点&#xff0c;创业板指涨0.59%报1875.93点&#xff0c;上证50指数涨0.34%&#xff1b…

小程序-收货地址管理模块实现

页面结构代码&#xff1a; address-form.vue --->新建地址和修改地址页面 <template><view class"content"><form><!-- 表单内容 --><view class"form-item"><text class"label">收货人</text>…

登录安全分析报告:创蓝云智注册

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

# 分布式链路追踪_skywalking_学习(1)

分布式链路追踪_skywalking_学习&#xff08;1&#xff09; 一、APM 系统概述 1、什么是 APM 系统&#xff1f; APM &#xff1a;全称 Application Performance Management 即应用性能管理系统。是对企业系统即时监控以实现对应用程序性能管理和故障管理的系统化的解决方案。…

JS对象超细

目录 一、对象是什么 1.对象声明语法 2.对象有属性和方法组成 二、对象的使用 1.对象的使用 &#xff08;1&#xff09;查 &#xff08;2&#xff09;改 &#xff08;3&#xff09;增 &#xff08;4&#xff09;删&#xff08;了解&#xff09; &#xff08;5&#xf…

算网融合,移动云加速形成新质生产力

文章目录 一.移动云介绍1.政策支持2.产品介绍image-20240522164613917 二.云主机ESC使用1.实名认证2.云主机订购3.登录方式4.控制台登录5.Xshell登录6.简单使用 三.产品使用评价1.真伪测评2.产品优势 一.移动云介绍 1.政策支持 ​ 正所谓家事国事天下事&#xff0c;事事关心&…

访问列表元素

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在Python中&#xff0c;如果想将列表的内容输出也比较简单&#xff0c;可以直接使用print()函数即可。例如&#xff0c;创建一个名称为untitle的列表…

将PCD点云投影到BEV平面得到图片

前言 点云数据作为一种丰富的三维空间信息表达方式&#xff0c;通常用于自动驾驶、机器人导航和三维建模等领域。然而&#xff0c;点云数据的直观性不如二维图像&#xff0c;这限制了它在一些需要快速视觉反馈的应用场景中的使用。本文将探讨如何将点云数据转换为二维图像&…

医药进出口交易|基于SSM+vue的医药进出口交易系统的设计与实现(源码+数据库+文档)

医药进出口交易系统 目录 基于SSM&#xff0b;vue的医药进出口交易系统的设计与实现 一、前言 二、系统设计 三、系统功能设计 5.1系统登录 5.2管理员功能模块 5.3仓储部门功能模块 5.4业务部门功能模块 5.5供应部门功能模块 5.6财务部功能模块 5.7客户功能模块 …

Linux:IPC - 管道

Linux&#xff1a;IPC - 管道 管道原理匿名管道管道读写机制管道特性命名管道mkfifo指令mkfifo接口 进程间通信的目的&#xff0c;是为了让两个进程看到同一份资源&#xff0c;在Linux中&#xff0c;主要的进程间通信有管道&#xff0c;system V&#xff0c;POSIX&#xff0c;本…

adb卸载系统垃圾应用

//获取包名 输入如下代码&#xff0c;然后在打开和关闭要获取包名的app就会打印出该app的包名 adb shell am monitor //卸载系统应用 -k会保留用户数据&#xff0c;不包含-k则不会保留用户数据 adb shell pm uninstall -k --user 0 包名 &#xff08;包名一般为&#xff1a;c…

OPPO Reno12 系列正式发布,仅2699元起售

5月23日&#xff0c;OPPO发布科技潮品 Reno12 系列&#xff0c;包含 Reno12 与 Reno12 Pro&#xff0c;以超美小直屏设计&#xff0c;以及行业首发的新科技&#xff0c;引领全新潮流方向。 据「TMT星球」了解&#xff0c;首次亮相的全新配色 Reno12 「千禧银」与Reno12 Pro的「…

【华为】将eNSP导入CRT,并解决不能敲Tab问题

华为】将eNSP导入CRT&#xff0c;并解决不能敲Tab问题 eNSP导入CRT打开eNSP&#xff0c;新建一个拓扑右键启动查看串口号关联CRT成功界面 SecureCRT连接华为模拟器ensp,Tab键不能补全问题选择Options&#xff08;选项&#xff09;-- Global Options &#xff08;全局选项&#…

Java NIO 基础

Java NIO 基础 1. NIO 介绍2. NIO 三大组件2.1 Channel2.1.1 常见的 Channel2.1.2 常用方法 2.2 Buffer2.2.1 常见的 Buffer2.2.2 重要属性2.2.3 常用方法 2.3 Selector2.3.1 四种事件类型 1. NIO 介绍 NIO&#xff08;non-blocking io&#xff09;&#xff1a;非阻塞IO&#…