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

advanced-css: No.1

news 2025/11/19 11:10:30
  • 本套教程学习来自视频：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

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/11/17 8:04:30

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/11/16 22:19:32

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/11/17 0:16:24

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/9/30 16:13:37

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/11/17 3:11:58

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/11/17 10:00:36

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/11/1 2:00:51

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11

第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...

编程新知 2025/11/16 22:10:56