ZCloudApi - 渐变色圆角 HTML 信息页 - 常规

<!DOCTYPE html>
<html>
<head>
<title>ZCloudApi - 渐变色圆角 HTML 信息页</title>
<style>
body {
background: linear-gradient(to bottom, #ff3399, #ff9933);
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
<p>.container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}</p>
<p>h1 {
margin-top: 0;
}</p>
<p>.icon {
width: 100px;
height: 100px;
margin: 0 auto;
background-image: url(https://ztsin.cn/cavatar.jpg);
background-size: cover;
border-radius: 50%;
}</p>
<p>.button {
display: inline-block;
padding: 10px 20px;
margin: 10px;
background-color: #ff9933;
color: #fff;
text-decoration: none;
border-radius: 5px;
}</p>
<p>.footer {
text-align: right;
margin-top: 20px;
}</p>
<p>.footer a {
color: #000;
text-decoration: none;
}
</style></p>
</head>
<body>
<div class="container">
<h1>ZCloudApi</h1>
<div class="icon"></div>
<a class="button" href="#section1">按钮1</a>
<a class="button" href="#section2">按钮2</a>
<a class="button" href="#section3">按钮3</a>
<div id="section1">
<h2>按钮1信息栏</h2>
<p>这是按钮1的信息内容。</p>
</div>
<div id="section2">
<h2>按钮2信息栏</h2>
<p>这是按钮2的信息内容。</p>
</div>
<div id="section3">
<h2>按钮3信息栏</h2>
<p>这是按钮3的信息内容。</p>
</div>
<div class="footer">
友情链接: <a href="https://ztsin.cn" target="_blank">Z_Tsin</a>
</div>
</div>
</body>
</html>