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

advanced-css: No.1

news 2026/4/11 0:18:23
  • 本套教程学习来自视频：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

避开风控！影刀RPA抓取小红书评论的保姆级配置指南（含60秒间隔、Excel文本格式设置）

影刀RPA小红书评论采集实战&#xff1a;高稳定性配置与风控规避手册 第一次用影刀RPA抓取小红书评论时&#xff0c;我连续被封了三个账号——因为没意识到平台对高频请求的敏感度。后来通过反复测试发现&#xff0c;间隔时间设置差5秒就可能触发完全不同的风控等级。这份指南将…...

编程新知 2026/4/10 23:38:16

体系结构论文（104）：AscendKernelGen: A Systematic Study of LLM-Based Kernel Generation for Neural Processing

AscendKernelGen: A Systematic Study of LLM-Based Kernel Generation for Neural Processing Units 【华为26年paper】这篇文章在讲什么这篇文章研究的是&#xff1a;能不能让大语言模型替人写 NPU 内核代码&#xff0c;而且写出来的不只是“像代码”&#xff0c;而是真的能编…...

编程新知 2026/4/10 22:47:23

Horizon UAG配置踩坑实录：为什么你的连接服务器状态总是红色？

Horizon UAG配置实战&#xff1a;从红色警报到绿色畅通的完整指南 当你盯着Horizon UAG管理界面那个刺眼的红色连接状态时&#xff0c;那种挫败感我深有体会。作为企业虚拟桌面架构的关键组件&#xff0c;UAG网关服务器的配置问题可能导致整个远程办公系统瘫痪。本文将带你深入…...

编程新知 2026/4/10 22:43:22

Qwen3.5-9B-AWQ-4bit企业应用案例：电商商品图智能标签生成实操

Qwen3.5-9B-AWQ-4bit企业应用案例&#xff1a;电商商品图智能标签生成实操 1. 电商商品标签的痛点与解决方案 在电商运营中&#xff0c;商品图片标签是影响搜索排名和转化率的关键因素。传统的人工打标方式面临三大挑战&#xff1a; 效率瓶颈&#xff1a;一个运营人员每天最…...

编程新知 2026/4/10 22:28:52

计算机毕业设计：Python智慧天气数据采集与可视化系统 Django框架 线性回归 数据分析 大数据 机器学习 大模型 气象数据（建议收藏）✅

博主介绍&#xff1a;✌全网粉丝50W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业项目实战8年之久&#xff0c;选择我们就是选择放心、选择安心毕业✌ > &#x1f345;想要获取完整文章或者源码&#xff0c;或者代做&#xff0c;拉到文章底部即可与…...

编程新知 2026/4/10 21:18:23

Wonder3D终极指南：如何用一张图片快速创建专业3D模型

Wonder3D终极指南&#xff1a;如何用一张图片快速创建专业3D模型 【免费下载链接】Wonder3D Single Image to 3D using Cross-Domain Diffusion for 3D Generation 项目地址: https://gitcode.com/gh_mirrors/wo/Wonder3D 还在为复杂的3D建模软件而烦恼吗&#xff1f;Wo…...

编程新知 2026/4/10 20:13:02

RMCP任务管理完整教程：实现异步工具调用生命周期

RMCP任务管理完整教程&#xff1a;实现异步工具调用生命周期 【免费下载链接】rust-sdk The official Rust SDK for the Model Context Protocol 项目地址: https://gitcode.com/gh_mirrors/rusts/rust-sdk RMCP任务管理是现代AI应用开发中的核心技术&#xff0c;它允许…...

编程新知 2026/4/10 20:06:56

2026奇点大会AI部署白皮书深度解密（Kubernetes+LLM Runtime双栈融合架构首次公开）

第一章&#xff1a;2026奇点智能技术大会&#xff1a;AI原生容器化部署 2026奇点智能技术大会(https://ml-summit.org) AI原生容器化部署已成为大模型服务落地的核心范式。与传统微服务容器化不同&#xff0c;AI原生部署需同时满足GPU资源弹性调度、模型权重分片加载、推理请求…...

编程新知 2026/4/10 19:32:54

企业级OpenClaw集中部署安全架构避坑全攻略

只需1小时全链路加固&#xff0c;让OpenClaw稳定上线、合规无忧 在一次大型制造业项目中&#xff0c;某金融客户耗时三个月完成OpenClaw功能对接&#xff0c;却因忽略安全配置&#xff0c;半天内被黑客扫光知识库、篡改AI流程&#xff0c;直接触发合规问责。你是否也担心“一装…...

编程新知 2026/4/10 19:08:45

Venera漫画应用：开源漫画聚合阅读器的完整实战指南

Venera漫画应用&#xff1a;开源漫画聚合阅读器的完整实战指南 【免费下载链接】venera A comic app 项目地址: https://gitcode.com/gh_mirrors/ve/venera 在数字漫画阅读的广阔世界里&#xff0c;你是否曾为寻找一款既能阅读本地漫画、又能聚合全网资源的应用而烦恼&a…...

编程新知 2026/4/10 18:50:32