很容易理解的前端基础CSS-如何美化你的网站【零基础向】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>小渣渣</title>
<style>
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#one {
width: 200px;
height: 200px;
background: orange;
text-align: center;
border-radius: 100px;
margin: 88px auto;
box-shadow: 2px 2px 25px rgba(0, 0, 0, 3);
}
</style>
</head>
<body>
<div id="one"></div>
<div
style="
max-width: 700px;
margin: 30px auto;
padding: 15px;
line-height: 1.7;
color: blue;
font-size: 36px;
"
>
<p>我是渣渣</p>
<p>哈哈哈哈</p>
</div>
<div
style="
background-color: #f1f1f1;
text-align: center;
padding: 40px;
font-size: 18px;
"
>
<p>我的网站</p>
<a href="https://www.baidu.com/">百度一下</a>
</div>
</body>
</html>
