效果演示
实现了一个可爱的熊猫登录界面，页面背景使用了渐变色，熊猫的头部和身体使用了圆形和椭圆形的边框，使用了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 { 
