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

初学HTML：采用CSS绘制一幅夏天的图

news 2026/4/2 12:26:09

下面代码使用了HTML和CSS来绘制一幅炎炎夏日吃西瓜的画面。其中，使用了伪元素和阴影等技巧来实现部分效果。

<!DOCTYPE html>
<html>
<head><title>炎炎夏日吃西瓜</title><style>body {background-color: #add8e6; /* 背景颜色 */}.sun {position: absolute;top: 50px;right: 50px;width: 100px;height: 100px;border-radius: 50%;background-color: #ffff00; /* 太阳颜色 */box-shadow: 0 0 50px #ffff00; /* 太阳光晕 */}.grass {position: absolute;bottom: 0;left: 0;width: 100%;height: 100px;background-color: #90ee90; /* 草地颜色 */}.watermelon {position: absolute;top: 200px;left: 150px;width: 300px;height: 200px;background-color: #228b22; /* 西瓜皮颜色 */border-radius: 50%;overflow: hidden;box-shadow: 0 0 50px #228b22; /* 西瓜皮光晕 */}.watermelon:after {content: "";display: block;position: absolute;top: 20px;left: 20px;width: 260px;height: 160px;background-color: #ff4500; /* 西瓜肉颜色 */border-radius: 50%;box-shadow: 0 0 50px #ff4500; /* 西瓜肉光晕 */}.person {position: absolute;bottom: 100px;right: 200px;width: 100px;height: 150px;background-color: #ffdab9; /* 人的皮肤颜色 */border-radius: 50%;box-shadow: 0 0 50px #ffdab9; /* 人的皮肤光晕 */}.person:before {content: "";display: block;position: absolute;top: 30px;left: 20px;width: 60px;height: 60px;background-color: #ffffff; /* 眼睛颜色 */border-radius: 50%;box-shadow: 0 0 20px #ffffff; /* 眼睛光晕 */}.person:after {content: "";display: block;position: absolute;top: 80px;left: 20px;width: 60px;height: 60px;background-color: #ff69b4; /* 嘴巴颜色 */border-radius: 0 0 50% 50%;transform: rotate(-45deg);}</style>
</head>
<body><div class="sun"></div><div class="grass"></div><div class="watermelon"></div><div class="person"></div>
</body>
</html>

其中包括太阳、草地、西瓜和人的身体。

对于每个元素，都使用了CSS来设置其样式：

body 设置了背景颜色为浅蓝色。
.sun 设置了太阳的样式，包括位置、大小、颜色和光晕。
.grass 设置了草地的样式，包括位置、大小和颜色。
.watermelon 设置了西瓜皮的样式，包括位置、大小、颜色、圆角和光晕。同时设置了 overflow: hidden，超出边界部分会隐藏。
.watermelon:after 使用伪元素 :after 来实现西瓜肉的样式，包括位置、大小、颜色、圆角和光晕。
.person 设置了人的身体的样式，包括位置、大小、颜色、圆角和光晕。
.person:before 使用伪元素 :before 来实现人的眼睛的样式，包括位置、大小、颜色和光晕。
.person:after 使用伪元素 :after 来实现人的嘴巴的样式，包括位置、大小、颜色、形状和旋转。

在 HTML 中，使用 div 元素来创建这些元素，并分别指定其对应的 CSS 类名。最终通过 HTML 和 CSS 的组合来实现一幅炎炎夏日吃西瓜的画面。

初学HTML：采用CSS绘制一幅夏天的图

下面代码使用了HTML和CSS来绘制一幅炎炎夏日吃西瓜的画面。其中，使用了伪元素和阴影等技巧来实现部分效果。 <!DOCTYPE html> <html> <head><title>炎炎夏日吃西瓜</title><style>body {background-color: #add8e6; /* 背景颜…...

编程日记 2023/8/1 8:28:46

经典文献阅读之--NoPe-NeRF(优化无位姿先验的神经辐射场)

0. 简介在没有预先计算相机姿态的情况下训练神经辐射场（NeRF）是具有挑战性的。最近在这个方向上的进展表明，在前向场景中可以联合优化NeRF和相机姿态。然而，这些方法在剧烈相机运动时仍然面临困难。我们通过引入无畸变单目深度先…...

编程日记 2023/8/1 8:27:45

在docker中没有vi如何修改docker中的文件

今天在做学成在线的项目，遇到了一个问题，就是死活登不上xxl-job，按照之前遇到的nacos的问题，我怀疑很大概率是和当时的ip设置有关，不知道nacos的ip怎么修改的同学，可以看看这篇文章：关于docker中…...

编程日记 2023/8/1 8:26:41

【Docker】Docker应用部署之Docekr容器安装Nginx

目录一、搜索镜像二、拉取镜像三、创建容器四、测试使用一、搜索镜像 docker search nginx 二、拉取镜像 docker pull nginx # 不加冒号版本号默认拉取最新版三、创建容器首先我们需要在宿主机创建数据卷目录 mkdir nginx # 创建目录 cd nginx # 进入目录 mkd…...

编程日记 2023/8/1 8:25:40

flutter开发实战-jsontodart及生成Dart Model类

flutter开发实战-jsontodart及生成Dart Model类。在开发中，经常遇到请求的数据Json需要转换成model类。这里记录一下Jsontodart生成Dart Model类的方案。一、JSON生成Dart Model类在开发中经常用到将json转成map或者list。通过json.decode() 可以方便 JSON 字…...

编程日记 2023/8/1 8:24:38

C++复刻：[流光按钮]+[悬浮波纹按钮]

目录参考效果实现main.cppdialog.hdialog.cppflowingRayButton.h 流动光线按钮flowingRayButton.cpp 流动光线按钮hoveringRippleButton.h 悬浮波纹按钮hoveringRippleButton.cpp 悬浮波纹按钮模糊知识点源码参考 Python版本：GitHub地址 B站主页效果实现 ma…...

编程日记 2023/8/1 8:23:36

CompletableFuture 详解

目录简单介绍常见操作创建 CompletableFuture new 关键字静态工厂方法处理异步结算的结果简单介绍 CompletableFuture 同时实现了 Future 和 CompletionStage 接口。 public class CompletableFuture<T> implements Future<T>, CompletionStage<T…...

编程日记 2023/8/1 8:22:32

el-table数据处理

在写表格时遇到，后端返回的数据是对象，并且缺少字段 1.每一条数据加上一个字段 2.将对象转成数组以下是数据 {"groupA": {"groupName": null,"orgName": null,"orgId": null,"allPeoper": &quo…...

编程日记 2023/8/1 8:21:30

IPv4网络用户访问IPv6网络服务器

NAT64静态映射为一对一的对应关系，通常应用在IPv4网络主动访问IPv6网络的场景中。要求位于IPv4网络中的PC通过IPv4地址1.1.1.10能够直接访问位于IPv6网络中Server。操作步骤配置FW。 # 配置接口GigabitEthernet 0/0/1的IPv4地址。 <FW> system-view [F…...

编程日记 2023/8/1 8:20:28

程序员是怎么记住代码的？

程序员能记住所有东西吗？ 程序员不会记住他们使用的所有代码，相反，他们倾向于阅读文档，学习基本概念，并使用软件社区来解决问题。大约55%的软件开发人员报告每天至少使用一次StackOverflow来帮助解决编程问题。使用…...

编程日记 2023/8/1 8:19:27

华为云NFS使用API删除大文件目录

最近在使用华为云SFS时，如果一个目录存储文件数超过100W，执行 “rm -rf path”时，存在删不动的情况，可以使用华为云API接口，执行异步删除。华为官网： 删除文件系统目录_弹性文件服务 SFS_API参考_SFS Tu…...

编程日记 2023/8/1 8:18:26

国家金融监督管理总局明确将数据安全管理纳入操作风险管理范畴

为进一步完善银行保险机构操作风险监管规则，提升银行保险机构的操作风险管理水平，国家金融监督管理总局起草了《银行保险机构操作风险管理办法（征求意见稿）》（以下简称《办法》），现向社会公开征…...

编程日记 2023/8/1 8:17:24

.asScala爆红

转载：asScala报错解决方案： 导入隐式转换 import scala.collection.JavaConverters._ //asScala需要使用隐式转换代码中的asScala就可能不标红了，如果标红，就直接去掉，去掉就不报错了...

编程日记 2023/8/1 8:16:22

SOLIDWORKS Utilities应用

在实际的生产设计制造中，经常会遇到同一个零件多个版本，有可能再次调用零件的时间已经是很长时间之后，对于版本之间的区别就不会那么清楚，碰到简单明显的零件还可以轻松的找到区别，但是复杂的零件区别的查找可能会造成…...

编程日记 2023/8/1 8:15:19

发现的宝藏开源软件

1.华夏erp https://github.com/jishenghua/jshERP 2.s2b2c商城后端 lilishop商城电商 java商城系统: lilishop商城基于SpringBoot 全端开源电商商城系统支持小程序商城 H5商城 APP商城 PC商城。支持业务模式包含 O2O商城 B2B商城多语言商城跨境电商 B2B2C商城 F2B2C商…...

编程日记 2023/8/1 8:14:18

【八】mybatis 日志模块设计

mybatis 日志模块设计简介：闲来无事阅读一下mybatis的日志模块设计，学习一下优秀开源框架的设计思路，提升自己的编码能力模块设计在Mybatis内部定义了4个级别：Error:错误、warn:警告、debug:调试、trance，日志优…...

编程日记 2023/8/1 8:13:17

Python-如何使用正则表达式

如何利用Python使用正则表达式目录正则表达式常用匹配规则编辑re库的使用 match()方法： search()方法: findall()方法 : sub()方法: compile()方法; 通用匹配贪婪与非贪婪匹配贪婪匹配非贪婪匹配修饰符转义匹配正则表达式是处理字符的强大…...

编程日记 2023/8/1 8:12:16

分解质因子，将一个不小于2的整数分解质因数，例如，输入90，则输出：90=233*5

假设一个不小于2的整数n，对从2开始的自然数k，这个试探它是否是整数n的一个因子，如果是，则输出该因子，并将n/k的结果赋给n（接下来只需要对n除以已经找到的因子之后的结果继续找因子）。如果n的值不…...

编程日记 2023/8/1 8:11:15

C语言，vs各种报错分析（不断更新）

1.引发了异常: 写入访问权限冲突2.#error: Error in C Standard Library usage 1.引发了异常: 写入访问权限冲突这里是malloc没有包含头文件<stdlib.h>，包含之后就好了 2.#error: Error in C Standard Library usage 这里就是用C语言写程序时使用了C的头文件…...

编程日记 2023/8/1 8:10:13

AR开发平台 | 探索AR技术在建筑设计中的创新应用与挑战

随着AR技术的不断发展和普及，越来越多的建筑师开始探索AR技术在建筑设计中的应用。AR(增强现实)技术可以通过将虚拟信息叠加到现实场景中，为设计师提供更加直观、真实的建筑可视化效果，同时也可以为用户带来更加沉浸式的体验。 AR开发平台广…...

编程日记 2023/8/1 8:09:11

漫画脸描述生成保姆级教程：如何调试生成结果提升SD绘图匹配度

漫画脸描述生成保姆级教程：如何调试生成结果提升SD绘图匹配度你是不是也遇到过这样的情况：脑子里有个超棒的二次元角色形象，但用AI绘图工具画出来总是差那么点意思？要么发型不对，要么表情奇怪，要么服装细…...

编程新知 2026/4/2 12:23:54

告别单点故障：Azkaban 3.84.4多Executor集群部署与性能调优实战

告别单点故障：Azkaban 3.84.4多Executor集群部署与性能调优实战在数据密集型企业的日常运营中，任务调度系统如同中枢神经般重要。当团队规模扩大、数据处理需求激增时，单节点Azkaban往往会成为性能瓶颈——任务队列堆积、响应延迟&#xff0…...

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

XInput1_4.dll缺失怎么修复？2026年最新官方安全修复指南

XInput1_4.dll缺失怎么修复？2026年最新官方安全修复指南当你满心欢喜地连接好Xbox手柄，准备沉浸到最新游戏的紧张对决中，屏幕上却突然弹出“找不到XInput1_4.dll”或“XInput1_4.dll丢失”的错误提示，这确实让人瞬间扫兴。这个报错…...

编程新知 2026/4/2 11:36:49

Ostrakon-VL终端惊艳效果：终端界面响应速度实测对比

Ostrakon-VL终端惊艳效果：终端界面响应速度实测对比 1. 像素特工终端效果展示 1.1 视觉设计亮点 Ostrakon-VL终端采用了独特的8-bit像素艺术风格，将传统零售场景中的图像识别任务转化为充满游戏感的"数据扫描任务"。这种设计不仅提升了用户…...

编程新知 2026/4/2 11:18:32

基于氢储能的热电联供型微电网优化调度方法附Matlab代码

✅作者简介：热爱科研的Matlab仿真开发者，擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页：Matlab科研工作室👇 关注我领取海量matlab电子书和…...

编程新知 2026/4/2 10:34:09

Qwen3-14B私有部署商业应用：替代SaaS服务降本提效的真实测算

Qwen3-14B私有部署商业应用：替代SaaS服务降本提效的真实测算 1. 私有部署的商业价值在当今企业数字化转型浪潮中，大语言模型的应用已经成为提升效率的关键工具。然而，依赖第三方SaaS服务不仅成本高昂，还存在数据安全和响应速度…...

编程新知 2026/4/2 9:43:19

敲敲云零代码平台一键部署实战：命令安装 vs Docker 安装

敲敲云提供两种一键部署方式，一条命令即可完成私有化部署，全程约 3 分钟。本文记录实际操作过程部署前准备服务器配置建议： 4 核 8GB 内存，50GB SSD 系统盘。支持系统：TencentOS、Alibaba Cloud Linux、CentOS Stre…...

编程新知 2026/4/2 7:41:17

丰田的“改善”到底牛在哪？-云质QMS为您解读精益生产的核心

提到丰田，大家第一反应大概率是精益生产、JIT 即时制，却很少有人深究，支撑丰田几十年持续领跑制造业的底层逻辑，其实是那个看似简单的日语词 ——改善（kaizen）。很多企业学丰田学了个皮毛，照搬流…...

编程新知 2026/4/2 7:35:15

人工智能应用快速原型开发：基于PyTorch 2.8和Gradio构建交互式Demo

人工智能应用快速原型开发：基于PyTorch 2.8和Gradio构建交互式Demo 1. 为什么需要快速原型开发工具在人工智能领域，一个好想法从诞生到落地往往需要经历漫长的验证过程。传统方式下，即使训练出了一个效果不错的模型，想要展示给…...

编程新知 2026/4/2 6:46:40

从MATLAB到C++：手把手教你将鱼眼相机标定结果（Scaramuzza模型）部署到OpenCV项目

从MATLAB到C：手把手教你将鱼眼相机标定结果（Scaramuzza模型）部署到OpenCV项目鱼眼相机因其超广视角在机器人导航、虚拟现实等领域应用广泛。但MATLAB标定结果如何无缝迁移到C工程环境？本文将彻底解决这个痛点，带您完成…...

编程新知 2026/4/2 6:26:29

相关文章：