HTML---(很丑的)机器人

HellowZheng

506人浏览 · 2022-07-23 17:05:01

HellowZheng · 2022-07-23 17:05:01 发布

前言

今天，我将为大家带来一个~~长得很丑的~~ 机器人。

效果图

看一下效果：

机器人
~~确实很丑~~
哈哈哈

源代码

尽管他很丑 (很好看),但还是要把代码亮出来。。。

第一个文件“机器人.css””

div
{
	margin: 0 auto;
	border: 1px solid white;
	background-color: white;
}

.head
{
	width: 300px;
	height: 200px;
	background-color:#82D900;
	border-radius: 10px;
}

.eye
{
	width: 100px;
	height: 100px;
	background-color:orange;
	border-radius: 50%;
	float: left;
	position: relative;
	left: 10px;
	margin: 20px;
}

.eye1
{
	width: 80px;
	height: 80px;
	background-color:#743A3A;
	border-radius: 50%;
	margin: 10px;
}

.eye2
{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: white;
	margin-top: 10px;
	margin-left: 25px;

}

.mouth
{
	width: 50px;
	height: 30px;
	background-color: #D94600;
	position: relative;
	top: 140px;
	border-radius: 0px 0px 50px 50px;
}

.ear1
{
	width: 50px;
	height: 60px;
	background-color: #D94600;
	position: fixed;
	top: 80px;
	left: 748px;
	border-radius: 50px 0px 0px 50px;
}

.ear2
{
	width: 50px;
	height: 60px;
	background-color: #D94600;
	position: fixed;
	top: 80px;
	right: 747px;
	border-radius: 0px 50px 50px 0px;
}

.neck
{
	width: 50px;
	height: 40px;
	background-color: #FF9224;
}

.body
{
	width: 250px;
	height: 200px;
	background-color:#82D900;
	border-radius: 30px;
}

.body2
{
	width: 100px;
	height: 100px;
	background-color:white;
	border-radius: 50%;
	margin-top: 50px;
}

.arm1
{
	width: 50px;
	height: 50px;
	background-color:#FF9224;
	position: fixed;
	top: 254px;
	left: 810px;
	border-radius: 50%;
}

.arm11
{
	width: 200px;
	height: 20px;
	background-color:#FF9224;
	position: fixed;
	top: 270px;
	left: 610px;
	border-radius: 50px;
}


.arm2
{
	width: 50px;
	height: 50px;
	background-color:#FF9224;
	position: fixed;
	top: 254px;
	right: 810px;
	border-radius: 50%;
}

.arm21
{
	width: 200px;
	height: 20px;
	background-color:#FF9224;
	position: fixed;
	top: 270px;
	right: 610px;
	border-radius: 50px;
}

.leg1
{
	width: 50px;
	height: 200px;
	background-color:#FF9224;
	margin-left: 850px;
	float: left;
}

.leg2
{
	width: 50px;
	height: 200px;
	background-color:#FF9224;
	margin-left: 1000px;
	/*float: left;*/
}

.foot1
{
	width: 80px;
	height: 50px;
	background-color:#484891;
	margin-left: 835px;
	border-radius: 50% 50% 0 0;
	float: left;
}

.foot2
{
	width: 80px;
	height: 50px;
	background-color:#484891;
	margin-left: 987px;
	border-radius: 50% 50% 0 0;
}

第二个文件“main.html”

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="机器人.css">
</head>
<body>
	<div class="head" >
		<div class="eye"><div class="eye1"><div class="eye2"></div></div></div>
		<div class="eye"><div class="eye1"><div class="eye2"></div></div></div>
		<div class="mouth"></div>
	</div>
	<div class="ear1"></div>
	<div class="ear2"></div>
	<div class="neck"></div>
	<div >
		<div class="arm1">
			<div class="arm11"></div>
		</div>
		<div class="body">
			<div class="body2">
		</div>
		<div class="arm2">
			<div class="arm21"></div>
		</div>
	</div>
	</div>
	<div class="leg">
		<div class="leg1"></div>
		<div class="leg2"></div>
	</div>
	<div class="foot">
		<div class="foot1"></div>
		<div class="foot2"></div>
	</div>
</body>
</html>

总结

好的，这个很丑的机器人终于neng完了哈。。
代码不难，应该能看懂，看不懂就别看了。。

别打脸啊！！！！！

额……被打了一巴掌。
拜拜了您嘞！！！！！！

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

机器人项目方案前置评审清单：定方案前先问清 5 个问题

接口文档不要只写正常流程，至少要补充异常状态、恢复动作、责任归属和记录证据。

DAMO开发者矩阵

20_项目实战六_企业文档智能检索平台_LangSmith监控_权限管控_数据看板

前面我们已经做过个人知识库问答助手、客服机器人、SQL 查询助手、代码审查 Agent 和多 Agent 日报系统。这些项目解决的是单点能力。多个部门都要上传文档。不同用户只能看自己有权限的文档。支持 PDF、Word、Markdown、网页、内部 Wiki。文档更新后要增量入库。用户提问时要返回答案和引用来源。管理员要看到 QPS、延迟、Token 消耗、用户活跃度。出问题时要能追踪每一次检索、