帮我写一个简介美观的渐变色圆角html信息页有从上到下三个可跳转的按钮每个按钮下面有信息栏页面标题为ZCloudApi页面图标为httpsztsincncavatarjpg 。页脚右面要有友情链接文字为Z_Tsin跳转链接为httpsztsincn文字格式为utf-8背景为httpswwwdmoeccrandomphp
以下是一个简单的HTML代码，实现了你描述的要求：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZCloudApi</title>
<style>
body {
background: linear-gradient(to bottom, #ffcccc, #ff99cc);
font-family: Arial, sans-serif;
}
.container {
width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
}
h1 {
text-align: center;
color: #333;
}
.logo {
display: block;
margin: 0 auto;
width: 100px;
height: 100px;
border-radius: 50%;
}
.button {
display: block;
margin: 20px auto;
text-align: center;
}
.button a {
display: inline-block;
padding: 10px 20px;
background-color: #ff6699;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.info {
margin-top: 20px;
padding: 10px;
background-color: #f7f7f7;
border-radius: 5px;
}
.footer {
margin-top: 50px;
text-align: right;
}
.footer a {
color: #333;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<h1>ZCloudApi</h1>
<img class="logo" src="https://ztsin.cn/cavatar.jpg" alt="Logo">
<div class="button">
<a href="#">按钮1</a>
<a href="#">按钮2</a>
<a href="#">按钮3</a>
</div>
<div class="info">
<h2>按钮1信息栏</h2>
<p>这里是按钮1的详细信息</p>
</div>
<div class="info">
<h2>按钮2信息栏</h2>
<p>这里是按钮2的详细信息</p>
</div>
<div class="info">
<h2>按钮3信息栏</h2>
<p>这里是按钮3的详细信息</p>
</div>
<div class="footer">
友情链接：<a href="https://ztsin.cn">Z_Tsin</a>
</div>
</div>
</body>
</html>
你可以将上述代码保存为一个.html文件，然后在浏览器中打开该文件，即可看到渐变色、圆角和其他样式效果的信息页。请注意，图片链接和友情链接需要确保有效性
原文地址: https://www.cveoy.top/t/topic/h8pk 著作权归作者所有。请勿转载和采集!