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

Day10-网页布局实战CSS3

news 2026/5/12 4:16:25

一补充

1 画三角形

<!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>Document</title><style>.box{width: 0;border: 5px red solid;/* 设置顶部边框线透明 */border-top-color: transparent;/* 设置左部边框线透明 */border-left-color: transparent;/* 设置右部边框线透明 */border-right-color: transparent;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

2 伪元素选择器

<!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>Document</title><style>.box{width: 200px;height: 200px;border: 1px red solid;}/* 伪元素选择器作用:在div内部创建一个伪元素before:在div主体内容之前创建伪元素after:在div主体内容之后创建伪元素*/.box::before{/* content不能省略 */content: "";/* display用来表示元素的类型 */display: block;width: 50px;height: 50px;background-color: green;}.box::after{content: "";display: block;width: 50px;height: 50px;background-color: blue;}</style>
</head>
<body><div class="box">我是一个div</div>
</body>
</html>

二定位案例

案例1-贯穿案例-回到顶部

案例2-贯穿案例-二维码弹窗

<!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>Document</title><style>.icon-ewm-box img{width: 80px;height: 80px; }.ewm-fa{position: relative;}.icon-ewm-box{width: 80px;height: 80px;position: absolute;top: 20px;left: -30px;display: none;}/* 用伪元素画三角请 */.icon-ewm-box::before{content: "";display: block;width: 0px;border: 5px solid red;margin: 0 auto;border-left-color: transparent;border-right-color: transparent;border-top-color: transparent;}/* 移动鼠标 显示三角形 */.ewm-fa:hover .icon-ewm-box{display: block;}</style>
</head>
<body><div class="icon"><img src="./images/grzx.png" alt=""><a class="ewm-fa" href=""><img src="./images/ewm.png" alt=""><div class="icon-ewm-box"><img src="./images/smewm.png" alt=""></div></a><img src="./images/gwc.png" alt=""></div>
</body>
</html>

案例3-二级下拉菜单

<!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>Document</title><style>/* 一级菜单 */.one-menu{position: relative;}.one-menu > li{/* 去除无序列表列表项的小圆点 */list-style: none;background-color: aqua;width: 50px;margin: 20px 0;}/* 二级菜单 */.two-menu {position: absolute;top: 0;left: 100px;/* 让二级菜单影藏 */display: none;}.two-menu li{width: 100px;background-color: pink;list-style: none;}.one-li:hover .two-menu{display: block;}</style>
</head>
<body><ul class="one-menu"><li class="one-li">手机<ul class="two-menu"><li>红米手机</li><li>oppo手机</li></ul></li><li class="one-li">家电<ul class="two-menu"><li>小米电视</li><li>格力空调</li></ul></li><li class="one-li">粮油<ul class="two-menu"><li>大米</li><li>食用油</li></ul></li></ul></body>
</html>

案例4-贯穿案例-二级下拉菜单

三 CSS动画

1 阴影效果

box-shadow: 水平偏移量 垂直偏移量 模糊度  阴影颜色 
box-shadow: 10px 10px 10px red

<!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>Document</title><style>.box{width: 200px;height: 200px;border: 1px red solid;/*  box-shadow:水平偏移量  垂直偏移量  模糊度 颜色   */box-shadow: 10px 10px 10px red;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

2 背景渐变

background: linear-gradient(red,green,blue);

基本案例

    <style>.box{width: 300px;height: 200px;background: linear-gradient(red,green,blue);}</style><div class="box"></div>

色标

色标：在颜色的后面设置颜色的显示范围，控制每一个颜色到底占多少位置

    <style>.box{width: 300px;height: 200px;/* 0%~20%是红色，20%~40%是红色到绿色的渐变，40%~70%是绿色，70%~100%是蓝色 */background: linear-gradient(red 0% 20%,green 40% 70%,blue 70% 100%);}</style><div class="box"></div>

方向

background:linear-gradient(角度,起始颜色,结束颜色)

方向可以用角度 30deg表示,也可以用如下英文单词表示

英文单词
to top	从下到上
to bottom	从上到下
to right	从左到右
to left	从右到左

如：

        /* 渐变方向 */.box3{width: 200px;height: 200px;border: 1px black solid;/* 渐变方向使用角度表示 *//* background: linear-gradient(45deg,red 0% 50%,green 60% 80%,blue); *//* 渐变方向还可以使用英文单词表示to topto bottomto leftto right*/background: linear-gradient(to right,red 0% 50%,green 60% 80%,blue); }<div class="box3"></div>

案例-利用渐变色使文字显示的更清晰

<!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>Document</title><style>.box{width: 100%;height: 400px;background-image: url("http://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_7b19c73a1974944397b300ee3a739097/0");}.box div{height: 100%;color: white;text-align: center;font-size: 25px;background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.1));}</style>
</head>
<body><div class="box"><div>游戏下载新手指引资料库云顶之弈攻略中心开发者基地海克斯战利品库英雄联盟宇宙点券充值</div></div>
</body>
</html>

3 过渡

css3给我们提供的某种动态的效果，当元素从一种样式转换成另一种样式时，使其平滑过渡
一般情况下来说，过渡都是搭配hover来使用的

案例1-从背景过度到文字

<!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>Document</title><style>.top{width: 50px;height: 50px;border: 1px gray solid;background-image: url("./img/gt1.png");background-repeat: no-repeat;background-position: center;}.top div{width: 50px;height: 50px;background-color: #900000;color: white;opacity: 0;/* 过度 *//* 元素哪些属性过度 */transition-property: all;/* 过度时间 */transition-duration: 1s;}.top:hover div{opacity: 1;}</style>
</head>
<body><div class="top"><div>去购物</div></div>
</body>
</html>

案例2-贯穿项目-二级菜单

<!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>Document</title><style>ul{list-style: none;display: flex;position: relative;}li{margin: 0 20px;}/* 设置div的初始样式 */.list1,.list2{position: absolute;width: 400px;height: 0px;/* 溢出隐藏 */overflow: hidden;/* 过度 transition: 过度属性 过度时间  */transition: all 1s;}/* 搭配hover实现过度 */li:hover .list1{height: 300px;}li:hover .list2{height: 100px;}</style>
</head>
<body><ul><li><a href="#">所有商品</a><div class="list1"><img src="./images/nav1.jpg" alt="">  <img src="./images/nav2.jpg" alt="">  </div></li><li><a href="#">装饰摆件</a><div class="list2">插画花艺 千花花瓶</div></li></ul>
</body>
</html>

Day10-网页布局实战CSS3

一补充 1 画三角形 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…...

编程日记 2023/5/3 14:48:44

代码规范（C/C++规范）

文章目录前言个人编写的代码规范链接请求合作大体章节END前言什么是代码规范一套用于统一代码开发的准则为什么需要代码规范提升代码可读性，提升团队效率个人编写的代码规范近期本人编写了一份以C/C为主的代码规范。其他语言开发者也可以阅读参考。本…...

编程日记 2023/5/3 14:48:42

春招冲刺（九）：计算属性和监视属性总结

计算属性和监视属性总结 Q1：计算属性姓：<input type"text" v-model"firstName"><br><br> 名：<input type"text" v-model"lastName"><br><br> 姓名&#xff…...

编程日记 2023/5/3 10:47:41

数据挖掘（作业1）

实验开始前先配置环境以实验室2023安装的版本为例： 1、安装anaconda：（anaconda自带Python,安装了anaconda就不用再安装Python了） 下载并安装 Anaconda3-2022.10-Windows-x86_64.exe 自己选择安装路径，其他使用默认…...

编程日记 2023/5/3 20:02:54

【UE4 RTS游戏】01-项目准备

步骤新建一个工程，选择俯视角游戏模板我命名工程如下：删除场景内的所有cube再删除Floor和Wall删除TopDownCharacter删除“NavgationMeshBoundVolume”删除“TamplateLabel”和“RecastNavMesh-Default”删除LightmassImportanceVolume、PostProcessVolum…...

编程日记 2023/5/3 14:48:40

登录系统账号检测--课后程序(Python程序开发案例教程-黑马程序员编著-第3章-课后作业)

实例8：登录系统账号检测登录系统一般具有账号密码检测功能，即检测用户输入的账号密码是否正确。若用户输入的账号或密码不正确，提示 “用户名或密码错误”和“您还有*次机会”； 若用户输入的账号和密码正确，提示“登…...

编程日记 2023/5/3 14:48:39

CentOS8基础篇12：使用RPM管理telnet-server软件包

一、RPM包管理工具简介 RedHat软件包管理工具(RedHat Package Manager，RPM) RPM软件包工具常用于软件包的安装、查询、更新升级、校验、卸载以及生成.rpm格式的软件包等操作。 RPM软件包工具只能管理后缀是.rpm的软件包。软件包的命名格式： 软件名称…...

编程日记 2023/5/3 14:48:37

IT女神文章记录之自己

匆匆时光，一转眼自己已经从一个学生转变成一个职场工作者了刚出校园的时候，对职场充满了憧憬，觉得自己可以大展身手然后其实在我毕业后2年内，踏入码农阶段的时候，是一段非常压抑的工作，不知道谁能体会到那种…...

编程日记 2023/5/3 14:48:35

Compose 动画 (四) : AnimatedVisibility 各种入场和出场动画效果

AnimatedVisibility中的EnterTransition 和 ExitTransition ，用来配置入场/出场时候的动画效果。默认的入场效果是 fadeIn() expandVertically() 默认的出场效果是 fadeOut() shrinkVertically() 1. EnterTransition和ExitTransition支持的动画 enter的参数类…...

编程日记 2023/5/3 5:14:06

notepad++学习小技巧

不要小瞧了notepadd 这个可是我们的cv好帮手。。。实战1背景，我找一个同事要表结构结果他给我了一个xml。顿时一懵，我也不知道为啥好像是从前端扣下来的。建表我只需要 columnName, displayName当作是comment， dataTypeNamecolumnType借鉴…...

编程日记 2023/5/3 2:28:13

Android supports-screens 屏幕适配

基本概念 supports-screens用于设置屏幕相关，处于Manifest的子标签中。使您能够指定应用支持的屏幕尺寸，并为比应用支持的最大屏幕还大的屏幕启用屏幕兼容性模式。请务必始终在应用中使用此元素指定应用支持的屏幕尺寸。注意：建议不要在屏…...

编程日记 2023/5/3 14:48:33

操作系统基础知识介绍之Mixed CriticalitySystems——混合关键系统

一、发展背景在嵌入式场景中，虽然Linux已经得到了广泛应用，但并不能覆盖所有需求，例如高实时、高可靠、高安全的场合。这些场合往往是实时操作系统的用武之地。有些应用场景既需要Linux的管理能力、丰富的生态又需要实时操作系统的高实时、…...

编程日记 2023/5/3 14:48:32

【数据结构初阶】详解链表OJ题

目录一.删除链表中等于给定值的节点二.合并有序链表并返回三.链表的回文结构1.反转单链表2.返回非空链表的中间节点四.输出链表倒数第K个节点五.基于给定值x分割单链表六.返回两个链表的第一个中间节点一.删除链表中等于给定值的节点我们先来看第一题(题目链接): 因为我们需…...

编程日记 2023/5/3 14:48:30

Java基本数据类型变量自动提升、强制类型转换、String基本类型使用

文章目录基本数据类型变量自动提升特殊情况强制类型转换String基本类型使用基本数据类型变量自动提升规则： 将取值范围小（或容量小）的类型自动提升为取值范围大（或容量大）的类型。 byte、short、char-->int-->…...

编程日记 2023/5/3 14:48:28

Redis锁与幂等性不得不说的故事

前言： 相信很多小伙伴对缓存锁都不陌生，但是简单的缓存锁想要用好还是需要一些功力。本文总结了笔者多年使用缓存所的一些心得，欢迎交流探讨~ 幂等模型： 幂等场景一般由查重写入两步操作组成，两步操作组成一个最小完…...

编程日记 2023/5/3 14:48:26

Spark 应用调优

Spark 应用调优人数统计优化摇号次数分布优化Shuffle 常规优化数据分区合并加 Cache优化中签率的变化趋势中签率局部洞察优化倍率分析优化表信息 : apply : 申请者 : 事实表lucky : 中签者表 : 维度表两张表的 Schema ( batchNum，carNum ) : ( 摇号批次&#xff0c…...

编程日记 2023/5/3 14:48:24

synchronized 与 volatile 关键字

目录1.前言1.synchronized 关键字1. 互斥2.保证内存可见性3.可重入2. volatile 关键字1.保证内存可见性2.无法保证原子性3.synchronized 与 volatile 的区别1.前言 synchronized关键字和volatile是大家在Java多线程学习时接触的两个关键字，很多同学可能学习完就忘记…...

编程日记 2023/5/3 14:48:23

【0成本搭建个人博客】——Hexo+Node.js+Gitee Pages

目录 1、下载安装Git 2、下载安装Node.js 3、使用Hexo进行博客的搭建 4、更改博客样式 5、将博客上传到Gitee 6、更新博客首先看一下Hexo的博客的效果。 1、下载安装Git Git 是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本…...

编程日记 2023/5/3 14:48:21

【面试实战】认证授权流程及原理分析

认证授权流程及原理分析 1、认证 (Authentication) 和授权 (Authorization)的区别是什么?2、什么是Cookie ? Cookie的作用是什么?如何在服务端使用 Cookie ?3、Cookie 和 Session 有什么区别?如何使用Session进行身份验证?1、认证 (Authentication) 和授权 (Authorizatio…...

编程日记 2023/5/3 14:48:19

TPM命令解析之tpm2_startauthsession

参考网址链接：tpm2-tools/tpm2_startauthsession.1.md at master tpm2-software/tpm2-tools GitHub 命令名称 tpm2_startauthsession 功能启动一个TPM会话。命令形式 tpm2_startauthsession [OPTIONS] 描述启动一个TPM会话。默认是启动一个试验&#xff08…...

编程日记 2023/5/3 14:48:18

LynxPrompt Action：GitHub Actions 实现 AI 配置中心化与自动化管理

1. 项目概述：为什么我们需要一个AI配置的“中央仓库”？ 如果你和我一样，日常开发中同时用着Cursor、Claude Code、GitHub Copilot，甚至还在尝试Windsurf和Aider，那你一定遇到过这个头疼的问题：每个工具的配…...

编程新知 2026/5/12 3:05:28

暖心指南｜心理干预案例分享关键点！

行业痛点分析重庆市作为西部人口密集城市，心理健康问题呈现年轻化、复杂化趋势。调研数据显示，2022年全市心理健康机构年接诊量突破18万人次，但供需矛盾持续加剧。当前主要存在三方面挑战：临床诊断精度不足：传统评估依…...

编程新知 2026/5/12 2:30:44

Herc.ai：一站式AI API网关，统一调用GPT-4、Gemini等主流模型

1. 项目概述：Herc.ai，一个面向开发者的全能AI API网关如果你正在寻找一个能让你在项目中轻松集成GPT-4、Gemini、DALL-E、Flux等主流AI模型，同时又不想被单一供应商绑定、不想处理复杂的多API密钥管理、并且希望有一个统一的、开发者友好的接…...

编程新知 2026/5/12 2:21:51

边缘计算与AI驱动：2019年技术底层逻辑重塑与产业变革

1. 从数据洪流到智能边缘：2019年的技术底层逻辑重塑每天产生2.5万亿亿字节的数据，这个数字听起来像是天方夜谭，但这就是我们正在面对的现实。更关键的是，其中90%的数据是在过去两年里生成的。作为一名在半导体和系统设计领域摸爬…...

编程新知 2026/5/12 2:13:57

AUTOSAR Wdg模块的两种“狗”：片内看门狗与SPI外挂看门狗配置异同点解析

AUTOSAR Wdg模块深度解析：片内与SPI外挂看门狗的工程实践指南在汽车电子控制单元（ECU）开发中，看门狗（Watchdog）模块是确保系统可靠性的关键组件。AUTOSAR标准下的Wdg模块支持两种典型硬件架构——片内集成…...

编程新知 2026/5/12 1:52:24

Corvus Robotics推出可在零下仓库中自主盘点库存的新型无人机

物理AI机器人系统提供商Corvus Robotics近日发布了Corvus One冷链版——一款专为在零下20华氏度至常温环境下持续运行而设计的自主库存管理系统。该系统专为抵御极端低温、气流、霜冻和冷凝水而打造，能够在无需人工干预的情况下，对库存进行高频次、高精度…...

编程新知 2026/5/11 23:45:23

Vulkan学习笔记

顺序很重要：#define 必须在 #include <GLFW/glfw3.h> 之前出现，否则不起作用。作用：当 GLFW 的头文件看到这个宏被定义后，它就会知道你需要 Vulkan 支持，并自动执行 #include <vulkan/vulkan.h>&#xff0…...

编程新知 2026/5/11 23:24:12

TINA-TI仿真实战：从运放振铃到电源设计的电路调试指南

1. 为什么我们需要TINA-TI仿真软件作为一个在硬件设计领域摸爬滚打多年的工程师，我见过太多因为电路设计问题导致的返工案例。记得有一次，我们团队花了两周时间手工焊接的样机，上电后运放输出端出现了严重的振铃现象，不得不全部拆…...

编程新知 2026/5/11 23:13:49

从零到一：联想小新Air14 2020锐龙版Windows 10重装实战指南

1. 为什么需要重装系统？ 最近有不少朋友跟我吐槽，说用了两年的联想小新Air14 2020锐龙版越来越卡，开机要等半天，打开个文档都要转圈圈。这种情况我太熟悉了，作为一个帮朋友修过不下20台同款机型的老司机，我…...

编程新知 2026/5/11 19:22:34

STM32 LWIP服务器内存泄漏踩坑实录：我是如何实现多客户端连接并稳定运行72小时的

STM32 LWIP服务器内存泄漏排查与多客户端连接优化实战在嵌入式网络应用中，STM32结合LWIP协议栈构建TCP服务器是常见方案。但当系统需要支持多客户端并发连接并长期运行时，内存管理问题往往成为稳定性的最大威胁。本文将分享一个真实案例：如何…...

编程新知 2026/5/11 17:13:02

一 补充