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

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

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

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

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

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

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

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

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

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

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

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

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

CompletableFuture 详解

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

el-table数据处理

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

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

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

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

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

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

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

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

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

.asScala爆红

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

SOLIDWORKS Utilities应用

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

发现的宝藏开源软件

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

【八】mybatis 日志模块设计

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

Python-如何使用正则表达式

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

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

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

C语言,vs各种报错分析(不断更新)

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

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

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

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...