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

最新推荐文章于 2024-01-17 17:18:50 发布

HellowZheng

最新推荐文章于 2024-01-17 17:18:50 发布

阅读量330

点赞数 1

分类专栏： HTML 文章标签： html css

请勿抄袭

本文链接：https://blog.csdn.net/HellowZheng/article/details/125949883

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

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

效果图

看一下效果：

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

源代码

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

第一个文件“机器人.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>