帮我写一个简介美观的渐变色圆角html信息页有从上到下三个可跳转的按钮每个按钮下面有信息栏页面标题为ZCloudApi页面图标为httpsztsincncavatarjpg 。页脚右面要有友情链接文字为Z_Tsin跳转链接为httpsztsincn
以下是一个简单的满足要求的HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>ZCloudApi</title>
<style>
body {
background: linear-gradient(to bottom, #ff3399, #ff9933);
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.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);
}
h1 {
margin-top: 0;
}
.icon {
width: 100px;
height: 100px;
margin: 0 auto;
background-image: url(https://ztsin.cn/cavatar.jpg);
background-size: cover;
border-radius: 50%;
}
.button {
display: inline-block;
padding: 10px 20px;
margin: 10px;
background-color: #ff9933;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.footer {
text-align: right;
margin-top: 20px;
}
.footer a {
color: #000;
text-decoration: none;
}
</style>
</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>
你可以将以上代码保存为一个HTML文件,然后在浏览器中打开,即可看到一个简单的美观的渐变色圆角HTML信息页
原文地址: https://www.cveoy.top/t/topic/h8m4 著作权归作者所有。请勿转载和采集!