完整代码|精简引导页【多按钮】
时间：2024-08-08 15:43:44 阅读：777
修改域名和图片地址即可。多留意png规格内容。
需要复制代码到服务器测试，直接点击运行是不行的哦
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>网站标题</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<link rel="icon" href="/img/favicon.ico">
<base target="_blank">
<!-- 主要CSS -->
<style type="text/css">
*{margin:0;padding:0;box-sizing:border-box;}
.bg{width:100%;height:100%;display:block;max-width:400px;top:0;left:50%;margin:0 auto;}
.box{top:0;left:0;width:100%;height:100%;}
.logo{padding-top:20%;text-align:center;}
.logo img{width:75%;}
.list{width:96%;min-height:32%;display:flex;align-items:center;flex-direction:column;margin:10% auto 0;}
.list a{display:block;width:100%;position:relative;text-decoration: none;background: #1d1d1d; border: 1px solid #ff5b7a; border-radius: 15px;margin-bottom: 1rem;}
.list a img{width:100%;display:flex;}
.list a .text{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;padding:.875rem 0;color:#ff5757;}
.list a .text .btnTitle{font-size:18px;color: #fff;}
.list a .text .btnLink{font-size:14px;}
.email-box a { color: #ff3159; font-weight: bold;}
.footer{text-align:center;font-size:12px;color:#fff;padding:20px;}
.notify{margin:0;background-color:#000;width:100%;height:45px;z-index:110;color:#fff;padding:5px 0px;top:0px;position:fixed;text-align:center;line-height:40px;}
body{background-color:#2c2a2a !important;}
#load-wrap {background: #fff;width:90%;padding:10px 0 ;color: #211F1F;
border-radius: 5px;text-align: center;
margin: 20px auto;
}
.contact {display: flex; justify-content: center; align-items: center;flex-wrap: wrap; gap: 20px; margin-bottom: 30px}
.contact a{
color: #fff;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 12px;
}
.contact img {
width: 2.625rem;
}
.email-box {
color: #fff;
padding: 1rem;
background-image: url("https://s21.ax1x.com/2024/08/08/pkzGdlq.png");
text-align: center;
border-radius: .5rem;
width: 96%;
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 1rem auto 2rem;
}
#app-btns {display: flex;flex-direction: row; width: 96%; margin: 0 auto;}
#app-btns a {background: #1d1d1d; color: #fff;text-decoration: none;width: calc((100% - 10px) / 2); margin-right: 10px; text-align: center; padding: 20px 0; border-radius: 10px}
#app-btns a:last-child{margin-right: 0;}
</style>
</head>
<body style="">
<div>
<div><!-- 图片正确规格450*230 -->
<div><img src="http://www.zshao.vip/zb_users/upload/hnysweb/20240309140714573.png"></div>
<div id="list-wrap" style="display: flex;">
<a href="https://www.zshao.vip">
<div>
<div>按钮一</div>
<div>www.zshao.vip</div>
</div>
</a>
<a href="https://www.zshao.vip">
<div>
<div>按钮二</div>
<div>www.zshao.vip</div>
</div>
</a>
<a href="https://www.zshao.vip">
<div>
<div>按钮三</div>
<div>www.zshao.vip</div>
</div>
</a>
<a href="https://www.zshao.vip">
<div>
<div>按钮四</div>
<div>www.zshao.vip</div>
</div>
</a>
<a href="https://www.zshao.vip">
<div>
<div>按钮五</div>
<div>www.zshao.vip</div>
</div>
</a>
<a href="https://www.zshao.vip">
<div>
<div>按钮六</div>
<div>www.zshao.vip</div>
</div>
</a>
</div>
<div id="app-btns">
<a href="https://www.zshao.vip">按钮七</a>
<a href="https://www.zshao.vip">按钮八</a>
</div>
<!-- 图片正确规格 660*100 -->
<div>
<p>文字信息一</p>
<p>文字信息二：<a href="https://www.zshao.vip">www.zshao.vip</a></p>
</div>
<div id="contactList">
<a href="https://www.zshao.vip"><img alt="" src="https://s21.ax1x.com/2024/08/08/pkzGapn.png">回家的路</a>
<a href="https://www.zshao.vip"><img alt="" src="https://s21.ax1x.com/2024/08/08/pkzGGTg.png">官方推特</a>
<a href="https://www.zshao.vip"><img alt="" src="https://s21.ax1x.com/2024/08/08/pkzGYkQ.png">官方QQ群</a>
<a href="https://www.zshao.vip"><img alt="" src="https://s21.ax1x.com/2024/08/08/pkzGtYj.png">地址发布页</a>
<a href="https://www.zshao.vip"><img alt="" src="https://s21.ax1x.com/2024/08/08/pkzGNfs.png">官方TG群</a>
</div>
<div>
<p> www.zshao.vip</p> <p>© 2024 www.zshao.vip <a href="https://www.zshao.vip" style="color:#fff;">https://www.zshao.vip</a> Inc. All Rights Reserved</p>
</div>
</div>
</div>
<div>当前页请截图保存，以免走丢</div>
</body>
</html>
网友评论