CSS3--美开二度

免责声明:本文仅做分享!

目录

 定位

相对定位

绝对定位

定位居中

固定定位

堆叠层级 z-index

定位-小结

CSS 精灵

京东案例

字体图标

下载字体

使用字体

 上传矢量图

CSS 修饰属性

垂直对齐方式 vertical-align

过渡 transition

透明度 opacity

光标类型 cursor

轮播图


定位、CSS 高级技巧、修饰属性


 定位

灵活改变盒子的位置。

相对定位

 position: relative

      1. 改变位置的参照物是 自己原来的位置

      2. 不脱标,占位 (自己挪走,别人也占不了)

      3. 标签显示模式特点 不变


绝对定位

position: absolute

子级绝对定位,父级相对定位

(子级无论怎么改变,都会显示在父级里面)

      1. 脱标,不占位

      2. 参照物:先找最近的已经定位的祖先元素;如果所有祖先元素都没有定位,参照浏览器可视区改位置

      3. 显示模式特点改变:宽高生效(具备了行内块的特点)


定位居中

实现步骤:

1. 绝对定位

2. 水平、垂直边偏移为 50%

3. 子级向左、上移动自身尺寸的一半

• 左、上的外边距为  --- 尺寸的一半

transform: translate(-50%, -50%)

    img {position: absolute;left: 50%;top: 50%;/* margin-left: -265px;margin-top: -127px; *//*   50% 就是自己宽高的一半 */transform: translate(-50%, -50%);}

-->在浏览器中间显示。


固定定位

position: fixed

--无论怎么滚动,都不动!

  1. 脱标,不占位

  2. 参照物:浏览器窗口

  3. 显示模式特点 具备行内块特点


堆叠层级 z-index

按照标签书写顺序,后来者居上.   改变元素显示顺序。

z-index: 

值 --> 整数数字(默认值为0,取值越大,层级越高)


定位-小结

子绝 父相


CSS 精灵

CSS 精灵,也叫 CSS Sprites,是一种网页图片应用处理方式

把网页中一些背景图片整合到一张图片文件中,再 background-position 精确的定位出背景图片的位置。

---减少服务器被请求次数,减轻服务器的压力,提高页面加载速度!!!

(多张图片整合到一张图片时,用到哪个图片就定位显示。)

实现步骤:

1. 创建盒子,盒子尺寸与小图尺寸相同

2. 设置盒子背景图为精灵图

3. 添加 background-position 属性,改变背景图位置

        3.1 使用 PxCook 测量小图片左上角坐标

        3.2 取负数坐标为 background-position 属性值(向左上移动图片位置)


京东案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东案例</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}.service {margin: 100px 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(./images/sprite.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>品类齐全,轻松购物</p></li><li><h5></h5><p>多仓直发,极速配送</p></li><li><h5></h5><p>正品行货,精致服务</p></li><li><h5></h5><p>天天低价,畅选无忧</p></li></ul></div>
</body></html>

字体图标

字体图标:展示的是图标,本质是体。

作用:在网页中添加简单的、颜色单一的小图标。

优点:

Ø 灵活性:灵活地修改样式,例如:尺寸、颜色等

Ø 轻量级:体积小、渲染快、降低服务器请求次数

Ø 兼容性:几乎兼容所有主流浏览器

Ø 使用方便:先下载再使用


下载字体

iconfont 图标库:https://www.iconfont.cn/

iconfont-阿里巴巴矢量图标库

---加入购物车,下载到本地


使用字体

1. 引入字体样式表(iconfont.css

2. 标签使用字体图标类名:

        1. iconfont:字体图标基本样式(字体名,字体大小等等)

        2. icon-xxx:图标对应的类名


 上传矢量图

项目特有的图标上传到 iconfont 图标库,生成字体。

.svg

--上传后,以后直接下载使用就可以了。


CSS 修饰属性

垂直对齐方式 vertical-align

vertical-align

(图像和文字不齐)

---》文字都有一个基线要对齐。


过渡 transition

可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名:transition(复合属性)

属性值:过渡的属性 花费时间 (s)

提示:

• 过渡的属性可以是具体的 CSS 属性

• 也可以为 all(两个状态属性值不同的所有属性,都产生过渡效果)

• transition 设置给元素本身


透明度 opacity

设置整个元素的透明度(包含背景和内容)

属性名:opacity

属性值:0 – 1

• 0:完全透明(元素不可见)

• 1:不透明

• 0-1之间小数:半透明


光标类型 cursor

作用:鼠标悬停在元素上时指针显示样式

属性名:cursor

属性值


轮播图

无js版

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}/* banner */.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: #ff5000;}</style>
</head><body><div class="banner"><!-- 图: ul > li --><ul><li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li><li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li><li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li></ul><!-- 箭头 --><!-- 上一张 prev --><a href="#" class="prev"><i class="iconfont icon-zuoce"></i></a><!-- 下一张 next --><a href="#" class="next"><i class="iconfont icon-youce"></i></a><!-- 圆点 --><ol><li></li><li class="active"></li><li></li></ol></div>
</body></html>

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

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

相关文章

二、kafka生产与消费全流程

一、使用java代码生产、消费消息 1、生产者 package com.allwe.client.simple;import lombok.extern.slf4j.Slf4j; import org.apache.kafka.clients.producer.KafkaProducer; import org.apache.kafka.clients.producer.ProducerConfig; import org.apache.kafka.clients.pr…

C# 游戏引擎中的协程

前言 书接上回&#xff0c;我谈到了Unity中的协程的重要性&#xff0c;虽然协程不是游戏开发“必要的”&#xff0c;但是它可以在很多地方发挥优势。 为了在Godot找回熟悉的Unity协程开发手感&#xff0c;不得不自己做一个协程系统&#xff0c;幸运的是&#xff0c;有了Unity的…

TI DSP TMS320F280025 Note15:串口SCI的使用

TMS320F280025 串口SCI的使用 ` 文章目录 TMS320F280025 串口SCI的使用框图分析串口特点可编程数据格式SCI端口中断非FIFO/FIFO模式下SCI中断的操作/配置UartDriver.cUartDriver.h串口时钟由PCLKCR7控制使能,默认位系统时钟4分频 串口接收与发送都可以触发中断 串口使用的引脚…

JAVA并发编程高级——JDK 新增的原子操作类 LongAdder

LongAdder 简单介绍 前面讲过,AtomicLong通过CAS提供了非阻塞的原子性操作,相比使用阻塞算法的同步器来说它的性能已经很好了,但是JDK开发组并不满足于此。使用AtomicLong 时,在高并发下大量线程会同时去竞争更新同一个原子变量,但是由于同时只有一个线程的CAS操作会成功,…

【C语言】指针篇 | 万字笔记

写在前面 在学习C语言过程&#xff0c;总有一个要点难点离不开&#xff0c;那就是大名鼎鼎的C语言指针&#xff0c;也是应为有指针的存在&#xff0c;使得C语言一直长盛不衰。因此不才把指针所学的所有功力都转换成这个笔记。希望对您有帮助&#x1f970;&#x1f970; 学习指…

基于Springboot+Vue的饮食营养管理信息系统(含源码数据库)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统中…

Hystrix学习

系列文章目录 JavaSE基础知识、数据类型学习万年历项目代码逻辑训练习题代码逻辑训练习题方法、数组学习图书管理系统项目面向对象编程&#xff1a;封装、继承、多态学习封装继承多态习题常用类、包装类、异常处理机制学习集合学习IO流、多线程学习仓库管理系统JavaSE项目员工…

MAC M1 安装brew 配置环境变量,安装dart

一. 下载 brew 1. 终端输入 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. 如遇到下载失败情况&#xff0c;需要VPN/代理 curl: (7) Failed to connect to raw.githubusercontent.com port 443 after 8 m…

MongoDB简介

1、说到MongoDB就必须说下什么是NoSQL? NoSQL(NoSQL Not Only SQL)&#xff0c;意即反SQL运动&#xff0c;指的是非关系型的数据库&#xff0c;是一项全新的数据库革命性运动&#xff0c;早期就有人提出&#xff0c;发展至2009年趋势越发高涨。NoSQL的拥护者们提倡运用非关系…

Java | Leetcode Java题解之第454题四数相加II

题目&#xff1a; 题解&#xff1a; class Solution {public int fourSumCount(int[] A, int[] B, int[] C, int[] D) {Map<Integer, Integer> countAB new HashMap<Integer, Integer>();for (int u : A) {for (int v : B) {countAB.put(u v, countAB.getOrDefa…

被字节恶心到了

字节 日常逛 xhs 看到一篇吐槽贴&#xff0c;表示被公司恶心到了&#xff1a; 这位网友表示&#xff0c;最近是公司举办了 Q2 和 H1 的优秀员工表彰&#xff0c;自己的 1&#xff08;直属领导&#xff09;评上了&#xff0c;但仔细一看&#xff0c;1 获奖的所有产出都是自己的&…

实时数字人DH_live使用案例

参看: https://github.com/kleinlee/DH_live ubuntu 测试 apt install ffmpeg 下载安装: git clone https://github.com/kleinlee/DH_live.git cd DH_liveconda create -n dh_live python=3.12 conda activate dh_live pip install -r requirements.txt pip install torch …

突发:Sam万字长文,OpenAI o1超越人类,o1模型训练原理、微调、能力来源-AI已死,大模型当立

OpenAl o1大模型&#xff1a;原理、突破、前景及影响 北京时间2024年9月13日凌晨&#xff0c;OpenAI正式发布了新的人工智能模型o1&#xff08;o是orion猎户座&#xff0c;1代表从头再来&#xff0c;也意味着后续将出现更多序列&#xff09;&#xff0c;就是此前OpenAI一直在高…

银河麒麟V10 SP1如何进入救援模式?

银河麒麟V10 SP1如何进入救援模式&#xff1f; 1、准备工作2、进入BIOS/UEFI进入救援模式注意事项 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在使用银河麒麟高级服务器操作系统V10 SP1时&#xff0c;如果遇到系统无法正常启动或需要进…

240 搜索二维矩阵 II

解题思路&#xff1a; \qquad 解这道题最重要的是如何利用从左到右、从上到下为升序的性质&#xff0c;快速找到目标元素。 \qquad 如果从左上角开始查找&#xff0c;如果当前matrix[i][[j] < target&#xff0c;可以向右、向下扩展元素都是升序&#xff0c;但选择哪个方向…

.Net 6.0 监听Windows网络状态切换

上次发了一个文章获取windows网络状态&#xff0c;判断是否可以访问互联网。传送门&#xff1a;获取本机网络状态 这次我们监听网络状态切换&#xff0c;具体代码如下&#xff1a; public class WindowsNetworkHelper {private static Action<bool>? _NetworkStatusCh…

初步认识产品经理

产品经理 思考问题的维度 1️⃣为什么要抓住核心用户&#xff1f; 所有和产品有关系的群体就是用户&#xff0c;存在共性和差异了解用户的付费点&#xff0c;更好的优化产品是否使用&#xff1a;&#xff08;目标用户-已使用产品&#xff1a;种子用户-尝鲜&#xff1b;核心用…

【在Linux世界中追寻伟大的One Piece】命名管道

目录 1 -> 命名管道 1.1 -> 创建一个命名管道 1.2 -> 匿名管道与命名管道的区别 1.3 -> 命名管道的打开规则 1.4 -> 例子 1 -> 命名管道 管道应用的一个限制就是只能在具有共同祖先(具有亲缘关系)的进程间通信。如果我们想在不相关的进程之间交换数据&…

C++多重继承

C多重继承 一个类可以从多个类继承&#xff0c;只需在类的基类列表中&#xff08;即冒号后&#xff09;指定更多的基类&#xff0c;用逗号分隔即可。例如&#xff0c;如果程序有一个名为Output的特定类要在屏幕上打印&#xff0c;我们希望派生类Rectangle&#xff08;长方形&a…

Netgear-WN604 downloadFile.php 信息泄露复现(CVE-2024-6646)

0x01 产品描述&#xff1a; NETGEAR WN604是一款功能强大的双频AC1200无线路由器,非常适合中大型家庭和企业使用。它支持最新的802.11ac无线标准,能提供高达1200Mbps的无线传输速度。路由器具备千兆有线网口和3个100Mbps有线网口,可满足有线和无线设备的接入需求。此外,它还内置…