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

news2024/9/21 18:56:22

 下面代码使用了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 的组合来实现一幅炎炎夏日吃西瓜的画面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/815444.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

浏览器中的自动化操作插件:Automa

相信很多小伙伴跟我一样&#xff0c;每天都有大量基于浏览器的重复操作&#xff0c;比如&#xff1a;查看任务、查看新闻、查看各种每天要关注的内容&#xff0c;甚至可能还需要对其做一些操作。那么这些任务是否有办法自动化执行呢&#xff1f; 今天就给大家推荐一个浏览器扩…

对角线遍历——力扣498

文章目录 题目描述法一 直接模拟 题目描述 法一 直接模拟 class Solution { public:vector<int> findDiagonalOrder(vector<vector<int>>& mat){int mmat.size(), nmat[0].size();vector<int> res;for(int i0;i<mn-1;i){if(i%2){int x i<n …

50家公司Java,C++招聘要求

目录 &#x1f34d;前言 &#x1f34d;总结 &#x1f333;基本要求 &#x1f333;加分项 &#x1f34d;信息 &#x1f442;下一秒&#xff08;电视剧《微微一笑很倾城》插曲&#xff09; - 张碧晨 - 单曲 - 网易云音乐 招聘要求 --> &#x1f34d;信息 &#x1f34d;…

分享一个 VUE 侧边导航共用组建

项目效果图&#xff1a; 项目描述&#xff1a;加载组建时&#xff0c;隐藏&#xff0c;鼠标滑动到指定区域的时候该菜单选中高亮&#xff0c;点击菜单跳转到指定模块&#xff0c;每个页面都适用。 html 部分&#xff1a; 提示&#xff1a;我这里有英文所以有$i18n.localezh…

UniPro助力金融企业数字化转型 强化项目协作与跟踪

根据一份来自Standish Group的研究报告&#xff08;"CHAOS Report"&#xff09;&#xff0c;该报告对美国各行业的项目进行了调查&#xff0c;结果显示仅有不到一半&#xff08;约44%&#xff09;的项目能够成功按时完成&#xff0c;并达到预期的业务目标。其中&…

行云管家荣获CFS第十二届财经峰会 “2023产品科技创新奖”

7月26日至27日&#xff0c;CFS第十二届财经峰会暨2023可持续商业大会在京盛大召开。峰会主题为“激活高质量发展澎湃活力”&#xff0c;超1000位政商领袖、专家学者、企业及媒体代表出席了本次盛会&#xff0c;共同分享新技术新产品新趋势、研判全球新挑战与新变局下企业的机遇…

掌握文件重命名快捷键,使用替换功能轻松删除文件名中的符号!

您是否经常面对繁琐的文件重命名工作&#xff1f;是时候掌握一些文件管理的小技巧&#xff0c;让您的工作更加高效便捷了&#xff01;现在&#xff0c;我们向您介绍一种简单的方法&#xff0c;通过文件重命名快捷键和替换功能&#xff0c;轻松删除文件名中的符号&#xff01; …

【chap6-字符串】用Python3刷《代码随想录》

字符串是由若干字符组成的有限序列&#xff0c;也可以理解为一个字符数组 344. 反转字符串 344. 反转字符串 思路&#xff1a;双指针法。定义两个指针&#xff08;即索引下标&#xff09;&#xff0c;一个从字符串前面&#xff0c;一个从字符串后面&#xff0c;两个指针同时…

机器学习:监督学习、无监督学习、半监督学习、强化学习

1 引言 机器学习是一种人工智能领域的技术&#xff0c;它旨在让计算机通过学习数据和模式&#xff0c;而不是明确地进行编程来完成任务。机器学习分为监督学习&#xff08;Supervised Learning&#xff09;、无监督学习&#xff08;Unsupervised Learning&#xff09;、半监督…

算法笔记(Java)——动态规划

动态规划方法论 动态规划&#xff0c;英文&#xff1a;Dynamic Programming&#xff0c;简称DP&#xff0c;如果某一问题有很多重叠子问题&#xff0c;使用动态规划是最有效的。 所以动态规划中每一个状态一定是由上一个状态推导出来的&#xff0c;这一点就区分于贪心&#x…

网络安全策略应包含哪些?

网络安全策略是保护组织免受网络威胁的关键措施。良好的网络安全策略可以确保数据和系统的保密性、完整性和可用性。以下是一个典型的网络安全策略应包含的几个重要方面&#xff1a; 1. 强化密码策略&#xff1a;采用强密码&#xff0c;要求定期更换密码&#xff0c;并使用多因…

form-data 提交文件请求远程调用

文件请求方法 /*** 上传图文消息内的图片 获取url* 富文本内的图片** param file*/public static String uploadMediaGetUrl(File file) throws IOException {if (!file.exists()) {return null;}String responseData null;try {String url "http://localhost:8503/fil…

Spring Boot集成单元测试调用dao,service

文章目录 Spring Boot集成单元测试调用dao&#xff0c;service1 添加相关依赖2 新建测试类 Spring Boot集成单元测试调用dao&#xff0c;service 1 添加相关依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-st…

VirtualBox配置宿主机和虚拟机网络互通+外网访问

VirtualBox 版本&#xff1a;7.0 虚拟机版本&#xff1a;CentOS-7-x86_64-Everything-1804_2.iso 宿主机版本&#xff1a;Windows 10-21H2 VirtualBox 和 虚拟机安装 省略~ VirtualBox 配置 在虚拟机的【设置】选项中配置两张网卡&#xff0c;图下图所示&#xff0c;网卡一用…

Vue3 基础知识点汇总

1.vue3 基础 1.1vue3基础及创建 npm init vue@latest1.2.熟悉项目目录及关键文字 1.3 组合式API-setup 1.4.组合式 API reactive 和ref 函数 (都是为了生成响应式数据)

【ArcGIS Pro二次开发】(55):给多个要素或表批量添加字段

在工作中可能会遇到这样的场景&#xff1a;有多个GDB要素、表格&#xff0c;或者是SHP文件&#xff0c;需要给这个要素或表添加相同的多个字段。 在这种情况下&#xff0c;手动添加就变得很繁琐&#xff0c;于是就做了主个工具。 需求具体如下图&#xff1a; 左图是待处理数据…

测试的概念

测试职责 需求分析 测试分析 设计测试用例 执行测试用例 掌握自动化测试技术 验证产品是否实现了应该实现的功能,或者实现了不应该实现的功能 在整个软件生命周期中&#xff0c;测试是一个贯穿始终的过程&#xff0c;它包含了不同阶段和不同类型的测试,以此来保证软件工程的稳…

金融翻译难吗,如何做好金融翻译?

我们知道&#xff0c;金融翻译涉及企业经济这块的&#xff0c;是影响各公司发展很重要的一方面&#xff0c;翻译做得好&#xff0c;可以促进公司内外的交流&#xff0c;及时掌握各种信息&#xff0c;做好应对。那么&#xff0c;金融翻译难吗&#xff0c;如何做好金融翻译&#…

第五章 Opencv图像处理框架实战 5-3 图像阈值与平滑处理

图像阈值 ret, dst cv2.threshold(src, thresh, maxval, type) src&#xff1a; 输入图&#xff0c;只能输入单通道图像&#xff0c;通常来说为灰度图 dst&#xff1a; 输出图 thresh&#xff1a; 阈值 maxval&#xff1a; 当像素值超过了阈值&#xff08;或者小于阈值&am…

【C进阶】回调函数(指针进阶2,详解,小白必看)

目录 6. 函数指针数组 6.1简单计算器 6.2函数指针数组实现计算器 7. 指向函数指针数组的指针(仅作了解即可) 8.回调函数 8.1关于回调函数的理解​编辑 8.1.1用回调函数改良简单计算器 8.2qsort库函数的使用 8.2.1冒泡排序 8.2.2qsort的概念 8.3冒泡排序思想实现qsor…