当前位置： 首页 > news >正文

advanced-css: No.1

news 2026/2/10 20:58:41
  • 本套教程学习来自视频：https://www.bilibili.com/video/BV1n94y1o7yS/?p=7&spm_id_from=pageDriver&vd_source=b79be8283df9418cb45941cc0bd583c6

案例

实现效果图

在这里插入图片描述

代码

HTML:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet"><link rel="stylesheet" href="css/icon-font.css"><link rel="stylesheet" href="css/style.css"><link rel="shortcut icon" type="image/png" href="img/favicon.png"><title>Natours | Exciting tours for adventurous people</title></head><body><header class="header"><div class="logo-box"><img src="img/logo-white.png" alt="Logo" class="logo"></div><div class="text-box"><h1 class="heading-primary"><span class="heading-primary-main">outdoors</span><span class="heading-primary-sub">is where life happiness</span></h1></div></header></body>
</html>

CSS:

* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: "Lato", sans-serif;font-weight: 400;font-size: 16px;line-height: 1.7;color: #777;padding: 30px;
}.header {height: 95vh;background-image: linear-gradient(to right bottom, rgba(128, 214, 113, 0.804), rgba(39, 180, 133, 0.8)), url(../img/hero.jpg);background-size: cover;background-position: top;clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);position: relative;
}.logo-box {position: absolute;top: 40px;left: 40px;
}.logo {width: 80px;
}.text-box {position: absolute;left: 50%;top: 40%;transform: translate(-50%, -50%);
}.heading-primary {color: #fff;text-transform: uppercase;
}.heading-primary-main {display: block;font-size: 60px;font-weight: 700;letter-spacing: 30px;
}.heading-primary-sub {display: block;font-size: 16px;font-weight: 700;letter-spacing: 15.7px;
}

相关知识

clip-path

使用裁剪方式创建元素的可显示区域

相关文章：

advanced-css: No.1

本套教程学习来自视频&#xff1a;https://www.bilibili.com/video/BV1n94y1o7yS/?p7&spm_id_frompageDriver&vd_sourceb79be8283df9418cb45941cc0bd583c6 案例 实现效果图 代码 HTML: <!DOCTYPE html> <html lang"en"><head><meta c…...

编程日记 2023/11/12 23:08:31

最新宝塔面板第三方云端站点程序源码/第三方宝塔面板PHP源码/全开源ThinkPHP框架

源码简介&#xff1a; 实现宝塔面板第三方云端站点程序源码,这个是第三方宝塔面板 btcloud PHP源码&#xff0c;它还有云端使用记录、IP黑白名单、定时任务等功能。 这是一个使用PHP开发的宝塔面板第三方云端站点程序。 您可以利用此程序搭建属于自己的宝塔面板第三方云端&a…...

编程日记 2023/11/12 23:07:30

【Unity之UI编程】玩法面板的实现

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;UI_…...

编程日记 2023/11/12 23:05:29

栈和队列：栈

栈的概念&#xff1a; 栈&#xff1a; 一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。 栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。…...

编程日记 2023/11/12 23:04:28

由浅入深学习统计学 - 常用统计图形学习

学习笔记 第一章- 信息图形化 图形化&#xff08;可视化&#xff09; 在一堆数据中&#xff0c;自己发现了这些数据的规律&#xff0c;但是无法表述给其他人知道&#xff0c;图形化就是便于他人理解数据的规律的展示的手段。 或者说我们也可以从统计的数据图形中发现某些没有…...

编程日记 2023/11/12 23:02:26

【java进阶】集合的三种遍历(迭代器、增强for、Lambda)

目录 一、先谈集合&#xff1a; 二、单列集合的三种遍历方式 迭代器遍历 增强for遍历 Lambda表达式遍历 一、先谈集合&#xff1a; &#x1f525;那我们平常用for循环依赖下标遍历不行嘛&#xff0c;这就与集合的分类有关了。 集合的体系结构&#xff1a; collection是单…...

编程日记 2023/11/12 23:00:24

Qt实现动态桌面小精灵（含源码）

目录 一、设计思路 二、部分源码演示 三、源码地址 🌈write in front🌈 🧸大家好，我是三雷科技.希望你看完之后，能对你有所帮助，不足请指正！共同学习交流. 🆔本文由三雷科技原创 CSDN首发🐒 如需转载还请通知⚠️ 📝个人主页：三雷科技🧸—CSDN博客 🎁欢…...

编程日记 2023/11/12 22:59:23

Qt 自定义分页控件

目录 前言1、功能描述2、代码实现2.1 ui文件2.1 头文件2.2 源码文件2.3 设计思路 4、示例5、总结 前言 在应用程序开发时经常会遇到数据分页的需求&#xff0c;每一页展示特定数量的数据&#xff0c;通过点击按钮翻页或者输入页码跳转到指定页。 本文介绍一个自定义分页控件&a…...

编程日记 2023/11/12 22:58:21

Java中的7大设计原则

在面向对象的设计过程中&#xff0c;首先需要考虑的是如何同时提高一个软件系统的可维护性和可复用性。这时&#xff0c;遵从面向对象的设计原则&#xff0c;可以在进行设计方案时减少错误设计的产生&#xff0c;从不同的角度提升一个软件结构的设计水平。 1、单一职责 一个类…...

编程日记 2023/11/12 22:56:18

Spring Cloud和Kubernetes + Spring Boot 用哪个？

Spring Cloud和Kubernetes Spring Boot都是用于构建微服务架构的解决方案&#xff0c;它们各有优势和不足&#xff0c;选择哪个更好取决于你的具体需求和上下文。 Spring Cloud是一个基于Spring Boot的微服务开发框架&#xff0c;它提供了一套完整的微服务解决方案&#xff0…...

编程日记 2023/11/12 22:53:14

web-worker 基本使用

Web Workers 是浏览器中的一项技术&#xff0c;它允许在独立的线程中运行 JavaScript 代码&#xff0c;从而避免主线程阻塞。这对于执行长时间运行的计算、处理大量数据或执行其他 CPU 密集型任务非常有用。下面是一个简单的使用 Web Workers 的示例&#xff0c;包括主线程和工…...

编程日记 2023/11/12 22:52:13

SpringBoot使用@PropertySource读取 properties 配置

SpringBoot使用PropertySource读取 properties 配置 properties配置文件 在resources文件夹下&#xff0c;新建一个文件 property-demo.properties&#xff0c; 示例如下&#xff1a; my.config.test.namewumy.config.test.id123配置的类 PropertySource 指定配置文件。 c…...

编程日记 2023/11/12 22:51:12

100天精通风控建模(原理+Python实现)——第5天：风控建模中数据标准化是什么？

风控模型已在各大银行和公司都实际运用于业务，用于营销和风险控制等。    之前已经阐述了100天精通风控建模(原理+Python实现)——第1天：什么是风控建模？    100天精通风控建模(原理+Python实现)——第2天：风控建模有什么目的？    100天精通风控建模(原理+Python实现…...

编程日记 2023/11/12 22:49:11

find和grep命令的简单使用

find和grep命令的简单使用 一、find例子--不同条件查找 二、grep正则表达式的简单说明例子--简单文本查找例子--结合管道进行查找 一、find find 命令在指定的目录下查找对应的文件。 find [path] [expression]● path 是要查找的目录路径&#xff0c;可以是一个目录或文件名…...

编程日记 2023/11/12 22:47:10

力扣：164. 最大间距（Python3）

题目&#xff1a; 给定一个无序的数组 nums&#xff0c;返回 数组在排序之后&#xff0c;相邻元素之间最大的差值 。如果数组元素个数小于 2&#xff0c;则返回 0 。 您必须编写一个在「线性时间」内运行并使用「线性额外空间」的算法。 来源&#xff1a;力扣&#xff08;LeetC…...

编程日记 2023/11/12 22:46:09

游戏平台采集数据

首先&#xff0c;你需要在你的项目中添加Kotlin的网络库&#xff0c;例如OkHttp。你可以在你的build.gradle文件中添加以下依赖&#xff1a; dependencies {implementation com.squareup.okhttp3:okhttp:4.9.0 }然后&#xff0c;你可以使用以下代码来创建一个基本的网络爬虫&a…...

编程日记 2023/11/12 22:45:07

CSS让两个标签在同一行显示并自适应宽度

CSS让两个标签在同一行显示并自适应宽度 示例&#xff1a;svg 和 span 在同一行上并自适应宽度 使用 Flexbox 布局 HTML <div class"flex-container"><svg class"svg-icon" aria-hidden"true"><use :xlink:href"#icon-s…...

编程日记 2023/11/12 22:44:06

Leetcode154. Find Minimum in Rotated Sorted Array II

旋转数组找最小&#xff0c;这次值可以重复 不妨假设你已经做了上一题&#xff0c;题解 上一题的方法1肯定是用不了了&#xff0c;因为不再能完全分成2个不同的部分 所以我们沿着方法2走 如果 > n u m s [ r ] >nums[r] >nums[r]&#xff0c;我们依然可以找右半边 …...

编程日记 2023/11/12 22:43:05

【分析思路】测试数据分析思路

测试数据分析思路&#xff1a; 性能数据 对性能测试数据进行分析时&#xff0c;可以从以下几个维度进行比较&#xff1a; 响应时间&#xff08;Response Time&#xff09;&#xff1a;分析每一天的响应时间数据&#xff0c;可以查看系统在不同时间段的性能表现&#xff0c;是…...

编程日记 2023/11/12 22:42:04

链表的实现（文末附完整代码）

链表的概念及结构 链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的 我们在上一篇文章所学习的顺序表是连续存储的 例如&#xff1a; 顺序表就好比火车上的一排座位&#xff0c;是连续的 而链表就好比是火车…...

编程日记 2023/11/12 22:41:03

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2026/2/9 13:51:46

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/2/4 16:07:02

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2026/1/13 7:39:19

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20