效果演示
实现了一个可爱的熊猫登录界面，页面背景使用了渐变色，熊猫的头部和身体使用了圆形和椭圆形的边框，使用了CSS的伪元素和阴影效果来实现熊猫的手和脚。登录框使用了flex布局，包括用户名和密码的输入框和登录按钮，使用了CSS的过渡效果和伪类来实现输入框的动态效果。整个页面使用了响应式布局，可以适应不同大小的屏幕。
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>熊猫登录表单</title>
<link rel="stylesheet" href="./08-熊猫登录表单.css">
</head>
<body>
<div class="container">
<div class="panda">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="face">
<div class="eye-shadow left"></div>
<div class="eye-white left">
<div class="eye-ball"></div>
</div>
<div class="eye-shadow right"></div>
<div class="eye-white right">
<div class="eye-ball"></div>
</div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="body"></div>
<div class="foot left">
<div class="sole"></div>
</div>
<div class="foot right">
<div class="sole"></div>
</div>
</div>
<div class="login-box">
<div class="hand left"></div>
<div class="hand right"></div>
<h1>用户登录</h1>
<div class="ipt-box">
<input type="text" required>
<label>用户名</label>
</div>
<div class="ipt-box">
<input type="password" id="password" required>
<label>密码</label>
</div>
<button>登录</button>
</div>
</div>
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="./08-熊猫登录表单.js"></script>
</body>
</html>
/* 清除所有元素的默认margin和padding */
* {
margin: 0; /* 清除外边距 */
padding: 0; /* 清除内边距 */
}
/* 设置body的样式 */
body {